Documentation · Web SDK v1

Integrate Mirror on the web

The Web SDK injects a “Try with Mirror” CTA into product pages and product listings, launches the try-on experience, and sends consent-aware first-party events to your account.

Before you beginCreate an account, copy the publishable site key from Integration, and add every storefront origin that may load the SDK.

Quickstart

Add this script before the closing </body> tag on pages where try-on should be available.

<script
  src="https://platform.ikawn.com/sdk/v1/mirror.js"
  data-ikawn-site="site_live_..."
  defer
></script>

Sign in and open Integration.
Add the exact production and preview origins.
Copy the generated snippet into the storefront.
Open a product page and verify the CTA and session in Usage.

CTA placement

For deterministic placement, add the default mount point wherever the button belongs.

<div id="ikawn-mirror-cta"></div>

You can also use data-ikawn-mirror or define account-level PDP and listing selectors. If no mount exists on a valid product page, the SDK can render a floating CTA.

Product detection

The SDK first reads schema.org Product JSON-LD. Listing pages can use your configured product-card, image, and link selectors. For complete control, pass product data explicitly through the browser API.

Browser API

window.iKawnMirror.open({
  externalId: "SKU-1042",
  name: "Draped silk dress",
  imageUrl: "https://cdn.example.com/dress.jpg",
  productUrl: window.location.href
});

open(product) launches try-on. scan() reruns selector discovery after a client-side navigation. consent(state) updates consent, and track(name, properties) records an allowed custom event.

First-party events

Built-in events cover SDK readiness, product views, CTA impressions and clicks, try-on starts, completions, failures, and consent changes. Records are tenant scoped and batch-ingested with event IDs for retry safety.

Authentication

Use a site_live_... publishable key in browser code. Use a mirr_sk_... secret key only from trusted servers, kiosks, and future mobile backends. Secret keys are shown once, stored as hashes, and can be revoked.

Never expose secret keysA secret API key must not be included in JavaScript delivered to a shopper.

REST API

Read account usage from a server using the secret key as a Bearer token.

curl https://platform.ikawn.com/api/v1/account/usage \
  -H "Authorization: Bearer mirr_sk_..."

Security & privacy

Site keys are restricted by exact origin. Session tokens are short-lived and bind the embedded experience to the initiating origin. Analytics payloads honor configured consent mode, request bodies are bounded, and privacy export or deletion requests can be queued by anonymous or session ID.

Mobile SDKs

Kotlin, Swift, React Native, and Flutter SDKs are Phase 2. They will reuse the same organization, credentials, usage ledger, and event model shipped in Phase 1.

Set up Web SDK