Um einen Agentkit-Chatbot einzubetten, öffnen Sie die Seite Channels → Website embed Ihres Agenten, aktivieren Sie Chat widget und kopieren Sie den vollständigen generierten Code. Fügen Sie beide Script-Tags in einen seitenweiten Footer oder ein Seitentemplate ein, veröffentlichen Sie die Seite, laden Sie dann die öffentliche Seite und senden Sie eine Testnachricht. Der generierte Code enthält bereits Ihre Agent-ID und die konfigurierte Widget-URL. Ersetzen Sie ihn nicht durch ein Snippet, das Sie aus einem Artikel kopiert haben.
Wenn der Chat innerhalb eines Seitenabschnitts erscheinen soll, aktivieren Sie stattdessen den Channel Iframe und kopieren Sie dessen generierten iframe-Code. Iframe und schwebendes Widget sind getrennte Channels. Prüfen Sie daher den Schalter für den Channel, den Sie verwenden.
Wählen Sie, wo der Chat erscheinen soll
| Ziel | Verwenden | Wo Sie den Code finden |
|---|---|---|
| Eine schwebende Chat-Blase auf der gesamten Website | Chat widget | Channels → Website embed → Chat widget |
| Ein Chat-Panel innerhalb einer Support- oder Kontaktseite | Iframe | Channels → Website embed → Iframe |
| Eine schwebende Blase in einer React- oder Next.js-App | Chat widget | Das generierte Script im Layout oder HTML-Template der App verwenden |
| Eine seitenweite Blase in WordPress | Chat widget | Beide generierten Tags in ein Footer-Code-Feld einfügen |
Eine React-App benötigt für diese Installation kein separates Agentkit-React-Paket. Ein Platzierungsbeispiel für React oder Next.js finden Sie im React-Integrationsleitfaden. Der iframe-Leitfaden zeigt, wie Sie ein eingebettetes Chat-Panel dimensionieren.
Das schwebende Widget installieren
- Erstellen Sie einen Agenten, fügen Sie eine Quelle hinzu, deren Antworten Sie überprüfen können, und stellen Sie im Playground einige Fragen. Wenn Sie ganz neu beginnen, erstellen Sie ein Agentkit-Konto.
- Öffnen Sie die Seite Channels → Website embed des Agenten. Wählen Sie Chat widget und aktivieren Sie diesen Channel.
- Kopieren Sie den dort angezeigten vollständigen Code. Er enthält ein kleines Bootstrap-Script, gefolgt vom asynchronen Widget-Script. Behalten Sie beide Tags und ihre generierten
data-chatbot- undsrc-Werte zusammen. - Fügen Sie den Code in den gemeinsamen Footer oder das HTML-Template der Website ein, vor dem schließenden
</body>-Tag. Fügen Sie ihn einmal pro Seite ein. Wenn das Widget nur auf einer Seite erscheinen soll, verwenden Sie stattdessen den Codebereich dieser Seite. - Veröffentlichen Sie die Website. Öffnen Sie die öffentliche URL in einem neuen Browserfenster, klicken Sie auf die Blase und senden Sie eine Frage, deren Antwort Sie mit einer freigegebenen Quelle abgleichen können.
Die Widget-URL stammt aus der Hosting-Konfiguration von Agentkit. Kopieren Sie deshalb den aktuellen Code unter Website embed. Der JavaScript-Widget-Leitfaden enthält die aktuellen Einrichtungsschritte, und der Embed-SDK-Leitfaden erklärt, was das Bootstrap-Script tut.
React und Next.js
Fügen Sie das Script in das HTML-Template oder ein gemeinsames Layout der App ein, damit es auf den Seiten geladen wird, auf denen die Blase erscheinen soll. Behalten Sie auf jeder gerenderten Seite genau eine Kopie des Widgets. Der React-Integrationsleitfaden behandelt die Platzierung im Layout für React und Next.js. Kopieren Sie die aktuelle URL und Agent-ID aus Channels → Website embed; eine Paketinstallation ist nicht Teil dieser Einrichtung.
WordPress
Für eine seitenweite Installation fügen Sie beide generierten Script-Tags in das Feld Footer im Header-&-Footer-Bildschirm von WPCode ein. Speichern Sie, leeren Sie den Website-Cache und prüfen Sie dann eine öffentliche Seite. WordPress kann Scripts aus einem Custom-HTML-Block entfernen, wenn Ihr Konto keine Berechtigung hat, sie zu veröffentlichen. Prüfen Sie daher den gerenderten Seitenquelltext, wenn die Blase fehlt. Folgen Sie dem WordPress-Installationsleitfaden für den genauen Menüpfad und die Prüfschritte.
Den Chat innerhalb einer Seite einbetten
Wählen Sie auf derselben Website-embed-Seite Iframe, aktivieren Sie den Channel und kopieren Sie den generierten iframe. Fügen Sie ihn dort ein, wo der eingebettete Chat erscheinen soll. Seine URL verweist auf die gehostete iframe-Seite Ihres Agenten. Das eingebettete Panel bleibt in diesem Seitenabschnitt; es fügt dem Rest der Website keine schwebende Blase hinzu. Geben Sie dem iframe in Ihrem Layout genügend Höhe, öffnen Sie mit Visit die gehostete Chatseite als Vorschau und testen Sie danach den iframe auf Ihrer veröffentlichten Seite. Der iframe stellt das window.agentkit-SDK der übergeordneten Seite nicht bereit. Verwenden Sie das Script-Widget, wenn Sie diese Browserbefehle benötigen. Siehe die iframe-Anleitung.
Das Ergebnis vor dem Start prüfen
Öffnen Sie die veröffentlichte Seite in einem neuen Browserfenster und notieren Sie vier Ergebnisse:
- Erscheint die Blase oder das eingebettete Panel an der erwarteten Stelle?
- Öffnet es sich und nimmt es eine Nachricht an?
- Stimmt die Antwort mit der Quelle überein, die Sie für den Test verwendet haben?
- Erreicht ein Besucher weiterhin Ihren normalen Kontaktweg, wenn der Agent nicht antworten kann?
Wenn nichts erscheint, prüfen Sie zuerst, ob der Channel aktiviert ist, und untersuchen Sie den gerenderten Seitenquelltext auf beide generierten Widget-Tags oder den iframe. Prüfen Sie, ob die Script-URL absolut ist und im Netzwerk-Panel des Browsers geladen wird. Ein Content-Editor oder Cache kann den Code entfernt oder verzögert haben. Wenn die Oberfläche erscheint, aber eine Nachricht fehlschlägt, prüfen Sie die Einstellungen des Agenten, die erlaubten Domains und den Status der Quellen. Der Leitfaden zu Domain-Beschränkungen erklärt, wie sich eine Liste erlaubter Domains auf Einbettungen auswirkt.
Halten Sie die Testfrage und die beobachtete Antwort in Ihren Launch-Notizen fest. Die Installation eines Widgets beweist, dass es lädt; sie beweist nicht, dass jede Antwort korrekt ist. Prüfen Sie betroffene Fragen erneut, nachdem Sie Quellen oder Einstellungen geändert haben.
