Vi bygger fortfarande saker här! Hjälp oss förbättra genom att rapportera buggar här.
Logga in

Snabbstart

Bädda in widgeten och erhåll en widget-token från servern.

Widget Översikt

Widget-appen är värd på widget.companin.tech och ger ett enkelt sätt att bädda in en AI-assistent på din webbplats. För att komma igång måste du skapa en assistent och en OAuth-applikation.

Widgeten är en lätt, fristående applikation som körs i en isolerad iframe på din webbplats. Den här arkitekturen säkerställer att widgeten inte kommer i konflikt med din befintliga CSS eller JavaScript, samtidigt som den bibehåller utmärkt prestanda och säkerhet.

⚡ Snabb implementering

De flesta utvecklare har widgeten igång på sin webbplats inom 10 minuter. Installationsprocessen omfattar bara tre steg: skapa autentiseringsuppgifter, konfigurera utseende och lägga till en enda skripttagg till din HTML.

1. Skapa en Assistent

Först, skapa en AI-assistent i din dashboard:

Din assistent är AI-hjärnan bakom widgeten. Den bearbetar användarmeddelanden, upprätthåller konversationskontext och genererar intelligenta svar. Varje assistent kan anpassas med specifika instruktioner, personlighetsdrag och kunskapsbaser för att matcha ditt användningsfall.

  1. Gå till din dashboard och navigera till "Data Sources"-sidan
  2. Klicka "Add"-knappen i Assistants-sektionen
  3. Fyll i assistentdetaljerna (namn, beskrivning, ton, etc.)
  4. Spara assistenten och notera ID:t

Dricks: Ge din assistent tydliga, specifika instruktioner om dess roll och begränsningar. Till exempel: "Du är en hjälpsam kundsupportassistent för en SaaS-produkt. Du kan svara på frågor om funktioner, priser och kontohantering. För tekniska problem, hänvisa användarna till att skapa ett supportärende."

2. Skapa en OAuth-Applikation

Skapa en OAuth-applikation för att autentisera din widget:

  1. Gå till "OAuth"-sidan i din dashboard
  2. Klicka "Create Application"
  3. Fyll i applikationsnamn och beskrivning
  4. Kopiera client_id från den skapade applikationen

3. Bädda in Widgeten via Iframe

Det enklaste sättet att integrera widgeten är att bädda in den direkt via en iframe. Den här metoden kräver ingen JavaScript-initialisering och fungerar direkt. Om du använder flera iframes på samma sida ska varje inbäddning vara avgränsad till egen container och egna parametrar.

<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>

Ersätt YOUR_CLIENT_ID och YOUR_ASSISTANT_ID med dina faktiska värden. locale-parametern kan ställas in för att matcha din webbplats språk.

Avancerat: JavaScript Initiering

Den rekommenderade integrationsmetoden är att använda vår JavaScript-widget-laddare, som ger automatisk storlek, konfigurationshantering och responsivt beteende.

Skriptintegration

Lägg till följande skripttagg på din HTML-sida:

<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>

Skriptattribut

Varje attribut tjänar ett specifikt syfte med att konfigurera din widget:

  • data-client-id: Ditt OAuth-klient-ID - Detta autentiserar din applikation med vårt API. Se det som lösenordet för din app.
  • data-assistant-id: UUID för din assistent - Detta identifierar vilken Customer Support AI Assistant som hanterar konversationerna.
  • data-config-id: UUID för din widgetkonfiguration - Detta bestämmer hur din widget ser ut och beter sig (färger, storlek, position, etc.).
  • data-instance-id: Unikt instans-ID per widget – Krävs när du bäddar in flera widgetar på samma sida för att undvika kollisioner och aktivera API-inriktning per instans.
  • data-custom-css: (valfritt) Inline CSS-regler som kommer att injiceras i iframens <head> innan appen renderas. Använd detta för att åsidosätta stilar utan att ändra din konfiguration. URL-kodning hanteras automatiskt.
  • data-locale: Språkkod (t.ex. "en", "es", "fr") - Ställer in widgetens visningsspråk. Assistenten kommer fortfarande att svara på alla språk som användare skriver på.
  • data-dev: Ställ in på "true" för utvecklingsläge (localhost) - Använd detta när du testar lokalt. Ta bort eller ställ in på "false" för produktion.

Widgeten kommer automatiskt:

  • Hämta konfigurationen från konfigurations-ID:t
  • Storleken på sig själv enligt widgetdimensionerna i konfigurationen
  • Placera den kollapsade knappen baserat på konfigurationsinställningarna
  • Starta öppen eller stängd baserat på konfigurationens start_open-inställning

Anteckningar

  • Widgeten hanterar automatiskt sin egen storlek baserat på dina konfigurationsinställningar
  • Den hopfällda knappens position kan anpassas genom widgetkonfigurationen
  • Widgeten respekterar start_open-inställningen från din konfiguration
  • All stil (färger, typsnitt, mått) styrs genom widgetkonfigurationen
  • Widgeten använder postMessage-kommunikation för responsivt beteende
  • Utvecklingsläge kan aktiveras med data-dev="true" för testning av lokal värd
  • För utbyte av token på serversidan, använd /api/v1/auth/widget-token och håll klienten hemlig endast på din server.
  • Se till att ditt värdursprung (till exempel http://localhost:3000) ingår i OAuth allow_origins när du bäddar in widgeten i en iframe.
← TillbakaNästa: API-referens →