Snelstart

Embed de widget en verkrijg een widget token van de server.

De widget-app wordt gehost op widget.companin.tech en biedt een eenvoudige manier om een AI-assistent in te sluiten in uw website. Om te beginnen, moet u een assistent en een OAuth-toepassing maken.

De widget is een lichtgewicht, op zichzelf staande applicatie die in een geïsoleerd iframe op uw website draait. Deze architectuur zorgt ervoor dat de widget niet conflicteert met uw bestaande CSS of JavaScript, terwijl uitstekende prestaties en beveiliging behouden blijven.

⚡ Snelle implementatie

Bij de meeste ontwikkelaars is de widget binnen 10 minuten actief op hun site. Het installatieproces omvat slechts drie stappen: het aanmaken van inloggegevens, het configureren van de weergave en het toevoegen van een enkele scripttag aan uw HTML.

1. Een Assistent Maken

Maak eerst een AI-assistent in uw dashboard:

Je assistent is het AI-brein achter de widget. Het verwerkt gebruikersberichten, onderhoudt de gesprekscontext en genereert intelligente reacties. Elke assistent kan worden aangepast met specifieke instructies, persoonlijkheidskenmerken en kennisbanken, zodat deze bij uw gebruiksscenario passen.

Ga naar uw dashboard en navigeer naar de "Data Sources"-pagina
Klik de "Add"-knop in de Assistants-sectie
Vul de assistentdetails in (naam, beschrijving, toon, etc.)
Sla de assistent op en noteer de ID

Aanwijzing: Geef uw assistent duidelijke, specifieke instructies over zijn rol en beperkingen. Bijvoorbeeld: "Je bent een behulpzame klantondersteuningsassistent voor een SaaS-product. Je kunt vragen beantwoorden over functies, prijzen en accountbeheer. Voor technische problemen kun je gebruikers vragen een ondersteuningsticket aan te maken."

2. Een OAuth-Toepassing Maken

Maak een OAuth-toepassing om uw widget te authenticeren:

Ga naar de "OAuth"-pagina in uw dashboard
Klik "Create Application"
Vul de toepassingsnaam en beschrijving in
Kopieer de client_id uit de gemaakte toepassing

3. De Widget Insluiten via Iframe

De eenvoudigste manier om de widget te integreren is door deze direct via een iframe in te sluiten. Deze methode vereist geen JavaScript-initialisatie en werkt direct. Gebruik je meerdere iframes op één pagina, houd elke integratie dan gescheiden met een eigen container en parameters.

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

Vervang YOUR_CLIENT_ID en YOUR_ASSISTANT_ID door uw werkelijke waarden. De locale-parameter kan worden ingesteld om overeen te komen met de taal van uw site.

Geavanceerd: JavaScript Initialisatie

De aanbevolen integratiemethode is het gebruik van onze JavaScript-widgetlader, die automatische grootte, configuratiebeheer en responsief gedrag biedt.

Scriptintegratie

Voeg de volgende scripttag toe aan uw HTML-pagina:

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

Scriptkenmerken

Elk attribuut dient een specifiek doel bij het configureren van uw widget:

data-client-id: uw OAuth-client-ID: hiermee wordt uw applicatie geverifieerd met onze API. Zie het als het wachtwoord van uw app.
data-assistant-id: De UUID van uw assistent - Dit identificeert welke Customer Support AI Assistant de gesprekken afhandelt.
data-config-id: De UUID van uw widgetconfiguratie - Dit bepaalt hoe uw widget eruitziet en zich gedraagt (kleuren, grootte, positie, enz.).
data-instance-id: Unieke instantie-ID per widget - Vereist bij het insluiten van meerdere widgets op dezelfde pagina om botsingen te voorkomen en API-targeting per exemplaar in te schakelen.
data-custom-css: (optioneel) Inline CSS-regels die in de <head> van het iframe worden geïnjecteerd voordat de app wordt weergegeven. Gebruik dit om stijlen te overschrijven zonder uw configuratie te wijzigen. URL-codering wordt automatisch afgehandeld.
data-locale: Taalcode (bijvoorbeeld "en", "es", "fr") - Stelt de weergavetaal van de widget in. De assistent reageert nog steeds in elke taal waarin gebruikers schrijven.
data-dev: Stel in op "true" voor de ontwikkelingsmodus (localhost) - Gebruik dit bij lokaal testen. Verwijder of stel deze in op 'false' voor productie.

De widget zal automatisch:

Haal de configuratie op van de configuratie-ID
Grootte zelf volgens de widgetafmetingen in de configuratie
Plaats de samengevouwen knop op basis van de configuratie-instellingen
Begin open of gesloten op basis van de start_open instelling van de configuratie

Opmerkingen

De widget beheert automatisch zijn eigen afmetingen op basis van uw configuratie-instellingen
De samengevouwen knoppositie kan worden aangepast via de widgetconfiguratie
De widget respecteert de start_open instelling uit uw configuratie
Alle styling (kleuren, lettertypen, afmetingen) wordt beheerd via de widgetconfiguratie
De widget maakt gebruik van postMessage-communicatie voor responsief gedrag
De ontwikkelingsmodus kan worden ingeschakeld met data-dev="true" voor localhost-testen
Voor tokenuitwisseling op de server gebruikt u /api/v1/auth/widget-token en houdt u de client alleen op uw server geheim.
Zorg ervoor dat uw hostoorsprong (bijvoorbeeld http://localhost:3000)) is opgenomen in OAuth allow_origins wanneer u de widget in een iframe insluit.

← Terug Volgende: API-referentie →