Hurtigstart

Widgetoversikt

Widgetappen er vert på widget.companin.tech og gir en enkel måte å integrere en Kundestøtte AI Agent i nettstedet ditt. For å komme i gang, må du opprette en agent og en OAuth-applikasjon.

Widgeten er en lettvekts, selvstendig applikasjon som kjører i en isolert iframe på nettstedet ditt. Denne arkitekturen sikrer at widgeten ikke vil komme i konflikt med din eksisterende CSS eller JavaScript, samtidig som den opprettholder utmerket ytelse og sikkerhet.

1. Opprett en agent

Først, opprett en Kundestøtte AI Agent i dashbordet ditt:

Agenten din er AI-hjernen bak widgeten. Den behandler brukermeldinger, opprettholder samtalekonteksten og genererer intelligente svar. Hver agent kan tilpasses med spesifikke instruksjoner, personlighetstrekk og kunnskapsbaser for å matche bruken din.

1. Gå til dashbordet ditt og naviger til siden "Datakilder"
2. Klikk på "Legg til"-knappen i agentseksjonen
3. Fyll inn agentdetaljene (navn, beskrivelse, tone, osv.)
4. Lagre agenten og noter dens ID

Tips: Gi agenten din klare, spesifikke instruksjoner om dens rolle og begrensninger. For eksempel: "Du er en hjelpsom kundestøtteagent for et SaaS-produkt. Du kan svare på spørsmål om funksjoner, priser og kontoadministrasjon. For tekniske problemer, diriger brukere til å opprette en supportbillett."

2. Opprett en OAuth-applikasjon

Opprett en OAuth-applikasjon for å autentisere widgeten din:

1. Gå til "OAuth"-siden i dashbordet ditt
2. Klikk "Opprett applikasjon"
3. Fyll inn applikasjonsnavnet og beskrivelsen
4. Kopier client_id fra den opprettede applikasjonen

3. Integrer widgeten via Iframe

Den enkleste måten å integrere widgeten på er ved å integrere den direkte ved hjelp av en iframe. Denne metoden krever ingen JavaScript-initialisering og fungerer umiddelbart. For flere iframes på én side, hold hver integrering avgrenset til sin egen beholder og parametere.

<iframe src="https://widget.companin.tech/embed/session?key=YOUR_WIDGET_KEY&locale=en" style="border:none; width:100%; height:600px; border-radius:8px;" title="Customer Support AI Agent Widget"></iframe>

Erstatt YOUR_WIDGET_KEY med widgetens installasjonsnøkkel (verdien wgt_… — kopier den fra Widget-siden eller Install-siden i dashbordet). Parameteren locale kan settes for å matche språk på nettstedet ditt.

Avansert: JavaScript-initialisering

Den anbefalte integrasjonsmetoden er å bruke vår JavaScript-widgetlaster, som gir automatisk størrelsesjustering, konfigurasjonsadministrasjon og responsiv atferd.

Skriptintegrasjon

Legg til følgende skript-tag til HTML-siden din:

<script  src="https://widget.companin.tech/widget.js"  data-widget-key="YOUR_WIDGET_KEY"  data-instance-id="support-widget"  data-locale="en"  data-theme="system"  async></script>

Skriptattributter

Hvert attributt har et spesifikt formål i konfigurasjonen av widgeten din:

• data-widget-key: Widget-ID-en til widgeten din - Den eneste verdien de fleste installasjoner trenger. Den løser klienten, agenten og konfigurasjonen på serversiden, så du trenger ikke å lime dem inn separat.

De tre attributtene nedenfor er et avansert alternativ til data-widget-key - bruk dem for multi-instansoppsett der du trenger å målrette en spesifikk klient, agent eller konfigurasjon eksplisitt:

• data-client-id: Din OAuth-klient-ID - Dette autentiserer applikasjonen din med vårt API. Tenk på det som passordet til appen din.
• data-agent-id: UUID-en til agenten din - Dette identifiserer hvilken kundestøtte-AI-agent som håndterer samtalene.
• data-config-id: UUID-en til widgetkonfigurasjonen din - Dette bestemmer hvordan widgeten din ser ut og oppfører seg (farger, størrelse, posisjon, osv.).
• data-instance-id: Unik per-widget instans-ID - Påkrevd når du setter inn flere widgets på samme side for å unngå kollisjoner og muliggjøre per-instans API-målretting.
• data-custom-css: Utdødd. Å sette dette attributtet logger en konsolladvarsel og har ingen effekt. Sett custom_css på widgetkonfigurasjonen din i dashbordet i stedet — det lastes fra konfigurasjonen og injiseres automatisk i iframen.
• data-locale: Språk kode (f.eks. "en", "es", "fr") - Setter widgetens visningsspråk. Agenten vil fortsatt svare på hvilket som helst språk brukerne skriver på.
• data-theme: Temamodus - lys, mørk, eller system (følg besøkendes enhet). Velger hvilken fargepalett (konfigurert i dashbordet ditt) widgeten viser. Utelat det for å bruke din lagrede standard.
• data-dev: Sett til "true" for utviklingsmodus (localhost) - Bruk dette når du tester lokalt. Fjern eller sett til "false" for produksjon.

Widgeten vil automatisk:

• Hente konfigurasjonen fra konfigurasjons-ID-en
• Større seg selv i henhold til widgetdimensjonene i konfigurasjonen
• Posisjonere den sammenfoldede knappen basert på konfigurasjonsinnstillingene
• Starte åpen eller lukket basert på konfigurasjonens start_open innstilling.

Notater

• Widgeten administrerer automatisk sin egen størrelse basert på konfigurasjonsinnstillingene dine
• Den sammenfoldede knappens posisjon kan tilpasses gjennom widgetkonfigurasjonen
• Widgeten respekterer innstillingen start_open fra konfigurasjonen din
• All styling (farger, skrifttyper, dimensjoner) styres gjennom widgetkonfigurasjonen
• Widgeten bruker postMessage-kommunikasjon for responsiv atferd
• Utviklingsmodus kan aktiveres med data-dev="true" for testing på localhost
• For server-side tokenutveksling, bruk /api/v1/auth/widget-token og hold klienthemmeligheten på serveren din.
• Sørg for at vertens opprinnelse (for eksempel http://localhost:3000) er inkludert i OAuth tillatte opprinnelser når du setter inn widgeten i en iframe.