Vera er en script-tag-basert widget. Én linje kode er nok for å aktivere chatboten på en hvilken som helst nettside, uavhengig av teknologi-stack.
Lim inn scriptet rett før </body> på siden. Widgeten laster asynkront og blokkerer ikke sideinnlasting.
<script src="https://vera-widget.pages.dev/widget.js" data-license="VERA-XXXX-XXXX-XXXX" defer ></script>
Erstatt VERA-XXXX-XXXX-XXXX med lisensnøkkelen fra dashboardet. Nøkkelen er bundet til et spesifikt domene og valideres server-side ved hvert kall.
Widgeten konfigureres via data-*-attributter på script-taggen. Verdier satt her overstyrer dashboardkonfigurasjonen.
| Attributt | Type | Påkrevd | Beskrivelse |
|---|---|---|---|
| data-license | string | Ja | Lisensnøkkelen knyttet til domenet. Genereres automatisk i dashboardet. Nøkkelen er domenebegrenset og vil ikke fungere fra andre opprinnelser. |
| data-primary-color | string (hex) | Nei | Primærfarge for widget-topp og boble. Standard: verdien satt i dashboardet. |
| data-position | "bottom-right" | "bottom-left" | Nei | Posisjon av chat-boblen. Standard: bottom-right. |
<script src="https://vera-widget.pages.dev/widget.js" data-license="VERA-XXXX-XXXX-XXXX" data-primary-color="#0066ff" data-position="bottom-left" defer ></script>
Widgeten bruker lukket Shadow DOM (mode: "closed"). Det betyr at eksisterende CSS på siden ikke påvirker widgeten, og widgetens stiler ikke lekker ut. Ingen ekstra reset eller scoping er nødvendig.
// Widgeten eksponerer ingen globalt API. // All konfigurasjon skjer via data-attributter på script-taggen. // Eksempel: CSP-header som tillater widget-scriptet Content-Security-Policy: script-src 'self' https://vera-widget.pages.dev; connect-src 'self' https://vera-worker.emisolutions.workers.dev;
Dersom siden bruker en Content Security Policy må du tillate vera-widget.pages.dev under script-src og worker-endepunktet under connect-src.