Einbetten von IFrame und Apps

Embed a chat agent into web applications or UiPath Apps using iFrame for a seamless, in-app chat experience.

Überblick

Embed your chat-based conversational agent into web applications using iFrame. Use this approach to add conversational agents to third-party applications or to UiPath Apps using the iFrame component.

Beabsichtigte Benutzer: Entwickler und Administrators, die Conversational Agents in benutzerdefinierte Webanwendungen oder UiPath Apps einbetten möchten.

Funktionsverfügbarkeit

Funktionen	Verfügbar
Neuen Chat starten	✅
Chatverlauf	✅
Chat-Sitzung löschen	✅
Benutzerprofil-Einstellungen	✅
Eingabeaufforderungen beim Starten	✅
Dateiuploads	✅
Konversationseingaben*	✅
Bestätigungen von Tool-Aufrufen	✅
Zitate	✅
HTML-Vorschau	✅
Antwort kopieren	✅
Feedback (Daumen)	✅

* Conversation inputs are supported only for Conversational Agents built in Agent Builder.

Voraussetzungen

Um einen Conversational Agent einzubetten, führen Sie die folgenden Einrichtungsschritte aus:

Einrichtung durch Administrator oder Entwickler

1. Veröffentlichen Sie den Conversational Agent in dem gewünschten Orchestrator-Ordner.
2. Rufen Sie die Agent-Versions-ID aus der Instanzverwaltung ab.
3. Erstellen Sie für UiPath Apps ein Apps-Projekt in UiPath Studio.
4. Stellen Sie bei Apps von Drittanbietern sicher, dass die Webanwendung die Einbettung von iFrame unterstützt.

Suchen der Agent-ID

1. Navigieren Sie in der Instanzverwaltung zu Agents > Agents.
2. Wählen Sie für den gewünschten Agent Chat aus.
3. Kopieren Sie die Agent-ID aus der URL. In der URL ist beispielsweise die Agent-ID https://cloud.uipath.com/conversationalagents/agents_/deployed/chat/342061342061.

Benutzeranforderungen

• Authentifizierte Benutzer müssen über ein UiPath-Konto mit Berechtigung verfügen, um auf den Agent zuzugreifen.
• Anonyme Benutzer müssen Zugriff auf die Anwendung oder Oberfläche haben, in der der Agent eingebettet ist.

Einbetten des Agents

URL-Konstruktion

Legen Sie die iFrame-Quelle auf eine URL mit dem folgenden Format fest:

https://cloud.uipath.com/<organization>/<tenant>/autopilotforeveryone_/conversational-agents/?agentId=<agent_id>&mode=<mode>

Hinweis:

Die Organization und der Mandantenname sind auf Groß- und Kleinschreibung beschränkt.

URL-Parameter

Parameter	Erforderlich	Beschreibung
agentId	Ja	Die Release-ID des veröffentlichten Agents
mode	Nein	embedded für eine Erfahrung mit der rechten Schiene, fullscreenfür Vollbildmodus (Standard: fullscreen)
title	Nein	Titel, der im Header angezeigt wird (Standard: Agent-Name)
welcomeTitle	Nein	Titel für Willkommensbildschirm bei der ersten Ausführung
welcomeDescription	Nein	Beschreibung des Willkommensbildschirms bei der ersten Ausführung
suggestions	Nein	Array von vorgeschlagenen Prompts für die erste Ausführung
showHistory	Nein	Bereich „Chatverlauf“ anzeigen/ausblenden (Standard: true)

Beispiel-URLs

Eingebetteter Basismodus

https://cloud.uipath.com/myorg/mytenant/autopilotforeveryone_/conversational-agents/?agentId=12345&mode=embedded

Mit Willkommensnachricht und Vorschlägen

https://cloud.uipath.com/myorg/mytenant/autopilotforeveryone_/conversational-agents/?agentId=12345&mode=embedded&title=HR Assistant&welcomeTitle=Welcome!&welcomeDescription=I can help you with HR questions&suggestions=["What is the PTO policy?","How do I submit expenses?"]

Einbetten in UiPath Apps

Um einen Conversational Agent in UiPath Apps einzubetten, verwenden Sie die iFrame-Komponente.

1. Öffnen Sie Ihre App in UiPath Apps Studio.

2. Fügen Sie Ihrer Seite eine iFrame-Komponente hinzu.

3. Legen Sie die Eigenschaft „Quelle“ auf die konstruierte URL fest.

4. Veröffentlichen Sie die App.

   

Beim Einbetten eines Konversationsagenten in UiPath Apps umgehen Sie das Vorschlagsarray, indem Sie doppelte Anführungszeichen verwenden, wie im folgenden Beispiel gezeigt:

suggestions=[""What is the PTO policy?"",""How do I submit expenses?""]

Dies ist erforderlich, da UiPath Apps den Wert als Zeichenkette validiert.

Einbetten in Anwendungen von Drittanbietern

Sie können einen Konversationsagenten in jede Webanwendung einbetten, die iFrame-Einbettung unterstützt.

HTML-Beispiel

<iframe
  src="https://cloud.uipath.com/myorg/mytenant/autopilotforeveryone_/conversational-agents/?agentId=12345&mode=embedded"
  width="400"
  height="600"
  frameborder="0"
  allow="clipboard-write"
></iframe>

Überlegungen

• Herkunftsübergreifende Richtlinien: Stellen Sie sicher, dass die Inhaltssicherheitsrichtlinie Ihrer Anwendung das Einbetten von uipath.com. zulässt.
• Reaktives Design: Konfigurieren Sie geeignete Werte für Breite und Höhe, um ein ordnungsgemäßes Rendering über Bildschirmgrößen hinweg zu gewährleisten.
• Zugriff auf die Zwischenablage: Fügen Sie ${DNT} ein, allow="clipboard-write"um die Funktion „Kopierantwort“ zu aktivieren.

Chatfunktionen

Die eingebettete Chat-Oberfläche verwendet die Chat-Benutzeroberfläche der Instanzverwaltung und bietet dieselbe Chat-Funktionalität.

Authentifizierungsoptionen

Authentifizierte Benutzer

Für interne Benutzer mit UiPath-Konten:

• Benutzer authentifizieren sich mit der Standardauthentifizierung von UiPath.
• Der Agent hat Zugriff auf die Identitätsinformationen des Benutzers, wie Name und E-Mail-Adresse.
• Der Verbrauch wird anhand der Lizenz des Benutzers nachverfolgt.

Anonyme Benutzer

Für externe oder nicht authentifizierte Szenarien:

• Eine vertrauliche externe Anwendung muss im Administratorportal konfiguriert werden.
• Ein Token-Endpunkt, der von Ihrer Organization gehostet wird, ist erforderlich.
• Es ist keine individuelle Benutzerlizenz erforderlich.
• Der Verbrauch wird vom Unit-Pool des Mandanten abgezogen.

Anweisungen zur Einrichtung finden Sie unter Einrichtung des anonymen Zugriffs.

Weitere Informationen zur Lizenzierung finden Sie unter Lizenzierung.

Warnung:

Anonymer Zugriff ermöglicht es Benutzern ohne UiPath-Konten, mit Ihrem Agent zu interagieren.Wir empfehlen dringend, anonyme Agents hinter Ihrem eigenen Portal oder Ihrer Anmeldung zu schalten, um Missbrauch zu verhindern.

Fehlersuche und ‑behebung

iFrame wird nicht geladen

• Stellen Sie sicher, dass die URL korrekt konstruiert ist.
• Überprüfen Sie, ob die Agent-ID gültig ist.
• Stellen Sie sicher, dass der Agent veröffentlicht und ausgeführt wird.
• Überprüfen Sie die Browserkonsole auf Fehler bei der Inhaltssicherheitsrichtlinie.

Kopieren funktioniert nicht

• Stellen Sie sicher, dass das iFrame ein allow="clipboard-write"Attribut enthält.
• Überprüfen Sie die Browserberechtigungen für den Zugriff auf die Zwischenablage.

Nächste Schritte

• Einrichtung des anonymen Zugriffs: Zugriff für Benutzer ohne UiPath-Konten aktivieren
• Instanzverwaltung: Vollständige Funktionsreferenz und Fehlerbehebung