Skip to main content

Embedding options

Tracking pages can be embedded in your shop website with our JavaScript SDK.

Add the following HTML element into your <head></head>:

<script
  id="karla-bundle"
  src="https://browser.gokarla.io/<version>/bundle.min.js"
  shop-slug="my-shop-slug"
></script>

For instance, to have always the latest stable version:

<script
  id="karla-bundle"
  src="https://browser.gokarla.io/latest/bundle.min.js"
  shop-slug="my-shop-slug"
></script>

After adding the JavaScript SDK, you can now configure a container within your <body></body> with the karla-container id, and it will show the Karla Tracking page embedded in your website.

<div id="karla-container"></div>

Alternatively, if you need more control on the iframe, you can define it directly and the bundle will load it if it uses the karla-frame id:

<iframe
  id="karla-frame"
  style="width: 100%; border: none;"
  allow="fullscreen"
></iframe>

The tracking page url will be generated from the query parameters defined in the parent page.

  • orderNumber (required): the order number as it is defined in your shop.
  • zipCode (required): the zip code to serve as validation to show the tracking details.
  • lang (optional): an ISO 639-1 language code. If the language code is supported, the page will be forced to that language even if the user browser has a different locale configured. If not defined, the page will be shown based on user preferences (fallback is en).

Using our API​

See our API Docs to create your own tracking page.