# Integrate in your shop

Source: https://gokarla.io/docs/guides/tracking-page/integrate-in-your-shop

# Integrate in your shop

Tracking pages embed into your shop website through the Karla
[Browser SDK](/docs/platform/browser-sdk) — a single script tag plus a
container div.

:::tip 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](/docs/guides/shops/shopify#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:

```html
<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](https://portal.gokarla.io/) under your shop profile).

For all supported script attributes, order lookup methods, debug options, and
advanced configuration, see the [Browser SDK](/docs/platform/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](/docs/platform/browser-sdk) for all supported lookup
methods.

:::tip 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](/docs/api-reference), 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"`:

```html
<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](/docs/platform/browser-sdk).

## Using the API directly

If you'd rather build your own tracking UI from scratch, see the
[API reference](/docs/api-reference).