Web-Chat auf Ihrer Seite einbetten

Um das Webchat-Widget zu Ihrer Website hinzuzufügen, müssen Sie ein generiertes Skript-Element in Ihren HTML-Quelltext einbetten.

Die Web-Chat-Integration ist automatisch für jeden KI-Assistenten enthalten und wird für jede Umgebung separat konfiguriert.

Für die Webchat-Integration mit einer React-basierten Anwendung, siehe die alternativen Möglichkeiten hier.

So fügen Sie den Webchat zu Ihrer Website hinzu:

Suchen Sie auf der Seite " Integrationen die Kachel Web-Chat und klicken Sie auf Öffnen. Das Fenster Web-Chat öffnen wird geöffnet.
Wählen Sie im Feld Umgebung die Umgebung aus, mit der sich das Webchat-Widget verbinden soll. Klicken Sie auf Bestätigen.

Die Seite Web-Chat wird geöffnet und zeigt die Einstellungen für die Web-Chat-Integration in der ausgewählten Umgebung an.

Das Vorschaufenster zeigt, wie der Webchat aussehen wird, wenn er in eine Webseite eingebettet ist. Wenn Sie eine Meldung sehen, die mit " There is an error beginnt, haben Sie Ihrem KI-Assistenten wahrscheinlich noch keine Aktionen hinzugefügt. Nachdem Sie eine Aktion hinzugefügt haben, können Sie den Dialog im Vorschaubereich testen.
Klicken Sie auf die Registerkarte Einbetten.

Ein Code-Snippet wird basierend auf der Web-Chat-Konfiguration generiert. Sie (oder ein Webentwickler) fügen dieses Code-Snippet zu der Webseite hinzu, auf der der Web-Chat angezeigt werden soll.

Dieses Code-Snippet enthält ein HTML-Element script. Das Skript ruft JavaScript auf, der auf einer IBM gehostet wird, und erstellt eine Instanz eines Widgets, das mit dem KI-Assistenten kommuniziert.
Klicken Sie auf das Symbol " In die Zwischenablage kopieren, um das eingebettete Skript in die Zwischenablage zu kopieren.
Bearbeiten Sie die HTML-Quelle für die Webseite, auf der das Web-Chat-Widget angezeigt werden soll. Fügen Sie das Code-Snippet in die Seite ein. Fügen Sie den Code so nah wie möglich am schließenden </body>-Tag ein, um sicherzustellen, dass Ihre Seite schneller wiedergegeben wird.

Ändern Sie nicht die Werte der Eigenschaft integrationID oder region im generierten Einbettungsscript.

Wenn Sie den Web-Chat noch nicht zu einer Live-Website hinzuzufügen möchten, können Sie ihn schnell mithilfe einer lokalen HTML-Datei testen. Verwenden Sie diesen HTML-Code als Quelle für eine Testseite:
```
<html>
<head></head>
<body>
    <title>My Test Page</title>
    <p>The body of my page.</p>
    &lt;!-- copied script elements --&gt;
    </body>
</html>
```
Kopieren Sie diesen Code in eine Datei mit der Erweiterung " .html, und ersetzen Sie das Element " script durch das im vorherigen Schritt kopierte Einbettungsskript.

Die Bezeichner im Einbettungsskript (z. B. ' integrationID ' serviceInstanceID) werden nicht als geheim betrachtet und sind für jeden sichtbar, der Zugang zu Ihrer Website hat. Weitere Informationen finden Sie unter Sicherheit.
Wenn das System, auf dem Ihre Website gehostet wird, nur einen eingeschränkten Internetzugang hat (z. B. wenn Sie einen Proxy oder eine Firewall verwenden), stellen Sie sicher, dass die URLs, unter denen der Webchat gehostet wird, zugänglich sind. Weitere Informationen finden Sie unter Zugang zu Webchat-Hosts.
Öffnen Sie die Webseite (oder lokale Testdatei) in Ihrem Browser. Auf der Seite sollte das Startsymbol angezeigt werden.
Klicken Sie auf das Symbol für das Startprogramm, um das Chatfenster zu öffnen.
Fügen Sie das gleiche Einbettungsskript in jede Webseite ein, auf der der KI-Assistent für Ihre Kunden verfügbar sein soll.

Sie können denselben Script-Tag auf so vielen Seiten Ihrer Website einfügen, wie Sie möchten. Fügen Sie ihn überall dort ein, wo Benutzer Ihren KI-Assistenten um Hilfe bitten können sollen. Achten Sie jedoch darauf, ihn jedoch nur einmal auf jeder Seite hinzuzufügen.

Sie können Ihren KI-Assistenten jetzt testen und seine Reaktionen so sehen, wie es Ihre Kunden tun würden.

Bevor Sie den Web-Chat in einer Produktionsumgebung bereitstellen, möchten Sie ihn jedoch wahrscheinlich für Ihre Website und die Bedürfnisse Ihrer Kunden anpassen. Weitere Informationen finden Sie unter Überblick über die Entwicklung von Webchats.