AI-chatwidgetcode: voeg een supportassistent toe aan elke website
Kopieer één scripttag en zet een AI-chatassistent met live antwoorden op je site. Deze handleiding behandelt de insluitcode, de opties en de controles voordat je live gaat.
Gepubliceerd:
Een AI-chatwidget beantwoordt je bezoekers op de pagina die ze al aan het lezen zijn. Met api14 is de hele integratie één scripttag: je ontwerpt de widget in het dashboard, kopieert de code en plakt die in je HTML. Er is geen SDK om te installeren en geen servercode om te schrijven.
Wat de chatwidget doet
De chatwidget is een klein gespreksvenster dat antwoorden streamt van het model dat je kiest. Hij volgt privé-instructies die jij schrijft en die bezoekers nooit zien, zodat hij kan dienen als supportmedewerker, verkoopassistent of gids voor je documentatie. Antwoorden ondersteunen eenvoudige opmaak (alinea's, lijsten, vet, code en links), een knop Stoppen breekt een lang antwoord af, en het gesprek blijft bewaard terwijl de bezoeker binnen hetzelfde tabblad naar andere pagina's gaat.
De widgetcode
Nadat je een widget hebt opgeslagen in Widgets, toont de editor de insluitcode:
<script src="https://api14.com/widget.js" data-widget="YOUR_WIDGET_ID" async></script>
Zet de tag binnen <body>, op de plek waar de chat moet verschijnen. Twee optionele attributen bepalen waar en hoe hij wordt weergegeven:
| Attribuut | Wat het doet |
|---|---|
data-target | CSS-selector van een element waarin de widget wordt weergegeven, bijvoorbeeld #support. |
data-height | Hoogte van een widget in de pagina, bijvoorbeeld 520px. Voor chat is de standaard 480px. |
Heb je liever een knop in de hoek van het scherm, kies dan in de editor de plaatsing Zwevende knop. De code blijft hetzelfde.
In vier stappen een live chatassistent
- Kies een model. Elk chatmodel uit de catalogus werkt. De keuzelijst toont de prijs van elk model, zodat je kunt beginnen met een snel, goedkoop model en later kunt wisselen zonder je site aan te passen.
- Kies een API-key. Elke widget draait op een van je API-keys. Selecteer een bestaande key of gebruik de laatste optie in de lijst, Nieuwe API-key maken, om er een speciaal voor deze widget te maken. De limieten van de key gelden voor de widget, en de key zelf komt nooit in de browser terecht.
- Schrijf de instructies en teksten. Stel de titel, het welkomstbericht, de plaatshoudertekst en de knoptekst in. Voeg privé-instructies toe die je product en de gewenste toon beschrijven.
- Sta je domeinen toe. Vermeld onder Instellingen, Widget-sites de sites waarop de widget mag draaien. Verzoeken van elke andere site worden geweigerd.
Waarom je pagina er niet door breekt
De widget wordt weergegeven in een geïsoleerde Shadow DOM. Jouw CSS lekt niet in het chatvenster en de widget verandert de stijl van je pagina niet. Hij laadt asynchroon, dus hij houdt de weergave van de rest van je content niet op.
Voordat je live gaat
- Open de voorbeeldweergave in de editor en stel de vragen die je klanten echt stellen. De voorbeeldweergave stuurt echte verzoeken met je niet-opgeslagen instellingen.
- Stel een dagelijkse bestedingslimiet in voor de widget, zodat een drukke dag je niet verrast.
- Controleer of je saldo het verwachte verkeer dekt. Verzoeken van bezoekers worden afgeschreven van je USD-saldo tegen de normale prijs van het model.
Klaar om het te proberen? Ontwerp zonder account een chatwidget op de widgetpagina en lees daarna de volledige referentie in de widgetdocumentatie.