Hurtigstart

Widgetoversikt

Widget-appen er vert på widget.companin.tech og gir en enkel måte å legge inn en kundestøtte AI-agent på 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 ut 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 brukerne til å opprette en supportticket."

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 ut applikasjonsnavnet og beskrivelsen
4. Kopier client_id fra den opprettede applikasjonen

3. Legg inn widgeten via Iframe

Den enkleste måten å integrere widgeten på er ved å legge den inn direkte ved hjelp av en iframe. Denne metoden krever ingen JavaScript-initialisering og fungerer rett ut av boksen. For flere iframes på én side, hold hver innsetting 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 installasjonsnøkkelen til widgeten din (wgt_…-verdien — kopier den fra Widget- eller installasjonssiden i dashbordet). Parameteren locale kan settes til å matche språket på nettstedet ditt.

Avansert: JavaScript-initialisering

Den anbefalte integrasjonsmetoden er å bruke vår JavaScript-widgetlaster, som gir automatisk størrelse, 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"  async></script>

Skriptattributter

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

• data-widget-key: Din widgets Widget-ID - Den enkeltverdien de fleste installasjoner trenger. Den løser klienten, agenten og konfigurasjonen din på serversiden, slik at du ikke limer dem inn separat.

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

• data-client-id: Din OAuth-klient-ID - Dette autentiserer applikasjonen din med API-en vår. Tenk på det som appens passord.
• 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 legger 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åkkode (f.eks. "en", "es", "fr") - Setter widgetens visningsspråk. Agenten vil fortsatt svare på hvilket som helst språk brukerne skriver på.
• 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
• Plassere 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
• Den sammenfoldede knappens posisjon kan tilpasses gjennom widgetkonfigurasjonen
• Widgeten respekterer start_open-innstillingen 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 legger inn widgeten i en iframe.