KI-Chat-Widget-Code: ein Support-Assistent für jede Website
Ein Script-Tag kopieren und schon läuft ein streamender KI-Chat-Assistent auf Ihrer Website. Diese Anleitung erklärt den Einbettungscode, seine Optionen und die Prüfungen vor dem Livegang.
Veröffentlicht:
Ein KI-Chat-Widget beantwortet Fragen Ihrer Besucher genau auf der Seite, die sie gerade lesen. Mit api14 besteht die gesamte Integration aus einem einzigen Script-Tag: Sie gestalten das Widget im Dashboard, kopieren den Code und fügen ihn in Ihr HTML ein. Es gibt kein SDK zu installieren und keinen Servercode zu schreiben.
Was das Chat-Widget kann
Das Chat-Widget ist ein kleines Gesprächsfenster, das Antworten des von Ihnen gewählten Modells streamt. Es folgt privaten Anweisungen, die Sie schreiben und die Besucher nie sehen. So kann es als Support-Mitarbeiter, Vertriebsassistent oder Wegweiser durch Ihre Dokumentation dienen. Antworten unterstützen einfache Formatierung (Absätze, Listen, Fettdruck, Code und Links), eine Stopp-Schaltfläche beendet eine lange Antwort, und das Gespräch bleibt erhalten, während der Besucher im selben Tab zwischen Seiten wechselt.
Der Widget-Code
Nachdem Sie ein Widget unter Widgets gespeichert haben, zeigt der Editor seinen Einbettungscode:
<script src="https://api14.com/widget.js" data-widget="YOUR_WIDGET_ID" async></script>
Setzen Sie das Tag innerhalb von <body> dort ein, wo der Chat erscheinen soll. Zwei optionale Attribute steuern, wo und wie er dargestellt wird:
| Attribut | Funktion |
|---|---|
data-target | CSS-Selektor eines Elements, in das gerendert wird, zum Beispiel #support. |
data-height | Höhe eines eingebetteten Widgets, zum Beispiel 520px. Der Chat ist standardmäßig 480px hoch. |
Wenn Sie lieber eine Startschaltfläche in der Bildschirmecke möchten, wählen Sie im Editor die Platzierung Schwebende Schaltfläche. Der Code bleibt derselbe.
In vier Schritten zum Live-Chat-Assistenten
- Modell wählen. Jedes Chat-Modell aus dem Katalog funktioniert. Die Auswahl zeigt den Preis jedes Modells, sodass Sie mit einem schnellen, günstigen Modell starten und später wechseln können, ohne Ihre Website anzufassen.
- API-Schlüssel wählen. Jedes Widget läuft unter einem Ihrer API-Schlüssel. Wählen Sie einen vorhandenen Schlüssel oder nutzen Sie die letzte Option der Liste, Neuen API-Schlüssel erstellen, um einen eigenen Schlüssel nur für dieses Widget anzulegen. Die Limits des Schlüssels gelten für das Widget, und der Schlüssel selbst gelangt nie in den Browser.
- Anweisungen und Texte schreiben. Legen Sie Titel, Begrüßung, Platzhalter im Eingabefeld und Beschriftung der Schaltfläche fest. Ergänzen Sie private Anweisungen, die Ihr Produkt und den gewünschten Ton beschreiben.
- Domains freigeben. Tragen Sie unter Einstellungen, Widget-Websites die Websites ein, auf denen das Widget laufen darf. Anfragen von allen anderen Websites werden abgelehnt.
Warum Ihre Seite dabei intakt bleibt
Das Widget wird in einem isolierten Shadow DOM dargestellt. Ihr CSS wirkt nicht in das Chatfenster hinein, und das Widget verändert nicht das Aussehen Ihrer Seite. Es lädt asynchron und blockiert daher nicht das Rendern Ihrer übrigen Inhalte.
Vor dem Livegang
- Öffnen Sie die Vorschau im Editor und stellen Sie die Fragen, die Ihre Kunden tatsächlich stellen. Die Vorschau sendet echte Anfragen mit Ihren noch nicht gespeicherten Einstellungen.
- Legen Sie ein tägliches Ausgabenlimit für das Widget fest, damit Sie ein Tag mit viel Andrang nicht überrascht.
- Prüfen Sie, ob Ihr Guthaben den erwarteten Traffic abdeckt. Besucheranfragen werden Ihrem USD-Guthaben zum normalen Preis des Modells belastet.
Bereit zum Ausprobieren? Gestalten Sie ein Chat-Widget ohne Konto auf der Widgets-Seite und lesen Sie anschließend die vollständige Referenz in der Widget-Dokumentation.