Denne siden dokumenterer hele integrasjonsflaten til Svarbua-widgeten – script-attributter, JavaScript-events og API-et den eksponerer på window. Utseende og tekster i selve chatten (farger, navn, avatar, innledende melding) konfigureres i Svarbua-administrasjonen, ikke i kode, og er ikke gjengitt her.
Widgeten leveres som ett script-tag med to monteringsmåter: "inline" (fyller en beholder du selv plasserer på siden) og "bubble" (en flytende knapp widgeten selv lager, ingen ekstra markup nødvendig).
Snuttene under bruker en plassholder-nøkkel – din egen, klar til å lime inn, finner du under Nettsteder → Forhåndsvisning i administrasjonspanelet.
<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>
Alle attributtene under settes på selve script-taggen og leses kun én gang, når siden laster.
| Navn | Beskrivelse |
|---|---|
| data-api-key | Påkrevd. Identifiserer nettstedet ditt – finnes under Nettsteder i administrasjonspanelet. |
| data-mode | "inline" (standard) eller "bubble". Bestemmer om widgeten fyller en beholder du plasserer selv, eller lager sin egen flytende knapp. |
| data-lang | Overstyr språket chatten åpner på (f.eks. "nb-NO" eller "en"). Utelates faller widgeten tilbake på nettleserens språk. |
| data-product-context | Valgfritt. Feed-id-en (samme id som i produktkatalogen din) til produktet som vises på siden akkurat nå – se egen seksjon under. |
Står widgeten på en produktside, vet den som standard ikke hvilket produkt kunden ser på – bare det som står i selve meldingene. Sett data-product-context til produktets egen feed-id (samme id som i produktkatalogen din), og AI-en får vite nøyaktig hvilket produkt kunden ser på, slik at spørsmål som «har du denne i rød?» kan besvares presist i stedet for å gjette.
<script src="https://svarbua.no/js/svarbua-widget.js"
data-api-key="YOUR_API_KEY"
data-product-context="SKU-12345"></script>
Bytter nettstedet ditt produkt uten en full sideinnlasting (f.eks. en React/Vue-router), leser widgeten aldri det opprinnelige attributtet på nytt. Kall window.SvarbuaWidget.setProductContext(id) for å oppdatere det som sendes med neste melding – ingen remontering av widgeten nødvendig.
// 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);
Widgeten kommuniserer med resten av siden din via vanlige window CustomEvent-er – ingen Svarbua-spesifikk SDK nødvendig. Flere av dem kan «kreves» ved å kalle event.preventDefault() synkront i lytteren, som forteller widgeten at du håndterer det selv i stedet for widgetens innebygde visning.
Sendes når AI-en ber om å legge et produkt i handlekurven. detail inneholder type ("add_to_cart"), actionId, product ({externalId, title, price: {amount, currency}}), quantity, og en respond(result)-funksjon du må kalle med { success, checkoutUrl? } (eller { success: false }) når du er ferdig.
Kaller ingen lytter preventDefault(), regnes handlingen som ikke håndtert. Kaller du preventDefault() men aldri respond(), venter widgeten 2,5 sekunder før den viser en feilmelding til kunden.
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 });
});
});
Sendes når AI-en viser konkrete produkter til kunden. detail inneholder productIds og products (full produktinfo). Kall preventDefault() for å vise/sortere din egen produktvisning etter disse id-ene i stedet for widgetens innebygde produktkort i chatten.
window.addEventListener("svarbua:suggested_products", function (event) {
event.preventDefault(); // claim it — the widget won't render its own cards
myOwnProductList.highlight(event.detail.productIds);
});
Sendes når en kunde ber om å bli varslet når et utsolgt produkt er tilbake på lager. detail inneholder productId, productExternalId, title og email. Rent informativt – Svarbua lagrer eller sender ikke dette varselet selv, det er opp til deg å ta vare på e-posten og varsle kunden.
window.addEventListener("svarbua:restock_notification", function (event) {
myOwnBackend.saveRestockRequest(
event.detail.productExternalId,
event.detail.email
);
});
| Navn | Beskrivelse |
|---|---|
| data-api-key | Påkrevd. Identifiserer nettstedet ditt – finnes under Nettsteder i administrasjonspanelet. |
| data-mode | "inline" (standard) eller "bubble". Bestemmer om widgeten fyller en beholder du plasserer selv, eller lager sin egen flytende knapp. |
| data-lang | Overstyr språket chatten åpner på (f.eks. "nb-NO" eller "en"). Utelates faller widgeten tilbake på nettleserens språk. |
| data-product-context | Valgfritt. Feed-id-en (samme id som i produktkatalogen din) til produktet som vises på siden akkurat nå – se egen seksjon under. |
| window.SvarbuaWidget.setProductContext(id) | Bytter nettstedet ditt produkt uten en full sideinnlasting (f.eks. en React/Vue-router), leser widgeten aldri det opprinnelige attributtet på nytt. Kall window.SvarbuaWidget.setProductContext(id) for å oppdatere det som sendes med neste melding – ingen remontering av widgeten nødvendig. |
| svarbua:action | Sendes når AI-en ber om å legge et produkt i handlekurven. detail inneholder type ("add_to_cart"), actionId, product ({externalId, title, price: {amount, currency}}), quantity, og en respond(result)-funksjon du må kalle med { success, checkoutUrl? } (eller { success: false }) når du er ferdig. |
| svarbua:suggested_products | Sendes når AI-en viser konkrete produkter til kunden. detail inneholder productIds og products (full produktinfo). Kall preventDefault() for å vise/sortere din egen produktvisning etter disse id-ene i stedet for widgetens innebygde produktkort i chatten. |
| svarbua:restock_notification | Sendes når en kunde ber om å bli varslet når et utsolgt produkt er tilbake på lager. detail inneholder productId, productExternalId, title og email. Rent informativt – Svarbua lagrer eller sender ikke dette varselet selv, det er opp til deg å ta vare på e-posten og varsle kunden. |
Lim denne teksten inn i din egen AI-kodeassistent (f.eks. Claude Code eller Cursor) for å la den implementere widgeten for deg.
Prompten peker agenten videre til svarbua.no/llms.txt – en maskinlesbar versjon av dokumentasjonen på denne siden, ment for AI-agenter i stedet for mennesker.
Implementer Svarbua-chatboten på dette nettstedet. Sett inn widget-scriptet (se installasjonsseksjonen på denne siden) med riktig API-nøkkel fra Svarbua-administrasjonen. Les https://svarbua.no/llms.txt for fullstendig, maskinlesbar dokumentasjon av alle valgfrie funksjoner – data-product-context for variantspørsmål på produktsider, svarbua:action for å koble til handlekurven, svarbua:suggested_products for egen produktvisning, og svarbua:restock_notification for lagervarsling. Implementer kun det som faktisk er relevant for dette nettstedet, ikke alt på listen.