Skip to main content

Embedding options

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

See Browser SDK for technical information about our JavaScript bundle.

The simplest way to embed Karla Resolve is to add a container div and let the SDK handle all iframe configuration:

<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="resolve"
></script>
Why use karla-container?
  • Simpler integration - Just one div, no iframe attributes to remember
  • Automatic configuration - SDK handles security, permissions, and sizing
  • Future-proof - SDK updates won't require changes to your code
  • Dynamic height - Works seamlessly with automatic height adjustment

Alternative approach​

warning

While supported for backwards compatibility, we recommend using the karla-container approach above for new integrations.

If you prefer to define the iframe directly, place it before the script with the karla-frame id:

<iframe
  id="karla-frame"
  style="width: 100%;"
  frameborder="0"
  allow="clipboard-read clipboard-write fullscreen"
  sandbox="allow-same-origin allow-scripts allow-forms allow-modals allow-popups"
></iframe>
<script
  id="karla-bundle"
  src="https://browser.gokarla.io/latest/bundle.min.js"
  data-shop-slug="my-shop-slug"
  data-starter-page="resolve"
></script>

Container placement​

important

Both the karla-container div and the legacy karla-frame iframe must be placed before the script tag in your HTML. The script runs immediately and looks for these elements when it executes.

Script parameters​

The bundle.min.js script accepts the following attributes:

Required attributes​

  • data-shop-slug: Your unique shop slug (can be browsed in your shop profile in portal).
    • Legacy format shop-slug is still supported for backwards compatibility

Optional attributes​

  • data-starter-page: Set to resolve to load the resolve page.
  • data-order-number: The order number as it is defined in your shop. If not provided, the parent page URL must include an orderNumber query parameter.
  • data-zip-code: The zip code to serve as validation. If not provided, the parent page URL must include a zipCode query parameter.
  • data-debug: Enable debug logging.

URL parameters​

The resolve page url will be generated from the query parameters defined in the parent page:

  • orderNumber: The order number as it is defined in your shop. Can be overridden by data-order-number script attribute.
  • zipCode: The zip code to serve as validation to show the tracking details. Can be overridden by data-zip-code script attribute.
  • flowType (optional): The predefined resolve flow (so issue selection is skipped). Can be defective, notReceived or return.
  • 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 Claim API Docs to create your own resolve frontend.