Web-Chat auf Ihrer Seite einbetten

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

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

Informationen zur Web-Chat-Integration mit einer React-basierten Anwendung finden Sie hier.

So fügen Sie den Web-Chat zu Ihrer Website hinzu:

Suchen Sie auf der Seite "Integrations das Symbol "Webchat" und klicken Sie auf "Öffnen ". Das Fenster Web-Chat öffnen wird geöffnet.
Wählen Sie im Feld Umgebung die Umgebung aus, zu der das Web-Chat-Widget eine Verbindung herstellen 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.

Der Vorschaubereich zeigt, wie der Web-Chat aussehen wird, wenn er in eine Webseite eingebettet ist. Wenn eine Nachricht angezeigt wird, die mit There is an error beginnt, haben Sie Ihrem 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 Script ruft JavaScript-Code auf, der auf einer IBM-Site gehostet wird, und erstellt eine Instanz eines Widgets, das mit dem Assistenten kommuniziert.
Klicken Sie auf das Symbol In Zwischenablage kopieren, um das Einbettungsscript 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>
    
    </body>
</html>
```
Kopieren Sie diesen Code in eine Datei mit der Erweiterung .html und ersetzen Sie das Element script durch das Einbettungsskript, das Sie im vorherigen Schritt kopiert haben.

The identifiers in the embed script (such as integrationID serviceInstanceID) are not considered secret, and are visible to anyone who has access to your website. Weitere Informationen finden Sie unter Sicherheit.
Wenn das System, auf dem Ihre Website gehostet wird, nur über einen eingeschränkten Internetzugang verfügt (z. B. wenn Sie einen Proxy oder eine Firewall verwenden), stellen Sie sicher, dass die URLs, die den Web-Chat hosten, zugänglich sind. Weitere Informationen finden Sie unter Zugriff auf Web-Chat-Hosts.
Öffnen Sie die Webseite (oder lokale Testdatei) in Ihrem Browser. Sie sollten das Symbol auf der Seite sehen:
Klicken Sie auf das Symbol für das Startprogramm, um das Chatfenster zu öffnen.
Fügen Sie dasselbe Einbettungsscript in jede Webseite ein, auf der der 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 hinzu, wo Benutzer in der Lage sein sollen, den Assistenten um Hilfe zu bitten. Achten Sie jedoch darauf, ihn jedoch nur einmal auf jeder Seite hinzuzufügen.

Jetzt können Sie Ihren Assistenten testen. Die Antworten erscheinen so, wie sie dem Kunden angezeigt werden 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 Web-Chat-Entwicklungsübersicht.