> This is a page from the ElevenLabs documentation. For a complete page index, fetch https://elevenlabs.io/docs/llms.txt. For the full documentation in a single file, fetch https://elevenlabs.io/docs/llms-full.txt.

# Widget anpassen

**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](/docs/de/eleven-api/resources/libraries) 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.

> **Note**
>
> 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](/docs/de/eleven-agents/operate/hosted-mcp) abrufen.

## Modalitätskonfiguration

Das Widget unterstützt flexible Eingabemodi für Ihren Anwendungsfall. Konfigurieren Sie diese Optionen im Dashboard unter **Channels** → **Widget** → **Interface**.

> **Note**
>
> Multimodalität wird in unseren Client-SDKs vollständig unterstützt. Weitere Informationen finden Sie
> [hier](/docs/de/eleven-api/resources/libraries).

![Widget-Oberflächenoptionen](/docs/_fern-img/cf851dd7a29b4bd23f7d36097ebf57c0bfe1b6a7a3b35687ddea20d9920a93c0.webp)

**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](/docs/de/eleven-agents/guides/chat-mode).

> **Note**
>
> 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

> **Note**
>
> 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`**

```html title="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>
```

> **Info**
>
> 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:

#### Grundkonfiguration

```html
<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>
```

#### Visuelle Anpassung

```html
<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>
```

#### Textanpassung

```html
<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>
```

#### Markdown-Rendering

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

```html
<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.

```html
<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.

> **Info**
>
> Weitere Informationen finden Sie in unserem [Leitfaden zu dynamischen Variablen ](/docs/de/eleven-agents/customization/personalization/dynamic-variables).

### Überschreibungen

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

```html
<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.

> **Info**
>
> Weitere Informationen finden Sie in unserem [Leitfaden zu Überschreibungen](/docs/de/eleven-agents/customization/personalization/overrides).

## Visuelle Anpassung

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

#### Im Dashboard aktualisieren

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

![Widget-Anpassung](/docs/_fern-img/1f773d01a3c0925a47f11cf57153db23bc8bc03b93efe5d7085919886ae392cf.webp)

#### Über die CLI aktualisieren

#### Agentenkonfiguration abrufen

```bash
elevenlabs agents pull --agent "<agent-name>"
```

#### \`agent_configs/\<agent-name>.json\` bearbeiten

Legen Sie Felder unter `platform_settings.widget` fest. So ändern Sie beispielsweise die Orb-Farben und den Feedback-Modus:

```json
{
  "platform_settings": {
    "widget": {
      "variant": "full",
      "placement": "bottom-right",
      "avatar": {
        "type": "orb",
        "color_1": "#6DB035",
        "color_2": "#F5CABB"
      },
      "feedback_mode": "during",
      "bg_color": "#ffffff",
      "text_color": "#000000",
      "btn_color": "#000000",
      "btn_text_color": "#ffffff"
    }
  }
}
```

#### Änderungen übertragen

```bash
elevenlabs agents push --agent "<agent-name>"
```

#### Über die API aktualisieren

```python
from elevenlabs import ElevenLabs

elevenlabs = ElevenLabs()

elevenlabs.conversational_ai.agents.update(
    agent_id="agent_7101k5zvyjhmfg983brhmhkd98n6",
    platform_settings={
        "widget": {
            "variant": "full",
            "placement": "bottom-right",
            "avatar": {
                "type": "orb",
                "color_1": "#6DB035",
                "color_2": "#F5CABB",
            },
            "feedback_mode": "during",
        },
    },
)
```

```typescript
import { ElevenLabsClient } from "@elevenlabs/elevenlabs-js";

const elevenlabs = new ElevenLabsClient();

await elevenlabs.conversationalAi.agents.update("agent_7101k5zvyjhmfg983brhmhkd98n6", {
  platformSettings: {
    widget: {
      variant: "full",
      placement: "bottom-right",
      avatar: {
        type: "orb",
        color1: "#6DB035",
        color2: "#F5CABB",
      },
      feedbackMode: "during",
    },
  },
});
```

#### Erscheinungsbild

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

![Erscheinungsbild des Widgets](/docs/_fern-files/elevenlabs.docs.buildwithfern.com/0c07c4569f8c5ad3b93933711c268601af411085aa7df1bb8e8ec547a01f2d8e/assets/images/conversational-ai/appearance.gif)

#### Feedback

Sammeln Sie Erkenntnisse von Nutzern, um die Leistung des Agenten zu verbessern. Dies kann genutzt werden, um die Wissensdatenbank und den System-Prompt Ihres Agenten zu optimieren.

![Widget-Feedback](/docs/_fern-img/d7117399e23f06522b3112ff5c5ead23f66d3ea4700c011ff75e5dcd6cce875c.webp)

**Erfassungsmodi**

* **Keine**: Deaktiviert die Feedback-Erfassung vollständig.
* **Während des Gesprächs**: Unterstützt Feedback in Echtzeit während Gesprächen. Zusätzliche Metadaten, etwa die Agentenantwort, die das Feedback ausgelöst hat, werden erfasst, um Lücken besser zu erkennen.
* **Nach dem Gespräch**: Zeigt nach dem Gespräch eine einzelne Feedback-Aufforderung an.

> **Note**
>
> Senden Sie Feedback bei benutzerdefinierten SDK-Implementierungen programmgesteuert über die [API](/docs/de/eleven-agents/api-reference/conversations/create).

#### Avatar

Konfigurieren Sie die Sprach-Orb oder verwenden Sie Ihren eigenen Avatar.

![Anpassung der Widget-Orb](/docs/_fern-files/elevenlabs.docs.buildwithfern.com/7530f28ad124fc4533911eca4a2269ac1df19dffd2b6dab1e8b56d95cc1eb53c/assets/images/conversational-ai/avatar.gif)

**Verfügbare Optionen**

* **Orb**: Wählen Sie zwei Verlaufsfarben (z. B. #6DB035 & #F5CABB).
* **Link/Bild**: Verwenden Sie ein benutzerdefiniertes Avatarbild.

#### Anzeigetext

Passen Sie alle angezeigten Textelemente des Widgets an, etwa um Button-Beschriftungen zu ändern.

![Textinhalte des Widgets](/docs/_fern-files/elevenlabs.docs.buildwithfern.com/4ad66ecae5df29e587afcf6e1898ccb41ca197abdaa2fde3ada4b10d256f8b7c/assets/images/conversational-ai/textcontents.gif)

#### Bedingungen

Zeigen Sie vor dem Gespräch benutzerdefinierte Geschäftsbedingungen an.

![Einrichtung der Bedingungen](/docs/_fern-img/58dfd0abf92615f85c7314e8baec1bf4dd401cc88a04f1096baf817f05edb39d.webp)

**Verfügbare Optionen**

* **Inhalt der Bedingungen**: Verwenden Sie Markdown, um Ihren Richtlinientext zu formatieren.
* **Lokaler Speicher-Schlüssel**: Ein Schlüssel (z. B. "terms_accepted"), um wiederkehrende Nutzer nicht erneut aufzufordern.

**Verwendung**

Die Bedingungen werden Nutzern vor Beginn des Anrufs in einem Modal angezeigt:

![Anzeige der Bedingungen](/docs/_fern-img/ca7511c60f1f6a29ee8bdd5c40083c73ef701f6cfd7ce1672161d73559a0c9b0.webp)

Die Bedingungen können in Markdown geschrieben werden. Damit können Sie:

* Links zu externen Richtlinien hinzufügen
* Text mit Überschriften und Listen formatieren
* Hervorhebungen und Stilmittel einfügen

Weitere Hilfe zu Markdown finden Sie im [CommonMark-Hilfeleitfaden](https://commonmark.org/help/).

> **Info**
>
> Nach der Annahme wird der Status lokal gespeichert und der Nutzer wird bei späteren
> Besuchen nicht erneut aufgefordert.

#### Sprache

Aktivieren Sie die Unterstützung mehrerer Sprachen im Widget.

![Widget-Sprache](/docs/_fern-files/elevenlabs.docs.buildwithfern.com/049e871eb0f609b071599e405c3da76351ee4ea38e52400fc416194930c42327/assets/images/conversational-ai/language.gif)

> **Note**
>
> Um die Sprachauswahl zu aktivieren, müssen Sie Ihrem Agenten zuerst [weitere Sprachen](/docs/de/eleven-agents/customization/voice/customization/language) hinzufügen.

#### Stummschalten

Ermöglichen Sie Nutzern, ihr Audio im Widget stummzuschalten.

![Stummschalt-Button des Widgets](/docs/_fern-img/e6968e4ba057d98857fb41125bb57f92570ed7c49711ce423add1ea558de5919.webp)

Um den Stummschalt-Button hinzuzufügen, aktivieren Sie dies bitte in der Karte `interface` der `widget`-
Einstellungen des Agenten.

![Stummschalt-Button des Widgets](/docs/_fern-img/7db9df78926f3f3b3db7c286d4efc033356ec9b79cabe20670f65a52a624fae8.webp)

#### Teilbare Seite

Passen Sie die öffentliche Landingpage Ihres Widgets an (teilbarer Link).

![Teilbare Widget-Seite](/docs/_fern-img/9d8b23aa816f4b7d727b3c0511ef91d046796bb57b8299382c53b6bcff746c50.webp)

**Verfügbare Optionen**

* **Beschreibung**: Geben Sie einen kurzen Absatz ein, der den Zweck des Anrufs erklärt.

---

## Erweiterte Implementierung

> **Note**
>
> Für weitergehende Anpassungen sollten Sie die typsicheren [ElevenAgents SDKs](/docs/de/eleven-api/resources/libraries) 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](https://github.com/elevenlabs/elevenlabs-dx/blob/main/fern/assets/scripts/widget.js).

#### Client-Tool erstellen

Folgen Sie zum Erstellen Ihres ersten Client-Tools dem [Leitfaden zu Client-Tools](/docs/de/eleven-agents/customization/tools/client-tools).

#### Beispiel: Tool \`redirectToExternalURL\` erstellen

![Client-Tool-Konfiguration](/docs/_fern-img/d800b8c60cba2ab0a1d0aaaecc0652a678998a4161adaf10d83df51b928a7734.webp)

#### Beispielimplementierung

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

**`index.js`**

```javascript title="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");
        },
      };
    });
  }
});
```

> **Info**
>
> Entdecken Sie unsere typsicheren [SDKs](/docs/de/eleven-api/resources/libraries) für Implementierungen mit React, Next.js und Python.