Widgetkod för AI-chatt: lägg till en supportassistent på valfri webbplats
Kopiera en enda script-tagg och få en strömmande AI-chattassistent på din webbplats. Guiden går igenom inbäddningskoden, dess alternativ och vad du bör kontrollera före lansering.
Publicerad:
En AI-chattwidget svarar dina besökare på sidan de redan läser. Med api14 består hela integrationen av en enda script-tagg: du utformar widgeten i kontrollpanelen, kopierar koden och klistrar in den i din HTML. Du behöver inte installera något SDK eller skriva någon serverkod.
Vad chattwidgeten gör
Chattwidgeten är ett litet konversationsfönster som strömmar svar från den modell du väljer. Den följer privata instruktioner som du skriver och som besökarna aldrig ser, så den kan fungera som supportagent, säljassistent eller guide till din dokumentation. Svaren stöder enkel formatering (stycken, listor, fetstil, kod och länkar), knappen Stoppa avbryter ett långt svar och konversationen finns kvar när besökaren byter sida i samma flik.
Widgetkoden
När du har sparat en widget under Widgets visar redigeraren dess inbäddningskod:
<script src="https://api14.com/widget.js" data-widget="YOUR_WIDGET_ID" async></script>
Placera taggen inuti <body> där chatten ska visas. Två valfria attribut styr var och hur den visas:
| Attribut | Vad det gör |
|---|---|
data-target | CSS-selektor för ett element som widgeten ska visas i, till exempel #support. |
data-height | Höjden på en widget i sidan, till exempel 520px. Chatten har 480px som standard. |
Vill du hellre ha en knapp i skärmens hörn väljer du placeringen Flytande knapp i redigeraren. Koden förblir densamma.
Fyra steg till en chattassistent i drift
- Välj en modell. Alla chattmodeller i katalogen fungerar. Väljaren visar varje modells pris, så du kan börja med en snabb och billig modell och byta senare utan att röra din webbplats.
- Välj en API-nyckel. Varje widget körs under en av dina API-nycklar. Välj en befintlig nyckel eller använd det sista alternativet i listan, Skapa ny API-nyckel, för att skapa en nyckel bara för den här widgeten. Nyckelns gränser gäller för widgeten, och själva nyckeln når aldrig webbläsaren.
- Skriv instruktionerna och texterna. Ange rubrik, välkomstmeddelande, platshållartext och knapptext. Lägg till privata instruktioner som beskriver din produkt och den ton du vill ha.
- Tillåt dina domäner. Under Inställningar, Widget-webbplatser listar du webbplatserna där widgeten får köras. Förfrågningar från alla andra webbplatser avvisas.
Därför förstör den inte din sida
Widgeten visas i en isolerad Shadow DOM. Din CSS läcker inte in i chattfönstret och widgeten ändrar inte stilen på din sida. Den laddas asynkront, så den hindrar inte resten av ditt innehåll från att visas.
Innan du går live
- Öppna förhandsvisningen i redigeraren och ställ de frågor som dina kunder faktiskt ställer. Förhandsvisningen kör dina osparade inställningar på riktigt.
- Ange en daglig utgiftsgräns för widgeten så att en intensiv dag inte överraskar dig.
- Kontrollera att ditt saldo räcker för den trafik du räknar med. Besökarnas förfrågningar dras från ditt USD-saldo till modellens ordinarie pris.
Redo att testa? Utforma en chattwidget utan konto på widgetsidan och läs hela referensen i widgetdokumentationen.