Snelstart

Widgetoverzicht

De widget-app is gehost op widget.companin.tech en biedt een gemakkelijke manier om een Customer Support AI Agent in uw website in te sluiten. Om te beginnen, moet u een agent en een OAuth-toepassing maken.

De widget is een lichte, zelfstandige applicatie die draait in een geïsoleerd iframe op uw website. Deze architectuur zorgt ervoor dat de widget niet in conflict komt met uw bestaande CSS of JavaScript, terwijl het uitstekende prestaties en beveiliging behoudt.

1. Maak een agent

Maak eerst een Customer Support AI Agent in uw dashboard:

Uw agent is de AI-hersenen achter de widget. Het verwerkt gebruikersberichten, behoudt de gesprekscontext en genereert intelligente antwoorden. Elke agent kan worden aangepast met specifieke instructies, persoonlijkheidseigenschappen en kennisbases om aan uw gebruiksgeval te voldoen.

1. Ga naar uw dashboard en navigeer naar de "Data Sources"-pagina
2. Klik op de knop "Toevoegen" in de sectie Agents
3. Vul de agentdetails in (naam, beschrijving, toon, enz.)
4. Sla de agent op en noteer de ID

Tip: Geef uw agent duidelijke, specifieke instructies over zijn rol en beperkingen. Bijvoorbeeld: "Je bent een behulpzame klantenserviceagent voor een SaaS-product. Je kunt vragen beantwoorden over functies, prijzen en accountbeheer. Voor technische problemen, leid gebruikers om een supportticket aan te maken."

2. Maak een OAuth-toepassing

Maak een OAuth-toepassing om uw widget te authenticeren:

1. Ga naar de "OAuth"-pagina in uw dashboard
2. Klik op "Toepassing maken"
3. Vul de naam en beschrijving van de toepassing in
4. Kopieer de client_id van de gemaakte toepassing

3. Sluit de widget in via Iframe

De eenvoudigste manier om de widget te integreren is door deze rechtstreeks in te sluiten met een iframe. Deze methode vereist geen JavaScript-initialisatie en werkt direct. Voor meerdere iframes op één pagina, houd elke insluiting beperkt tot zijn eigen container en parameters.

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

Vervang YOUR_WIDGET_KEY door de installatiesleutel van uw widget (de wgt_… waarde — kopieer deze van de Widget-pagina of Install-pagina in het dashboard). 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-widgetloader, die automatische sizing, configuratiebeheer en responsief gedrag biedt.

Scriptintegratie

Voeg de volgende script-tag toe aan uw HTML-pagina:

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

Scriptattributen

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

• data-widget-key: De Widget-ID van uw widget - De enige waarde die de meeste installaties nodig hebben. Het lost uw client, agent en configuratie server-side op, zodat u ze niet afzonderlijk plakt.

De drie onderstaande attributen zijn een geavanceerd alternatief voor data-widget-key - gebruik ze voor multi-instantie-opstellingen waar u een specifieke client, agent of configuratie expliciet moet targeten:

• data-client-id: Uw OAuth-client-ID - Dit authenticates uw toepassing met onze API. Beschouw het als het wachtwoord van uw app.
• data-agent-id: De UUID van uw agent - Dit identificeert welke Klantenservice AI-agent 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: Uniek per-widget instantie-ID - Vereist bij het insluiten van meerdere widgets op dezelfde pagina om botsingen te voorkomen en per-instantie API-targeting mogelijk te maken.
• data-custom-css: Verouderd. Het instellen van dit attribuut logt een consolewaarschuwing en heeft geen effect. Stel custom_css in op uw widgetconfiguratie in het dashboard in plaats daarvan — het wordt geladen vanuit de configuratie en automatisch in het iframe geïnjecteerd.
• data-locale: Taalcode (bijv. "en", "es", "fr") - Stelt de weergavetaal van de widget in. De agent zal nog steeds reageren in elke taal die gebruikers schrijven.
• data-theme: Thememodus - light, dark, of system (volg het apparaat van de bezoeker). Kiest welke kleurenpalet (geconfigureerd in uw dashboard) de widget toont. Laat het weg om uw opgeslagen standaard te gebruiken.
• data-dev: Stel in op "true" voor ontwikkelingsmodus (localhost) - Gebruik dit bij lokaal testen. Verwijder of stel in op "false" voor productie.

De widget zal automatisch:

• De configuratie ophalen van de configuratie-ID
• Zichzelf dimensioneren volgens de widgetafmetingen in de configuratie
• De ingeklapte knop positioneren op basis van de configuratie-instellingen
• Start open of gesloten op basis van de configuratie's start_open instelling

Notities

• De widget beheert automatisch zijn eigen grootte op basis van uw configuratie-instellingen
• De positie van de ingeklapte knop kan worden aangepast via de widgetconfiguratie
• De widget respecteert de start_open instelling van uw configuratie
• Alle styling (kleuren, lettertypen, afmetingen) wordt beheerd via de widgetconfiguratie
• De widget gebruikt postMessage-communicatie voor responsief gedrag
• De ontwikkelingsmodus kan worden ingeschakeld met data-dev="true" voor localhost-testen
• Voor server-side tokenuitwisseling, gebruik /api/v1/auth/widget-token en houd de clientsecret alleen op uw server.
• Zorg ervoor dat uw hostoorsprong (bijvoorbeeld http://localhost:3000) is opgenomen in de toegestane_origins van OAuth bij het insluiten van de widget in een iframe.