This page documents the full integration surface of the Svarbua chat widget – script attributes, JavaScript events, and the API it exposes on window. The chat's own appearance and copy (colors, name, avatar, opening message) are configured in the Svarbua admin panel, not in code, and aren't covered here.
The widget ships as a single script tag with two mount modes: "inline" (fills a container you place on the page) and "bubble" (a floating launcher button the widget creates itself, no extra markup needed).
The snippets below use a placeholder key – your own, ready to paste, is under Sites → Preview in the admin panel.
<div class="svarbua-chat-widget" style="width: 100%; max-width: 420px; height: 560px;"></div> <script src="https://svarbua.no/js/svarbua-widget.js" data-api-key="YOUR_API_KEY"></script>
<script src="https://svarbua.no/js/svarbua-widget.js" data-api-key="YOUR_API_KEY" data-mode="bubble"></script>
All the attributes below are set on the script tag itself and are only read once, when the page loads.
| Name | Description |
|---|---|
| data-api-key | Required. Identifies your site – found under Sites in the admin panel. |
| data-mode | "inline" (default) or "bubble". Controls whether the widget fills a container you place, or creates its own floating launcher button. |
| data-lang | Override the language the chat opens in (e.g. "nb-NO" or "en"). Omit it and the widget falls back to the visitor's browser language. |
| data-product-context | Optional. The feed id (the same id used in your product catalog) of the product currently shown on the page – see the dedicated section below. |
When the widget sits on a product page, by default it has no idea which product the customer is looking at – only what's in the conversation itself. Set data-product-context to the product's own feed id (the same id used in your product catalog), and the AI is told exactly which product the customer is viewing, so a question like "do you have this in red?" can be answered precisely instead of guessed at.
<script src="https://svarbua.no/js/svarbua-widget.js"
data-api-key="YOUR_API_KEY"
data-product-context="SKU-12345"></script>
If your site swaps in a different product without a full page reload (e.g. a React/Vue router), the widget never re-reads the original attribute. Call window.SvarbuaWidget.setProductContext(id) to update what's sent with the next message – no widget re-mount needed.
// Call this whenever your own client-side router swaps in a new
// product without a full page/script reload:
window.SvarbuaWidget.setProductContext("SKU-67890");
// Pass null (or omit the argument) to clear it, e.g. when navigating
// away from a product page:
window.SvarbuaWidget.setProductContext(null);
The widget talks to the rest of your page through plain window CustomEvents – no Svarbua-specific SDK required. Several of them can be "claimed" by calling event.preventDefault() synchronously in your listener, telling the widget you're handling it yourself instead of its own built-in display.
Fired when the AI requests adding a product to the cart. detail contains type ("add_to_cart"), actionId, product ({externalId, title, price: {amount, currency}}), quantity, and a respond(result) function you must call with { success, checkoutUrl? } (or { success: false }) once you're done.
If no listener calls preventDefault(), the action is treated as unhandled. If you call preventDefault() but never call respond(), the widget waits 2.5 seconds before showing the customer an error message.
window.addEventListener("svarbua:action", function (event) {
if (event.detail.type !== "add_to_cart") {
return;
}
event.preventDefault(); // claim it — otherwise the widget treats it as unhandled
myOwnCart.add(event.detail.product.externalId, event.detail.quantity)
.then(function (cart) {
event.detail.respond({ success: true, checkoutUrl: cart.checkoutUrl });
})
.catch(function () {
event.detail.respond({ success: false });
});
});
Fired when the AI shows specific products to the customer. detail contains productIds and products (full product info). Call preventDefault() to show/sort your own product display by these ids instead of the widget's own in-chat product cards.
window.addEventListener("svarbua:suggested_products", function (event) {
event.preventDefault(); // claim it — the widget won't render its own cards
myOwnProductList.highlight(event.detail.productIds);
});
Fired when a customer asks to be notified once an out-of-stock product is back in stock. detail contains productId, productExternalId, title, and email. Purely informational – Svarbua never stores or sends this notification itself, it's up to you to save the email and notify the customer.
window.addEventListener("svarbua:restock_notification", function (event) {
myOwnBackend.saveRestockRequest(
event.detail.productExternalId,
event.detail.email
);
});
| Name | Description |
|---|---|
| data-api-key | Required. Identifies your site – found under Sites in the admin panel. |
| data-mode | "inline" (default) or "bubble". Controls whether the widget fills a container you place, or creates its own floating launcher button. |
| data-lang | Override the language the chat opens in (e.g. "nb-NO" or "en"). Omit it and the widget falls back to the visitor's browser language. |
| data-product-context | Optional. The feed id (the same id used in your product catalog) of the product currently shown on the page – see the dedicated section below. |
| window.SvarbuaWidget.setProductContext(id) | If your site swaps in a different product without a full page reload (e.g. a React/Vue router), the widget never re-reads the original attribute. Call window.SvarbuaWidget.setProductContext(id) to update what's sent with the next message – no widget re-mount needed. |
| svarbua:action | Fired when the AI requests adding a product to the cart. detail contains type ("add_to_cart"), actionId, product ({externalId, title, price: {amount, currency}}), quantity, and a respond(result) function you must call with { success, checkoutUrl? } (or { success: false }) once you're done. |
| svarbua:suggested_products | Fired when the AI shows specific products to the customer. detail contains productIds and products (full product info). Call preventDefault() to show/sort your own product display by these ids instead of the widget's own in-chat product cards. |
| svarbua:restock_notification | Fired when a customer asks to be notified once an out-of-stock product is back in stock. detail contains productId, productExternalId, title, and email. Purely informational – Svarbua never stores or sends this notification itself, it's up to you to save the email and notify the customer. |
Paste this text into your own AI coding assistant (e.g. Claude Code or Cursor) to have it implement the widget for you.
The prompt points the agent to svarbua.no/llms.txt – a machine-readable version of the documentation on this page, meant for AI agents rather than humans.
Implement the Svarbua chatbot on this site. Add the widget script (see the installation section on this page) with the correct API key from the Svarbua admin panel. Read https://svarbua.no/llms.txt for complete, machine-readable documentation of every optional feature – data-product-context for variant questions on product pages, svarbua:action to wire up the cart, svarbua:suggested_products for your own product display, and svarbua:restock_notification for restock alerts. Only implement what's actually relevant to this site, not everything on the list.