Headless and single-page storefronts

Headless storefronts use the Generic connector for catalog and orders (or the Shopify app for a Shopify backend with a custom frontend) and embed the same widget.

Load the widget onceCopy Anchor Link

Add the loader once in your document shell, not inside a route component, so navigation doesn't reload it:

<script src="https://cdn.shopassist.coec.dk/widget/<version>/loader.js" async
        integrity="sha384-<published hash>" crossorigin="anonymous"
        data-shopassist-key="pk_live_YOUR_PUBLISHABLE_KEY" data-platform="generic"></script>

The first pinned release is published with the widget's general availability; until then use the channel loader below. Your dashboard shows the current version and hash.

In Next.js, put the tag in the root layout's <body> as a plain <script async>; avoid wrappers that re-insert it on every route.

Tell the widget about route changesCopy Anchor Link

The widget reads the page type and product from the embed on load. On client-side navigation, call setPageContext so recommendations and proactive messages match the current page:

ShopAssist.setPageContext({ type: "product", productId: "SHIRT-42", variantId: "SHIRT-42-BLUE", title: "Linen shirt" })
// on a category page
ShopAssist.setPageContext({ type: "category", categoryId: "summer" })

Use your catalog ids (the same external_id values as in your feed or Push API). Calls made before the loader finished are queued if you use ShopAssistQueue:

;(window.ShopAssistQueue = window.ShopAssistQueue || []).push(["setPageContext", { type: "home" }])

JavaScript APICopy Anchor Link

Open the chat from your own button, react to events and pass the cart through your own code. See the JavaScript API, events and the cart handler.

Content Security PolicyCopy Anchor Link

Strict CSPs need four directives. The pinned loader with SRI keeps an end-to-end integrity chain:

script-src https://cdn.shopassist.coec.dk; connect-src https://api.shopassist.coec.dk https://cdn.shopassist.coec.dk; img-src https://cdn.shopassist.coec.dk <store media hosts> blob:; style-src https://cdn.shopassist.coec.dk

Details: Content Security Policy.

Signed-in customersCopy Anchor Link

Register an identity provider that asks your server for a token:

ShopAssist.identify(async ({ sessionId }) => {
  const r = await fetch("/my-server/shopassist-token", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ session_id: sessionId }),
  })
  return r.ok ? ((await r.json()).token ?? null) : null
})

Call ShopAssist.identify(null) when the customer signs out. Server side: identity JWT.