Embed the Tracking Page

Render the branded Get Plus order-tracking page inline on your own storefront — the customer stays on your domain, no redirect. It's a drop-in JavaScript widget (a <script> + a mount <div>); if you're moving off an existing embedded tracking page, it's a like-for-like swap.

This is the customer-facing half of tracking. The shipment itself is registered through the API/OMS integration — see Order Tracking. Register the shipment first; this widget displays it.

Renderer base URL — the host that serves the widget and the tracking page (different from the API base api.protectplus.io):

How it works

sequenceDiagram
    participant CUS as Customer
    participant STORE as Your storefront page
    participant GP as Get Plus renderer

    CUS->>STORE: Opens /track-your-order with the tracking number
    STORE->>GP: Loads track.js, injects an auto-sizing iframe
    GP-->>STORE: Renders the branded timeline, posts its height
    STORE-->>CUS: Widget sizes to fit, no inner scrollbar

The loader injects the Get Plus tracking page as an auto-sizing iframe, keyed on the tracking number. No API key, JWT, or server code is needed on your side — the widget is public and URL-driven, exactly like the tracking link in a shipment email.

Prerequisites

1. Your Get Plus store ID — in your Get Plus dashboard, open Tracking → Settings → Integration and copy it from the Embed on your storefront card.
2. Tracking enabled on your store.
3. The shipment is registered with Get Plus (via PUT /orders with shipments[] or POST /shipments — see Order Tracking). The widget looks the shipment up by (store, tracking number); an unregistered number shows a "not found" state.

Quick start (any website)

Add a mount element where the tracking page should appear, then load the widget:

<!-- 1. Where the tracking page renders -->
<div data-getplus-feature="track"></div>

<!-- 2. The loader — served from the Get Plus renderer host -->
<script
  src="https://orders.protectplus.io/embed/track.js"
  data-store="YOUR_GET_PLUS_STORE_ID"
  data-base="https://orders.protectplus.io"
  defer
></script>

That's the whole integration. When the page URL carries a tracking number (see below), the widget renders automatically on load — no init call needed.

The mount can be either <div data-getplus-feature="track"></div> or an element with id="getplus-tracking-widget" — the loader uses the first it finds.

Passing the tracking number

The widget needs a tracking number (the lookup key). Provide it one of two ways.

A. URL parameters (recommended — auto-init)

Link your "Track my order" call-to-action to the page with query params, and the widget renders on load:

https://www.yourstore.com/track-your-order?tracking_numbers=1Z999AA10123456784&order_numbers=ORD-1234

These are conventional tracking-link parameter names, so existing "Track" links (including &carrier=…) keep working after you swap the script.

B. Programmatically

Call the command API once the loader has run:

<script>
  window.getplus('track', {
    trackingNumbers: ['1Z999AA10123456784'],
    orderNumbers:    ['ORD-1234']   // optional
  });
</script>

window.getplus('track', …) re-renders the mount with the values you pass; anything you omit falls back to the URL params.

Shopify

On a Shopify theme, drop the same two pieces into a section on your Track your order page template. A ready-made section is available (Get Plus Tracking — mount <div> + loader + customizer settings for store ID, renderer base, heading, min-height); add it to the page in the theme editor and fill in your store ID.

Link your order-history / order-status "Track" button to /pages/track-your-order?tracking_numbers={{ tracking_number }}&order_numbers={{ order.name }} and the section renders the timeline inline.

Serve track.js from the Get Plus renderer host (as shown), not as a bundled theme asset — that lets Get Plus ship loader updates centrally.

Auto-sizing

The iframe reports its rendered height to the loader and the widget resizes to fit — no inner scrollbar and no fixed height to maintain. It starts at a 500px minimum while the page loads, then settles to the content height. Set a different floor with the mount element's own min-height (or the Shopify section's Minimum height setting) if you want to reserve more space during load.

Header, footer, and styling

Inside the embed the tracking page hides its own header and footer — your storefront already provides those — and drops its full-height background so it sits flush in your layout. All the branded styling (colours, fonts, logo, timeline, product images) comes from your Get Plus theme settings, so the embedded page matches the standalone tracking page and your shipment emails. The same page is also reachable standalone at the renderer base (https://orders.protectplus.io/track/<tracking_number>?storeId=<store>) with the full chrome, for direct links.

Which domains can embed it (security)

The tracking page can only be framed by your storefront — a clickjacking guard (frame-ancestors). Get Plus allows this automatically, with no configuration on your part:

• Any *.myshopify.com storefront is always allowed.
• Your custom storefront domain (e.g. www.yourstore.com) is allowed automatically — Get Plus derives it from the domain saved on your store record. Onboard a new merchant and their domain "just works"; there's nothing to add per store.

If you serve the page from an unusual host (a staging domain, a non-storefront subdomain) and see a browser console error about frame-ancestors, tell Get Plus the exact origin so it can be allow-listed.

Troubleshooting

Next steps

• Order Tracking — register shipments so there's something to display
• Getting Started — orders, tracking, and returns end-to-end
• Outbound Webhooks — react to tracking events on your side