Zur Navigation springen
BereitstellenWeb

Widget-Anpassung

Erfahren Sie, wie Sie das Erscheinungsbild des Widgets an Ihre Marke anpassen und das Verhalten des Agenten über HTML personalisieren.

Widgets ermöglichen die sofortige Integration von ElevenAgents in jede Website. Sie können Ihr Widget entweder über die Benutzeroberfläche oder über unsere typsicheren ElevenAgents SDKs anpassen, um Styling und Verhalten vollständig zu steuern. Die SDK-Überschreibungen haben Vorrang vor Anpassungen über die Benutzeroberfläche. Unser Widget ist multimodal und kann sowohl Text als auch Audio verarbeiten.

Sie können die Widget-Konfiguration und den teilbaren Link eines Agenten auch über Claude oder einen anderen MCP-Client über den gehosteten MCP-Server abrufen.

Modalitätskonfiguration

Das Widget unterstützt flexible Eingabemodi für Ihren Anwendungsfall. Konfigurieren Sie diese Optionen im Dashboard unter Kanäle → Widget → Oberfläche.

Multimodalität wird in unseren Client-SDKs vollständig unterstützt. Weitere Informationen finden Sie hier.

Widget-Oberflächenoptionen

Verfügbare Modi:

  • Nur Sprache (Standard): Nutzer interagieren ausschließlich per Sprache.
  • Sprache + Text: Nutzer können während Gesprächen zwischen Sprach- und Texteingabe wechseln.
  • Chat-Modus: Gespräche beginnen im Chat-Modus (nur Text) ohne Sprachfunktionen, wenn sie mit einer Textnachricht gestartet werden.

Weitere Informationen zur Verwendung des Chat-Modus (nur Text) über unsere SDKs finden Sie in unserem Leitfaden zum Chat-Modus.

Das Widget verwendet standardmäßig den Modus „Nur Sprache“. Aktivieren Sie den Schalter für die Texteingabe, um multimodale Interaktionen zu ermöglichen, oder aktivieren Sie die Unterstützung für den Nur-Text-Modus für rein textbasierte Gespräche, die per Text gestartet werden.

Widget einbetten

Widgets erfordern derzeit öffentliche Agenten mit deaktivierter Authentifizierung. Stellen Sie sicher, dass diese Option im Tab Erweitert Ihrer Agenteneinstellungen deaktiviert ist.

Fügen Sie dieses Code-Snippet zum <body>-Bereich Ihrer Website hinzu. Platzieren Sie es für eine websiteweite Verfügbarkeit in Ihrer Hauptdatei index.html:

Widget-Einbettungscode
<elevenlabs-convai agent-id="<replace-with-agent_7101k5zvyjhmfg983brhmhkd98n6>"></elevenlabs-convai>
<script
  src="https://unpkg.com/@elevenlabs/convai-widget-embed"
  async
  type="text/javascript"
></script>

Definieren Sie für mehr Sicherheit erlaubte Domains in der Zulassungsliste Ihres Agenten (im Tab Sicherheit). Dadurch wird der Zugriff auf bestimmte Hosts beschränkt.

Widget-Attribute

Dieser grundlegende Einbettungscode zeigt das Widget mit der im Dashboard des Agenten definierten Standardkonfiguration an. Das Widget unterstützt verschiedene HTML-Attribute für weitere Anpassungen:

<elevenlabs-convai
  agent-id="agent_id"              // Required: Your agent ID
  signed-url="signed_url"          // Alternative to agent-id
  server-location="us"             // Optional: "us" or default
  variant="expanded"               // Optional: Widget display mode
  dismissible="true"               // Optional: Allow the user to minimize the widget
></elevenlabs-convai>
<elevenlabs-convai
  avatar-image-url="https://..." // Optional: Custom avatar image
  avatar-orb-color-1="#6DB035" // Optional: Orb gradient color 1
  avatar-orb-color-2="#F5CABB" // Optional: Orb gradient color 2
></elevenlabs-convai>
<elevenlabs-convai
  action-text="Need assistance?" // Optional: CTA button text
  start-call-text="Begin conversation" // Optional: Start call button
  end-call-text="End call" // Optional: End call button
  expand-text="Open chat" // Optional: Expand widget text
  listening-text="Listening..." // Optional: Listening state
  speaking-text="Assistant speaking" // Optional: Speaking state
></elevenlabs-convai>

Das Widget rendert Markdown in Agentenantworten. Links werden standardmäßig als Klartext angezeigt, um Phishing zu verhindern.

<elevenlabs-convai
  markdown-link-allowed-hosts="example.com"  // Domains where links are clickable (use "*" for all)
  markdown-link-include-www="true"           // Also allow www variants (default: true)
  markdown-link-allow-http="true"            // Allow http:// links (default: true)
  syntax-highlight-theme="dark"              // Code block theme: "dark", "light", or "auto"
></elevenlabs-convai>

Laufzeitkonfiguration

Zwei weitere HTML-Attribute können verwendet werden, um das Verhalten des Agenten zur Laufzeit anzupassen. Diese beiden Funktionen können zusammen, getrennt oder gar nicht verwendet werden.

Dynamische Variablen

Dynamische Variablen ermöglichen es Ihnen, zur Laufzeit Werte in die Nachrichten, System-Prompts und Tools Ihres Agenten einzufügen.

<elevenlabs-convai
  agent-id="agent_7101k5zvyjhmfg983brhmhkd98n6"
  dynamic-variables='{"user_name": "John", "account_type": "premium"}'
></elevenlabs-convai>

Alle dynamischen Variablen, die der Agent benötigt, müssen an das Widget übergeben werden.

Weitere Informationen finden Sie in unserem Leitfaden zu dynamischen Variablen.

Überschreibungen

Überschreibungen ermöglichen die vollständige Anpassung des Verhaltens Ihres Agenten zur Laufzeit:

<elevenlabs-convai
  agent-id="agent_7101k5zvyjhmfg983brhmhkd98n6"
  override-language="es"
  override-prompt="Custom system prompt for this user"
  override-first-message="Hi! How can I help you today?"
  override-voice-id="axXgspJ2msm3clMCkdW3"
></elevenlabs-convai>

Überschreibungen können für bestimmte Felder aktiviert werden und sind vollständig optional.

Weitere Informationen finden Sie in unserem Leitfaden zu Überschreibungen.

Visuelle Anpassung

Passen Sie das Erscheinungsbild des Widgets, Textinhalte, Sprachauswahl und mehr an.

Öffnen Sie Ihren Agenten im Dashboard und navigieren Sie zum Tab Widget, um Erscheinungsbild, Avatar, Text, Bedingungen, Sprachunterstützung und mehr anzupassen.

Widget-Anpassung

Passen Sie die Farben und Formen des Widgets an Ihre Markenidentität an.

Widget-Erscheinungsbild

Rich Content

Rich Content ermöglicht dem Agenten, neben seinen Nachrichten interaktive Komponenten bereitzustellen. Konfigurieren Sie dies im Dashboard unter Kanäle → Widget → Rich Content.

Rich-Content-Einstellungen des Widgets

Rich Content wird in Textgesprächen und in Sprachgesprächen angezeigt, wenn unter Oberfläche die Option Echtzeit-Transkript des Gesprächs aktiviert ist. Er ist nur im eingebetteten Widget verfügbar.

Schnellantworten sind Schaltflächen, die Nutzer antippen können, statt zu tippen. Wenn ein Nutzer eine antippt, wird ihre Beschriftung als nächste Nachricht des Nutzers gesendet.

Schnellantworten

Vom Agenten vorgeschlagen

Der Agent schlägt während des Gesprächs bis zu drei Antworten vor, beispielsweise um eine Auswahl zu bestätigen oder nächste Schritte anzubieten.

Antworten für die erste Nachricht

Fügen Sie unter Antworten für die erste Nachricht bis zu drei Antworten hinzu, um sie mit der ersten Nachricht des Agenten anzuzeigen, sodass Nutzer das Gespräch mit einem Tippen beginnen können. Ziehen Sie sie, um die Reihenfolge zu ändern.

Diese Antworten sind festgelegt: Sie erscheinen bei jeder ersten Nachricht, und der Agent wählt sie nicht aus. Sie werden zusammen mit Ihren anderen Sprachvoreinstellungen übersetzt.

So verwendet der Agent Rich Content

Abgesehen von Antworten für die erste Nachricht entscheidet der Agent bei jedem Zug, ob er Schnellantworten oder ein Karussell anzeigen soll. Eine Antwort, die keine Komponente benötigt, bleibt Klartext. Beschreiben Sie im System-Prompt des Agenten, wann und wie diese erscheinen sollen.

Schnellantworten und Karussell sind für neue Agenten standardmäßig aktiviert. Aktivieren Sie sie für Agenten, die vor der Verfügbarkeit von Rich Content erstellt wurden, in den Widget-Einstellungen.

Erweiterte Implementierung

Für weitergehende Anpassungen sollten Sie die typsicheren ElevenAgents SDKs mit einer Next.js-, React- oder Python-Anwendung verwenden.

Client-Tools

Client-Tools ermöglichen es Ihnen, die Funktionalität des Widgets durch Event-Listener zu erweitern. Dadurch kann das Widget beispielsweise folgende Aktionen ausführen:

  • Den Nutzer auf eine bestimmte Seite weiterleiten
  • Eine E-Mail an Ihr Support-Team senden
  • Den Nutzer zu einer externen URL weiterleiten

Um Beispiele dieser Tools in Aktion zu sehen, starten Sie einen Anruf mit dem Agenten in der unteren rechten Ecke dieser Seite. Der Quellcode ist zur Referenz auf GitHub verfügbar.

Client-Tool erstellen

Um Ihr erstes Client-Tool zu erstellen, folgen Sie dem Leitfaden zu Client-Tools.

Konfiguration des Client-Tools

Beispielimplementierung

Unten sehen Sie ein Beispiel dafür, wie Sie das vom Widget ausgelöste Tool redirectToExternalURL in Ihrem JavaScript-Code verarbeiten:

index.js
document.addEventListener("DOMContentLoaded", () => {
  const widget = document.querySelector("elevenlabs-convai");
  if (widget) {
    // Listen for the widget's "call" event to trigger client-side tools
    widget.addEventListener("elevenlabs-convai:call", (event) => {
      event.detail.config.clientTools = {
        // Note: To use this example, the client tool called "redirectToExternalURL" (case-sensitive) must have been created with the configuration defined above.
        redirectToExternalURL: ({ url }) => {
          window.open(url, "_blank", "noopener,noreferrer");
        },
      };
    });
  }
});

Entdecken Sie unsere typsicheren SDKs für Implementierungen mit React, Next.js und Python.