Den Conversational-AI-Chat auf einer externen Seite in Jitterbit App Builder einbetten

Übersicht

Diese Anleitung erklärt, wie man die Conversational-AI-Chat-Oberfläche auf einer externen Webseite einbettet, z. B. auf einer kundenorientierten Website oder in einer Drittanwendung. Dieser Ansatz unterscheidet sich von der Chat-Blase und dem Chat-Panel, die beide innerhalb von App Builder angezeigt werden.

Die Einbettung ist als Web-Komponente (<jitterbit-chat>) implementiert, die über ein JavaScript-Bundle geladen wird, das von deiner App-Builder-Instanz bereitgestellt wird. Der eingebettete Chat kann als integrierter anonymer Benutzer ausgeführt oder Benutzer können sich über JWT SSO basierend auf der Sitzung der Host-Seite authentifizieren. Diese Seite beschreibt beide Optionen.

Voraussetzungen

Der eingebettete Chat erfordert App Builder 4.63 oder später. Bevor du den Chat auf einer externen Seite einbettest, führe Folgendes durch:

• Verbinde einen KI-Agenten als REST-API-Datenquelle in App Builder.
• Richte einen Conversational-AI-Agenten in der IDE mit aktivierter Option Is Active ein.

So betten Sie den Chat auf einer externen Seite ein

Führe die folgenden Schritte aus, um den Chat auf einer externen Seite einzubetten. Die Schritte unterscheiden sich, je nachdem, ob der eingebettete Chat als anonymer Benutzer ausgeführt werden soll oder ob du die JWT-SSO-Authentifizierung konfigurieren möchtest:

• Schritt 1: Einbettungs-Snippet hinzufügen

• Schritt 2: Zugriffsmethode wählen

  • Option A: Anonymer Zugriff
  • Option B: JWT-SSO-Authentifizierung

Schritt 1: Einbettungs-Snippet hinzufügen

Um den Chat auf einer externen Seite einzubetten, füge Folgendes zu deinem HTML hinzu:

<script src="{base-url}/js/jitterbit-chat-loader.bundle.js" defer></script>

<jitterbit-chat
    base-url="{base-url}"
    agent-ids="">
</jitterbit-chat>

Ersetze den folgenden Platzhalter:

• {base-url}: Die URL deiner App-Builder-Instanz.

Das Attribut agent-ids ist optional. Lasse es leer, um alle verfügbaren Agenten anzuzeigen, oder gib eine oder mehrere Agent-IDs als kommagetrennte Liste ein, um den Chat auf bestimmte Agenten zu beschränken.

Schritt 2: Zugriffsmethode wählen

Der eingebettete Chat unterstützt zwei Zugriffsmodi. Wähle denjenigen aus, der deinen Anforderungen entspricht:

Option A: Anonymer Zugriff

Standardmäßig wird der eingebettete Chat als integrierter Benutzer anonymous ausgeführt. Du musst jedoch anonymen Benutzern erlauben, mit dem Chat zu interagieren. Erstelle eine dedizierte Gruppe und gewähre ihr die entsprechenden Berechtigungen, indem du diese Schritte befolgst:

1. Klicke in der IDE im Runtime-Bereich auf User Management.
2. Wähle die Registerkarte Groups und klicke auf + Group.

3. Gib einen Namen (z. B. Anonymous Users) und eine Beschreibung ein, und klicke dann auf Save.

   

4. Wenn die neue Gruppe im Bereich Groups angezeigt wird, klicke auf die Schaltfläche Manage Privileges.

5. Klicke im Dialog Manage Privileges im Bereich Privileges auf Create.
6. Wähle im Dialog Create Privilege im Feld Type die Option Application.

7. Wähle in der Dropdown-Liste Application die Option Vinyl - Custom Agents aus, und klicke dann auf Save.

   

8. Wähle die neue Berechtigung im Bereich Privileges aus. Die damit verbundenen Rollen werden im Bereich Roles angezeigt.

9. Suche die Rolle Agent Chat und klicke auf Grant.

10. Beende den Dialog, um zur Registerkarte Groups zurückzukehren. Wenn die neue Gruppe im Bereich Groups ausgewählt ist, klicke im Bereich Membership auf + Membership. Wähle den integrierten Benutzer anonymous aus der Dropdown-Liste User aus, und klicke auf , um zu speichern.

    

Weitere Informationen zur Verwaltung von Gruppen und Berechtigungen finden Sie unter Benutzer- und Gruppenverwaltung.

Fügen Sie danach eine Rolle hinzu und erteilen Sie die relevanten Berechtigungen, indem Sie diese Schritte befolgen:

1. Klicken Sie in der IDE auf Datenserver im Panel Verbinden.
2. Wählen Sie in der Liste der Datenserver den KI-Agent-Datenserver aus.
3. Doppelklicken Sie im rechten Panel auf das Feld mit dem Servernamen, oder klicken Sie auf das Symbol auf dem Feld. Ein Dialog wird geöffnet.

4. Klicken Sie auf Rollen. Der Dialog Rollen wird geöffnet.

   

5. Geben Sie im Panel Rolle unter Rolleninformationen einen Namen für die neue Rolle ein, und klicken Sie dann auf Speichern.

6. Klicken Sie im Panel Berechtigungen auf + Berechtigung.
7. Wählen Sie unter Tabelle den Hauptendpunkt des KI-Agent-Datenservers aus (z. B. chat). Wählen Sie keine Nebentabellen wie chat/references oder chat/ResponseHeaders aus, die von App Builder intern verwendet werden.

8. Vergewissern Sie sich, dass Lesen, Einfügen, Aktualisieren und Löschen alle ausgewählt sind, und klicken Sie dann auf , um zu speichern.

   

Gewähren Sie abschließend der Gruppe Anonyme Benutzer Zugriff auf die Rolle:

1. Klicken Sie in der IDE auf Benutzerverwaltung im Panel Runtime.
2. Wählen Sie die Registerkarte Gruppen und klicken Sie auf die Gruppe Anonyme Benutzer.
3. Klicken Sie auf Berechtigungen verwalten.
4. Klicken Sie im Panel Berechtigungen auf Erstellen.
5. Wählen Sie im Dialog Berechtigung erstellen im Feld Typ die Option Datenquelle aus.

6. Wählen Sie in der Dropdown-Liste Datenquelle die KI-Agent-Datenquelle aus, und klicken Sie dann auf Speichern.

   

7. Wählen Sie die neue Berechtigung im Panel Berechtigungen aus. Die damit verknüpften Rollen werden im Panel Rollen angezeigt.

8. Suchen Sie die oben erstellte Rolle und klicken Sie auf Erteilen.

   

Option B: JWT-SSO-Authentifizierung

Um Benutzer von der Host-Seite aus zu authentifizieren, anstatt als Anonym zu laufen, konfigurieren Sie die JWT-SSO-Authentifizierung. Wenn JWT SSO aktiv ist, authentifiziert der eingebettete Chat den Benutzer, bevor REST-Aufrufe vorgenommen werden, stellt den Benutzer automatisch in App Builder bereit, falls dieser noch nicht vorhanden ist, und authentifiziert sich automatisch erneut, wenn Sitzungs-Cookies ablaufen.

Konfigurieren Sie zunächst die IDE-Einstellungen, indem Sie diese Schritte befolgen:

1. Klicken Sie in der IDE auf Sicherheitsanbieter im Panel Verbinden. Die Seite Sicherheit wird geöffnet.
2. Klicken Sie im Panel Konfiguration auf Mehr und wählen Sie Websites aus. Der Dialog Websites wird geöffnet.
3. Klicken Sie auf + Website.
4. Geben Sie im Feld URL die Basis-URL Ihrer App Builder-Instanz ein (z. B. https://example.com).
5. Lassen Sie das Kontrollkästchen Umleitung deaktiviert.
6. Aktivieren Sie das Kontrollkästchen Allow Cross Origin.

7. Klicken Sie auf Speichern.

   

Richten Sie danach einen JWT-SSO-Anbieter ein:

1. Klicken Sie in der IDE auf Sicherheitsanbieter im Panel Verbinden. Die Seite Sicherheit wird geöffnet.

2. Klicken Sie auf + Sicherheitsanbieter. Die Seite Anbieter wird im Erstellungsmodus geöffnet:

   

3. Konfigurieren Sie im Abschnitt Einstellungen Folgendes:

   • Name: Geben Sie einen Namen für den Anbieter ein.
   • Typ: Wählen Sie JWT SSO aus.
   • Aktiviert: Aktivieren Sie dieses Kontrollkästchen.
4. Konfigurieren Sie im Abschnitt Tokens Folgendes:
   • Audience: Geben Sie die Basis-URL Ihrer App Builder-Instanz ein (z. B. https://example.com).
   • Issuer: Geben Sie den Issuer-Wert ein, der in den JWT-Generierungseinstellungen der Host-Seite konfiguriert ist (z. B. example.com). Dies muss mit dem iss-Anspruch in den JWTs übereinstimmen, die vom Authentifizierungs-Framework der Host-Seite ausgegeben werden.
5. Aktivieren Sie im Abschnitt Bereitstellung die Kontrollkästchen Benutzerbereitstellung und Gruppenmitgliedschaft bereitstellen.
6. Klicken Sie auf Speichern, um den Anbieter zu erstellen.
7. Klicken Sie im Panel Zertifikate auf + Zertifikat (siehe JWT-SSO-Sicherheitsanbieter für Details zu Zertifikatsanforderungen) und konfigurieren Sie Folgendes:

• Verwendung: Wählen Sie Signature Validation.
• Typ: Wählen Sie X.509 Certificate.
• Format: Wählen Sie PEM.
• Inhalt: Fügen Sie das PEM-codierte Zertifikat ein, das den RSA-öffentlichen Schlüssel enthält, der zum Signieren der vom Authentifizierungsframework der Host-Seite ausgegebenen JWTs verwendet wird.
• Identifier: Geben Sie optional einen Identifier für das Zertifikat ein. Falls angegeben, wird dieser Wert im kid-Parameter von JWT-Headern angezeigt.

Klicken Sie auf Save.

Aktualisieren Sie anschließend das Embed-Snippet. Fügen Sie die Attribute provider und jwt zum Element <jitterbit-chat> hinzu:

<script src="{base-url}/js/jitterbit-chat-loader.bundle.js" defer></script>

<jitterbit-chat
    base-url="{base-url}"
    agent-ids=""
    provider="{provider-name}"
    jwt="{JWT token}">
</jitterbit-chat>

Ersetzen Sie die folgenden Platzhalter:

• {provider-name}: Der Name des im IDE konfigurierten JWT-SSO-Providers.
• {JWT token}: Das vom Authentifizierungsframework der Host-Seite ausgegebene JWT-Token.

Wie bei anonymen Benutzern müssen JWT-authentifizierte Benutzer berechtigt sein, mit dem AI-Agent zu interagieren. Gehen Sie dazu wie folgt vor:

1. Klicken Sie im IDE auf Data Servers im Panel Connect.
2. Wählen Sie in der Liste der Datenserver den AI-Agent-Datenserver aus.
3. Doppelklicken Sie im rechten Panel auf das Feld mit dem Servernamen, oder klicken Sie auf das Symbol . Ein Dialog wird geöffnet.

4. Klicken Sie auf Roles. Der Dialog Roles wird geöffnet.

   

5. Geben Sie im Panel Role unter Role Information einen Name für die neue Rolle ein, und klicken Sie auf Save.

6. Klicken Sie im Panel Permissions auf + Permission.
7. Wählen Sie unter Table den Hauptendpoint des AI-Agent-Datenservers aus (z. B. chat). Wählen Sie keine untergeordneten Tabellen wie chat/references oder chat/ResponseHeaders aus, da diese intern von App Builder verwendet werden.

8. Stellen Sie sicher, dass Read, Insert, Update und Delete alle ausgewählt sind, und klicken Sie auf , um zu speichern.

   

Gewähren Sie abschließend der Sicherheitsgruppe Zugriff auf die Rolle:

1. Klicken Sie im IDE auf User Management im Panel Runtime.
2. Wählen Sie die Registerkarte Groups und klicken Sie auf die Gruppe, der JWT-authentifizierte Benutzer angehören (z. B. Users).
3. Klicken Sie auf Manage Privileges.
4. Klicken Sie im Panel Privileges auf Create.
5. Wählen Sie im Dialog Create Privilege im Feld Type die Option Data Source.

6. Wählen Sie in der Dropdown-Liste Data Source die AI-Agent-Datenquelle aus, und klicken Sie auf Save.

   

7. Wählen Sie das neue Privilege im Panel Privileges. Die damit verknüpften Rollen werden im Panel Roles angezeigt.

8. Suchen Sie die oben erstellte Rolle und klicken Sie auf Grant.