BereitstellenWeb

Widget anpassen

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. SDK-Überschreibungen haben Vorrang vor Anpassungen in der 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 Channels → Widget → Interface.

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 die Unterstützung für den Nur-Text-Modus für reine Textgespräche, die per Text gestartet werden.

Widget einbetten

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

Fügen Sie diesen Codeausschnitt zum Abschnitt <body> Ihrer Website hinzu. Platzieren Sie ihn für eine websiteweite Verfügbarkeit in Ihrer zentralen Datei index.html:

Widget embed code
<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 zulässige Domains in der Allowlist Ihres Agenten (im Tab Security). Dadurch wird der Zugriff auf die angegebenen 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, separat oder gar nicht verwendet werden.

Dynamische Variablen

Mit dynamischen Variablen können Sie Laufzeitwerte in die Nachrichten, System-Prompts und Tools Ihres Agenten einfü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 Erscheinungsbild, Textinhalte, Sprachauswahl und mehr des Widgets an.

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

Widget-Anpassung

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

Erscheinungsbild des Widgets

Erweiterte Implementierung

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

Client-Tools

Mit Client-Tools können Sie die Funktionalität des Widgets durch Event-Listener erweitern. Dadurch kann das Widget beispielsweise folgende Aktionen ausführen:

  • Nutzer auf eine bestimmte Seite weiterleiten
  • Eine E-Mail an Ihr Support-Team senden
  • Nutzer auf eine externe 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 auf GitHub verfügbar.

Client-Tool erstellen

Folgen Sie zum Erstellen Ihres ersten Client-Tools dem Leitfaden zu Client-Tools.

Client-Tool-Konfiguration

Beispielimplementierung

Nachfolgend 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.