Betten Sie den Conversational AI-Chat auf einer externen Seite im Jitterbit App Builder ein

Übersicht

Dieser Leitfaden erklärt, wie Sie die Conversational AI Chat-Oberfläche auf einer externen Webseite, wie einer kundenorientierten Website oder einer Drittanbieteranwendung, einbetten können. Dieser Ansatz unterscheidet sich von der Chat-Blase und dem Chat-Panel, die beide innerhalb des App Builders selbst angezeigt werden.

Das Einbetten wird als Webkomponente (<jitterbit-chat>) implementiert, die über ein JavaScript-Bündel geladen wird, das von Ihrer App Builder-Instanz bereitgestellt wird. Der eingebettete Chat kann als integrierter anonymer Benutzer ausgeführt werden oder er kann Benutzer mit JWT SSO basierend auf der Sitzung der Hostseite authentifizieren. Diese Seite beschreibt beide Optionen.

Voraussetzungen

Der eingebettete Chat erfordert App Builder 4.63 oder höher. Bevor Sie den Chat auf einer externen Seite einbetten, führen Sie Folgendes aus:

• Verbinden Sie einen KI-Agenten als REST-API-Datenquelle im App Builder.
• Richten Sie einen Conversational AI-Agenten in der IDE mit der Option Ist Aktiv ein.

So betten Sie den Chat auf einer externen Seite ein

Befolgen Sie die folgenden Schritte, um den Chat auf einer externen Seite einzubetten. Die Schritte unterscheiden sich, wenn Sie möchten, dass der eingebettete Chat als anonymer Benutzer ausgeführt wird, oder wenn Sie die JWT SSO-Authentifizierung konfigurieren möchten:

• Schritt 1: Fügen Sie den Einbettungscode hinzu

• Schritt 2: Wählen Sie eine Zugriffsart

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

Schritt 1: Fügen Sie den Einbettungscode hinzu

Um den Chat auf einer externen Seite einzubetten, fügen Sie Folgendes zu Ihrem HTML hinzu:

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

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

Ersetzen Sie den folgenden Platzhalter:

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

Das Attribut agent-ids ist optional. Lassen Sie es leer, um alle verfügbaren Agenten für den Benutzer anzuzeigen, oder geben Sie eine oder mehrere Agenten-IDs als kommagetrennte Liste ein, um den Chat auf bestimmte Agenten zu beschränken.

Schritt 2: Wählen Sie eine Zugriffsart

Der eingebettete Chat unterstützt zwei Zugriffsmodi. Wählen Sie denjenigen, der Ihren Anforderungen entspricht:

Option A: Anonymer Zugriff

Standardmäßig läuft der eingebettete Chat als der integrierte anonymous Benutzer. Sie müssen jedoch anonymen Benutzern erlauben, mit dem Chat zu interagieren. Erstellen Sie eine spezielle Gruppe und gewähren Sie ihr die entsprechenden Berechtigungen, indem Sie die folgenden Schritte ausführen:

1. Klicken Sie im IDE auf Benutzerverwaltung im Runtime-Panel.
2. Wählen Sie die Registerkarte Gruppen und klicken Sie auf + Gruppe.

3. Geben Sie einen Namen (zum Beispiel Anonyme Benutzer) und eine Beschreibung ein und klicken Sie dann auf Speichern.

   

4. Wenn die neue Gruppe im Gruppen-Panel erscheint, klicken Sie auf die Schaltfläche Berechtigungen verwalten.

5. Klicken Sie im Dialogfeld Berechtigungen verwalten auf Erstellen im Berechtigungen-Panel.
6. Wählen Sie im Dialogfeld Berechtigung erstellen im Feld Typ die Option Anwendung aus.

7. Wählen Sie im Dropdown-Menü Anwendung Vinyl - Benutzerdefinierte Agenten aus und klicken Sie auf Speichern.

   

8. Wählen Sie die neue Berechtigung im Berechtigungen-Panel aus. Die damit verbundenen Rollen erscheinen im Rollen-Panel.

9. Suchen Sie die Rolle Agent Chat und klicken Sie auf Gewähren.

10. Schließen Sie den Dialog, um zur Registerkarte Gruppen zurückzukehren. Wählen Sie die neue Gruppe im Gruppen-Panel aus und klicken Sie auf + Mitgliedschaft im Mitgliedschaft-Panel. Wählen Sie den integrierten anonymous Benutzer aus dem Dropdown-Menü Benutzer aus und klicken Sie auf , um zu speichern.

    

Für weitere Informationen zur Verwaltung von Gruppen und Berechtigungen siehe Benutzer- und Gruppenverwaltung.

Fügen Sie als Nächstes eine Rolle hinzu und gewähren Sie die entsprechenden Berechtigungen, indem Sie die folgenden Schritte ausführen:

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

4. Klicken Sie auf Rollen. Der Rollen-Dialog öffnet sich.

   

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

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

8. Überprüfen Sie, ob Lesen, Einfügen, Aktualisieren und Löschen alle ausgewählt sind, und klicken Sie dann auf , um zu speichern.

   

Gewähren Sie schließlich der Gruppe Anonyme Benutzer Zugriff auf die Rolle:

1. Klicken Sie im IDE auf Benutzerverwaltung im Laufzeit-Panel.
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 Berechtigungen-Panel auf Erstellen.
5. Wählen Sie im Dialog Berechtigung erstellen im Feld Typ Datenquelle aus.

6. Wählen Sie im Dropdown-Menü Datenquelle die Datenquelle des KI-Agenten aus und klicken Sie dann auf Speichern.

   

7. Wählen Sie das neue Privileg im Privileges-Panel aus. Die damit verbundenen Rollen erscheinen im Roles-Panel.

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

   

Option B: JWT SSO-Authentifizierung

Um Benutzer von der Host-Seite zu authentifizieren, anstatt anonym zu agieren, konfigurieren Sie die JWT SSO-Authentifizierung. Wenn JWT SSO aktiv ist, authentifiziert der eingebettete Chat den Benutzer, bevor REST-Aufrufe getätigt werden, provisioniert den Benutzer automatisch im App Builder, falls dieser noch nicht existiert, und authentifiziert ihn stillschweigend erneut, wenn die Sitzungscookies ablaufen.

Zuerst konfigurieren Sie die IDE-Einstellungen, indem Sie die folgenden Schritte ausführen:

1. Klicken Sie im IDE im Connect-Panel auf Security Providers. Die Security-Seite öffnet sich.
2. Klicken Sie im Configuration-Panel auf More und wählen Sie Sites. Das Sites-Dialogfeld öffnet sich.
3. Klicken Sie auf + Site.
4. Geben Sie im URL-Feld die Basis-URL Ihrer App Builder-Instanz ein (zum Beispiel https://example.com).
5. Lassen Sie das Kontrollkästchen Redirect unmarkiert.
6. Aktivieren Sie das Kontrollkästchen Allow Cross Origin.

7. Klicken Sie auf Save.

   

Als Nächstes richten Sie einen JWT SSO-Anbieter ein:

1. Klicken Sie im IDE im Connect-Panel auf Security Providers. Die Security-Seite öffnet sich.

2. Klicken Sie im User Authentication-Panel auf + User Authentication. Die Provider-Seite öffnet sich im Erstellungsmodus:

   

3. Konfigurieren Sie im Abschnitt Settings Folgendes:

   • Name: Geben Sie einen Namen für den Anbieter ein.
   • Type: Wählen Sie JWT SSO.
   • Enabled: Aktivieren Sie dieses Kontrollkästchen.
4. Konfigurieren Sie im Abschnitt Tokens Folgendes:
   • Audience: Geben Sie die Basis-URL Ihrer App Builder-Instanz ein (zum Beispiel https://example.com).
   • Issuer: Geben Sie den Ausstellerwert ein, der in den JWT-Generierungseinstellungen der Host-Seite konfiguriert ist (zum Beispiel example.com). Dies muss mit dem iss-Anspruch in den von der Authentifizierungs-Framework der Host-Seite ausgegebenen JWTs übereinstimmen.
5. Wählen Sie im Abschnitt Provisioning die Kontrollkästchen User Provisioning und Supplies Group Membership aus.
6. Klicken Sie auf Save, um den Anbieter zu erstellen.

7. Klicken Sie im Certificates-Panel auf + Certificate (siehe JWT SSO-Sicherheitsanbieter für Details zu den Zertifikatsanforderungen) und konfigurieren Sie Folgendes:

   

   • Verwendung: Wählen Sie Signaturvalidierung.
   • Typ: Wählen Sie X.509-Zertifikat.
   • Format: Wählen Sie PEM.
   • Inhalt: Fügen Sie das PEM-codierte Zertifikat ein, das den RSA-öffentlichen Schlüssel enthält, der verwendet wird, um die von dem Authentifizierungsframework der Hostseite ausgegebenen JWTs zu signieren.
   • Identifier: Geben Sie optional einen Identifier für das Zertifikat ein. Wenn angegeben, erscheint dieser Wert im kid-Parameter der JWT-Header.

   Klicken Sie auf Speichern.

Aktualisieren Sie als Nächstes das Einbettungssnippet. Fügen Sie die Attribute provider und jwt zum <jitterbit-chat>-Element 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>

• {provider-name}: Der Name des im IDE konfigurierten JWT-SSO-Anbieters.
• {JWT token}: Das von dem Authentifizierungsframework der Hostseite ausgegebene JWT-Token.

Wie bei anonymen Benutzern müssen auch JWT-authentifizierte Benutzer autorisiert werden, um mit dem KI-Agenten zu interagieren. Beginnen Sie damit, eine geeignete Rolle hinzuzufügen und ihr die erforderlichen Berechtigungen zu gewähren. Befolgen Sie diese Schritte:

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

4. Klicken Sie auf Rollen. Der Dialog Rollen öffnet sich.

   

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 Datenservers des KI-Agenten (zum Beispiel chat). Wählen Sie keine untergeordneten Tabellen wie chat/references oder chat/ResponseHeaders, die intern von App Builder verwendet werden.

8. Überprüfen Sie, ob Lesen, Einfügen, Aktualisieren und Löschen alle ausgewählt sind, und klicken Sie dann auf , um zu speichern.

   

Gewähren Sie schließlich der Sicherheitsgruppe Zugriff auf die Rolle:

1. Klicken Sie im IDE auf Benutzerverwaltung im Runtime-Panel.
2. Wählen Sie die Registerkarte Gruppen und klicken Sie auf die Gruppe, zu der die JWT-authentifizierten Benutzer gehören (zum Beispiel Benutzer).
3. Klicken Sie auf Berechtigungen verwalten.
4. Klicken Sie im Berechtigungen-Panel auf Erstellen.
5. Wählen Sie im Dialogfeld Berechtigung erstellen im Feld Typ Datenquelle aus.

6. Wählen Sie im Dropdown-Menü Datenquelle die Datenquelle des KI-Agenten aus und klicken Sie dann auf Speichern.

   

7. Wählen Sie die neue Berechtigung im Berechtigungen-Panel aus. Die damit verbundenen Rollen erscheinen im Rollen-Panel.

8. Suchen Sie die oben erstellte Rolle und klicken Sie auf Gewähren.