Vi bygger fortsatt ting her! Hjelp oss å forbedre ved å rapportere feil her.
Logg inn

Hurtigstart

Opprett en assistent, sett opp OAuth-autentisering, og bygg inn widgeten på nettstedet ditt.

Widget Oversikt

Widget-appen er hostet på widget.companin.tech og gir en enkel måte å bygge inn en AI-assistent på nettstedet ditt. For å komme i gang må du opprette en assistent og en OAuth-applikasjon.

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

⚡ Rask distribusjon

De fleste utviklere har widgeten kjørende på nettstedet deres innen 10 minutter. Konfigurasjonsprosessen involverer bare tre trinn: opprette legitimasjon, konfigurere utseende og legge til en enkelt skript-tag til HTML-en din.

1. Opprett en Assistent

Først, opprett en AI-assistent i dashbordet ditt:

Assistenten din er AI-hjernen bak widgeten. Den behandler brukermeldinger, opprettholder samtalekontekst og genererer intelligente svar. Hver assistent kan tilpasses med spesifikke instruksjoner, personlighetstrekk og kunnskapsbaser for å matche din brukssituasjon.

  1. Gå til dashbordet ditt og naviger til "Data Sources"-siden
  2. Klikk "Add"-knappen i Assistants-seksjonen
  3. Fyll inn assistentdetaljene (navn, beskrivelse, tone, etc.)
  4. Lagre assistenten og noter ID-en

Tupp: Gi assistenten din klare, spesifikke instruksjoner om dens rolle og begrensninger. For eksempel: "Du er en hjelpsom kundestøtteassistent for et SaaS-produkt. Du kan svare på spørsmål om funksjoner, priser og kontoadministrasjon. For tekniske problemer, be brukere om å opprette en kundestøtte."

2. Opprett en OAuth-Applikasjon

Opprett en OAuth-applikasjon for å autentisere widgeten din:

  1. Gå til "OAuth"-siden i dashbordet ditt
  2. Klikk "Create Application"
  3. Fyll inn applikasjonsnavn og beskrivelse
  4. Kopier client_id fra den opprettede applikasjonen

3. Bygg inn Widgeten via Iframe

Den enkleste måten å integrere widgeten på er å bygge den inn direkte med en iframe. Denne metoden krever ingen JavaScript-initialisering og fungerer med en gang. Ved flere iframes på samme side bør hver integrasjon ha egen container og egne parametere.

<iframe src="https://widget.companin.tech/embed/session?clientId=YOUR_CLIENT_ID&assistantId=YOUR_ASSISTANT_ID&configId=YOUR_CONFIG_ID&locale=en" style="border:none; width:100%; height:600px; border-radius:8px;" title="Customer Support AI Assistant Widget"></iframe>

Erstatt YOUR_CLIENT_ID og YOUR_ASSISTANT_ID med de faktiske verdiene dine. locale-parameteren kan settes til å matche nettstedets språk.

Avansert: JavaScript-Initialisering

Den anbefalte integreringsmetoden er å bruke JavaScript-widget-lasteren vår, som gir automatisk dimensjonering, konfigurasjonsadministrasjon og responsiv oppførsel.

Skriptintegrering

Legg til følgende skripttag til HTML-siden din:

<script  src="https://widget.companin.tech/widget.js"  data-client-id="YOUR_CLIENT_ID"  data-assistant-id="YOUR_ASSISTANT_ID"  data-config-id="YOUR_CONFIG_ID"  data-instance-id="support-widget"  data-locale="en"  data-dev="false"></script>

Skriptattributter

Hvert attributt tjener et bestemt formål med å konfigurere widgeten din:

  • data-client-id: Din OAuth-klient-ID - Denne autentiserer applikasjonen din med API-en vår. Tenk på det som appens passord.
  • data-assistant-id: UUID-en til assistenten din – Dette identifiserer hvilken AI-assistent for kundestøtte som håndterer samtalene.
  • data-config-id: UUID-en til widgetkonfigurasjonen din - Dette bestemmer hvordan widgeten ser ut og oppfører seg (farger, størrelse, posisjon osv.).
  • data-instance-id: Unik forekomst-ID for per widget – kreves ved innbygging av flere widgeter på samme side for å unngå kollisjoner og aktivere API-målretting per instans.
  • data-custom-css: (valgfritt) Inline CSS-regler som injiseres i iframens <head> før appen gjengis. Bruk dette til å overstyre stiler uten å endre konfigurasjonen. URL-koding håndteres automatisk.
  • data-locale: Språkkode (f.eks. "en", "es", "fr") – Angir widgetens visningsspråk. Assistenten vil fortsatt svare på alle språk brukere skriver på.
  • data-dev: Sett til "true" for utviklingsmodus (localhost) - Bruk denne når du tester lokalt. Fjern eller sett til "false" for produksjon.

Widgeten vil automatisk:

  • Hent konfigurasjonen fra konfigurasjons-IDen
  • Dimensjoner seg selv i henhold til widget-dimensjonene i konfigurasjonen
  • Plasser den skjulte knappen basert på konfigurasjonsinnstillingene
  • Start åpen eller lukket basert på konfigurasjonens start_open-innstilling

Notater

  • Widgeten administrerer automatisk sin egen størrelse basert på konfigurasjonsinnstillingene dine
  • Den kollapsede knappens posisjon kan tilpasses gjennom widgetkonfigurasjonen
  • Widgeten respekterer start_open-innstillingen fra konfigurasjonen din
  • All styling (farger, fonter, dimensjoner) styres gjennom widget-konfigurasjonen
  • Widgeten bruker postMessage-kommunikasjon for responsiv oppførsel
  • Utviklingsmodus kan aktiveres med data-dev="true" for testing av lokal vert
  • For tokenutveksling på serversiden, bruk /api/v1/auth/widget-token og hold klienten hemmelig kun på serveren din.
  • Sørg for at vertsopprinnelsen din (for eksempel http://localhost:3000) er inkludert i OAuth allow_origins når du bygger inn modulen i en iframe.
← TilbakeNeste: API Referanse →