Integrate in your shop#
Tracking pages embed into your shop website through the Karla Browser SDK — a single script tag plus a container div.
Shopify shops
If you're on Shopify, skip this guide — our Shopify app ships a theme extension that handles the embed for you. Follow Advanced: Setting up your own Tracking Page template to wire it into a dedicated template.
Never add the tracking widget to your default page template — it will override every page using that template.
Embed the tracking widget#
Add a container div and the bundle script to the page where you want the tracking widget to render:
<div id="karla-container"></div>
<script
id="karla-bundle"
src="https://browser.gokarla.io/latest/bundle.min.js"
data-shop-slug="my-shop-slug"
></script>Replace my-shop-slug with your own shop slug (find it in the
portal under your shop profile).
For all supported script attributes, order lookup methods, debug options, and advanced configuration, see the Browser SDK reference.
Test your embed#
Once the page is published (e.g. https://your-shop-domain/tracking), add
order identifiers as URL parameters to preview a real order:
- ZIP code lookup:
https://your-shop-domain/tracking?orderNumber=00001&zipCode=10119 - Token-based lookup:
https://your-shop-domain/tracking?orderNumber=00001&token=abc123
See the Browser SDK for all supported lookup methods.
Tokens unlock extra actions on the order
When you link to the tracking page with a token instead of a ZIP code, Karla treats the visitor as authenticated for that specific order. We reserve advanced, order-scoped operations (things like cancellation flows and similar sensitive actions) for token-authenticated sessions, and the set of capabilities behind the token keeps growing over time.
Token lookup is enabled by default on every shop (Shopify and others), and every notification Karla sends — including the tracking page URL in shipping emails — already carries the token for that order. You can also retrieve a token-protected URL for any order through our public API, so you can embed secure deep links in your own emails, flows, or support tools.
Order finder#
If you want a standalone finder page (where shoppers enter their own order
details), set data-starter-page="order-finder":
<div id="karla-container"></div>
<script
id="karla-bundle"
src="https://browser.gokarla.io/latest/bundle.min.js"
data-shop-slug="my-shop-slug"
data-starter-page="order-finder"
></script>Other starter pages (tracking-updates, resolve, order-tracking) and the
full attribute list are documented in the
Browser SDK.
Using the API directly#
If you'd rather build your own tracking UI from scratch, see the API reference.