> ## Documentation Index
> Fetch the complete documentation index at: https://docs.itellico.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Widget-Konfiguration

> Dein Web-Widget über acht Editor-Tabs anpassen: Setup, Aussehen, Inhalt, Features, Aktionen, Privatsphäre, Export und Share

export const Screenshot = ({lightSrc, darkSrc, alt, caption, maxWidth = "880px"}) => {
  return <div style={{
    margin: "1rem auto",
    maxWidth,
    width: "100%"
  }}>
      <Frame>
        <img className="block dark:hidden" src={lightSrc} alt={alt} />
        <img className="hidden dark:block" src={darkSrc} alt={alt} />
      </Frame>
      {caption ? <p style={{
    marginTop: "0.5rem",
    fontSize: "0.875rem",
    color: "inherit",
    opacity: 0.8
  }}>
          {caption}
        </p> : null}
    </div>;
};

**Zugriff:** Navigiere in der Hauptnavigation zu **Web-Widgets** und klicke bei einem beliebigen Widget auf **Bearbeiten**.

Der Widget-Konfigurationseditor erlaubt dir, dein Web-Widget anzupassen.

Eine Live-Vorschau auf der rechten Seite des Editors aktualisiert sich bei jeder Änderung.

<Screenshot lightSrc="/images/manage__widget-editor_DE-light.png" darkSrc="/images/manage__widget-editor_DE-dark.png" alt="Widget-Konfigurationseditor mit Acht-Tab-Layout und Live-Vorschau" caption="Der Editor ist als links-nach-rechts-Workflow aufgebaut: konfiguriere den aktuellen Tab und prüfe dann mit der Live-Vorschau das Besuchererlebnis." maxWidth="860px" />

***

## Einrichtung

Grundkonfiguration, die festlegt, wie das Widget funktioniert.

<Screenshot lightSrc="/images/manage__widget-setup_DE-light.png" darkSrc="/images/manage__widget-setup_DE-dark.png" alt="Setup-Tab mit Widgetname, Agentenauswahl, Anzeigename und Domainbeschränkungen" caption="Starte mit Setup. Dieser Tab steuert Identität des Widgets, verknüpften Agenten und Sicherheitseinstellungen auf Domain-Ebene." maxWidth="860px" />

| Einstellung              | Beschreibung                                                                                                                                     |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Widgetname**           | Interner Name zur Identifikation in der Widget-Liste                                                                                             |
| **Agent**                | Der Voice-Agent, der Gespräche über dieses Widget führt. Konfiguriere Agenten in deinem [Agenteneditor](/de/build/getting-started/agent-editor). |
| **Anzeigename**          | Der Name des Agenten, der Besuchern im Widget angezeigt wird                                                                                     |
| **Domainbeschränkungen** | Beschränkt, auf welchen Domains das Widget geladen werden darf. Leer lassen, um alle Domains zuzulassen.                                         |

<Warning>
  Domainbeschränkungen sind eine wichtige Sicherheitsmaßnahme. Ohne sie könnte jeder, der deinen Embed-Code bekommt, das Widget auf seiner eigenen Website einsetzen. Füge deine Domains hinzu, um unbefugte Nutzung zu verhindern.
</Warning>

***

## Tab "Aussehen"

Visuelle Anpassung, damit das Widget zu deiner Marke passt.

<Screenshot lightSrc="/images/manage__widget-appearance_DE-light.png" darkSrc="/images/manage__widget-appearance_DE-dark.png" alt="Aussehen-Tab mit Theme-Presets, Layout, Avatar, Farben und Radius-Einstellungen" caption="Im Aussehen-Tab passt du das Widget an deine Marke an, von Position und Größe bis zu Avatar und detaillierten Farbkontrollen." maxWidth="860px" />

### Theme-Presets

Wähle aus einer Reihe vorgefertigter Farbthemen, um dein Widget schnell zu stylen. Klicke ein Preset an, um es anzuwenden - die Einzel-Farben kannst du danach weiter feinjustieren.

### Layout

| Einstellung               | Beschreibung                                                    |
| ------------------------- | --------------------------------------------------------------- |
| **Position**              | Unten links oder unten rechts auf der Seite                     |
| **Größe**                 | Klein, mittel oder groß                                         |
| **Horizontaler Versatz**  | Abstand vom Seitenrand (in Pixeln)                              |
| **Vertikaler Versatz**    | Abstand vom unteren Seitenrand (in Pixeln)                      |
| **Erweitertes Verhalten** | Startet eingeklappt, startet ausgeklappt oder immer ausgeklappt |

### Avatar

Wähle, wie der Avatar deines Widgets erscheint:

| Typ      | Beschreibung                                      |
| -------- | ------------------------------------------------- |
| **Orb**  | Animierter Gradient-Puls mit 4 anpassbaren Farben |
| **Bild** | Lade ein eigenes Bild hoch (PNG, JPEG, WebP)      |
| **Link** | Zeige einen Avatar von einer URL                  |

### Farben

Farben sind für detaillierte Steuerung in vier einklappbare Bereiche gegliedert:

<AccordionGroup>
  <Accordion title="Hintergründe">
    Widget-Hintergrund, Consent-Screen, Chat-Bereich, Feedback-Bereich, unterer Bereich (Eingabe + Branding), Einklapp-Button und Text auf dem Hintergrund.
  </Accordion>

  <Accordion title="CTA (Buttons)">
    Button-Hintergrund, Text, Hover-Hintergrund und Rahmen. Schalte die Animation für den Anrufstart-Button ein.
  </Accordion>

  <Accordion title="Nachrichten">
    Hintergrund, Text und Rahmen von Agenten-Nachrichten. Hintergrund, Text und Rahmen von Besucher-Nachrichten.
  </Accordion>

  <Accordion title="Status">
    Statusbeschriftung, Pulsring und Indikatorfarben für Sprechen-, Zuhören-, Denken- und Verbinden-Zustände.
  </Accordion>
</AccordionGroup>

### Eckenradius

Steuere die Rundung für Widget-Container, Eingabefelder, Nachrichtenblasen, CTA-Buttons und den Einklapp-Button.

***

## Inhalt

Passe den gesamten Text und alle Labels an, die im Widget angezeigt werden.

<Screenshot lightSrc="/images/manage__widget-content_DE-light.png" darkSrc="/images/manage__widget-content_DE-dark.png" alt="Inhalt-Tab mit Sprach-Presets, Willkommensnachrichten, Statusmeldungen und Feedbacktext" caption="Nutze Inhalt, um das Widget zu lokalisieren und jedes sichtbare Label zu verfeinern, ohne das Verhalten des Agenten zu ändern." maxWidth="860px" />

### Sprach-Presets

Wähle eine Sprache, um alle Textfelder automatisch mit übersetzten Standardwerten zu füllen. Danach kannst du einzelne Labels individuell anpassen.

### Willkommensnachrichten

| Einstellung              | Beschreibung                                                      |
| ------------------------ | ----------------------------------------------------------------- |
| **Willkommensnachricht** | Begrüßungstext, der beim ersten Öffnen des Widgets angezeigt wird |
| **Platzhaltertext**      | Hinweistext im Nachrichten-Eingabefeld                            |

### Statusmeldungen

| Einstellung     | Beschreibung                                |
| --------------- | ------------------------------------------- |
| **Aktionstext** | Label der Haupt-Call-to-Action-Schaltfläche |
| **Verbinden**   | Text während des Verbindens                 |
| **Zuhören**     | Text, wenn der Agent zuhört                 |
| **Sprechen**    | Text, wenn der Agent spricht                |
| **Denken**      | Text, wenn der Agent verarbeitet            |

### Feedback-Nachrichten

| Einstellung            | Beschreibung                                   |
| ---------------------- | ---------------------------------------------- |
| **Feedback-Nachricht** | Aufforderung zur Sammlung von Besucherfeedback |
| **Senden-Button**      | Text auf dem Feedback-Senden-Button            |
| **Danke-Nachricht**    | Bestätigung nach dem Absenden des Feedbacks    |

<Tip>
  Das Anpassen von Inhaltslabels ist nützlich für Lokalisierung oder zum Abgleich mit deiner Markenstimme.
</Tip>

***

## Funktionen

Funktionen ein- oder ausschalten. Der Nur-Chat-Modus deaktiviert automatisch einige Funktionen.

<Screenshot lightSrc="/images/manage__widget-features_DE-light.png" darkSrc="/images/manage__widget-features_DE-dark.png" alt="Funktionen-Tab mit Nur-Chat-Modus, Sprachfunktionen, Interaktion und Anzeige-Toggles" caption="Funktionen ist das Panel für Fähigkeits-Toggles. Hier entscheidest du meist, ob das Widget Voice-first, nur Chat, gebrandet oder Feedback-fähig ist." maxWidth="860px" />

### Widget-Modus

| Einstellung        | Beschreibung                                             |
| ------------------ | -------------------------------------------------------- |
| **Nur-Chat-Modus** | Sprachfunktionen deaktivieren und nur Textchat verwenden |

### Sprachfunktionen

Der Nur-Chat-Modus deaktiviert diese Einstellungen.

| Einstellung                          | Beschreibung                                                            |
| ------------------------------------ | ----------------------------------------------------------------------- |
| **Text während des Anrufs erlauben** | Besuchern erlauben, während eines Voice-Anrufs Nachrichten zu schreiben |
| **Transkript anzeigen**              | Ein Live-Transkript von Voice-Gesprächen anzeigen                       |
| **Stummschaltung**                   | Besuchern erlauben, ihr Mikrofon stummzuschalten                        |
| **Anruf-Timer**                      | Anrufdauer während Voice-Gesprächen anzeigen                            |

### Interaktion

| Einstellung                                   | Beschreibung                                                                                                                          |
| --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
| **Begrüßung bei initialem Text überspringen** | Die [Begrüßung](/de/build/conversation/greeting-messages) des Agenten überspringen, wenn der Besucher mit einer Textnachricht startet |
| **Feedback-Erfassung aktivieren**             | Besucher nach dem Gespräch um Feedback bitten                                                                                         |
| **Bildfreigabe erlauben**                     | Besuchern erlauben, Bilder in Chat-Gesprächen zu teilen                                                                               |

### Anzeige

| Einstellung           | Beschreibung                                            |
| --------------------- | ------------------------------------------------------- |
| **Branding anzeigen** | "Powered by itellicoAI" in der Widget-Fußzeile anzeigen |

***

## Aktionen

Konfiguriere Link-Buttons, die im Widget erscheinen und Besuchern schnellen Zugriff auf häufige nächste Schritte geben.

<Screenshot lightSrc="/images/manage__widget-actions_DE-light.png" darkSrc="/images/manage__widget-actions_DE-dark.png" alt="Aktionen-Tab mit externen Link-Aktionen inklusive Labels, URLs und Toggle-Steuerungen" caption="Aktionen fügt leichte Übergabeoptionen hinzu, etwa externe Links, Telefonanrufe oder Buttons für den nächsten Schritt innerhalb des Widgets." maxWidth="860px" />

Du kannst bis zu **5 Aktionen** hinzufügen. Jede Aktion hat:

| Einstellung                 | Beschreibung                                                                                 |
| --------------------------- | -------------------------------------------------------------------------------------------- |
| **Label**                   | Buttontext                                                                                   |
| **URL**                     | Ziel-Link - unterstützt `https://`, `http://` und `tel:` für Telefonnummern                  |
| **Auto-Klick**              | Den Link automatisch öffnen, wenn die Aktion ausgelöst wird                                  |
| **Auf Antwort warten**      | Warten, bis der Besucher den verknüpften Schritt abgeschlossen hat, bevor weitergemacht wird |
| **Timeout**                 | Maximale Wartezeit, wenn Auf Antwort warten aktiviert ist                                    |
| **Anruf bei Klick beenden** | Voice-Anruf beenden, nachdem der Besucher auf einen Nicht-Telefon-Link klickt                |
| **Trigger**                 | Anweisungen dazu, wann der Agent die Aktion zeigen oder verwenden soll                       |
| **Aktiviert**               | Die gespeicherte Aktion in der Aktionsliste ein- oder ausschalten                            |

Das Widget lädt ein Favicon von der verknüpften Domain und zeigt es neben jeder Aktion an.

Für `tel:`-Links behandelt das Widget die Aktion als Telefon-Übergabe und deaktiviert das Warten auf die Webseite.

***

## Datenschutz

Steuere Datenschutz- und Consent-Einstellungen für Widget-Besucher.

<Screenshot lightSrc="/images/manage__widget-privacy_DE-light.png" darkSrc="/images/manage__widget-privacy_DE-dark.png" alt="Privatsphäre-Tab mit Trust-Center-Einstellungen sowie Konfiguration für AGB und Consent" caption="Privatsphäre ist der Ort, an dem du das öffentliche Trust Center, Rechtstexte und Consent-Anforderungen in das Widget-Erlebnis einbindest." maxWidth="860px" />

### Trust Center

| Einstellung                      | Beschreibung                                                                        |
| -------------------------------- | ----------------------------------------------------------------------------------- |
| **Trust Center aktivieren**      | Umschalten, um eine öffentliche Datenschutzseite für dieses Widget zu erstellen     |
| **URL der Datenschutzerklärung** | Link zu deiner Datenschutzerklärung (erforderlich, wenn Trust Center aktiviert ist) |
| **Subprozessoren-URL**           | Link zu deiner Liste der Subprozessoren (optional)                                  |
| **Öffentliche URL**              | Automatisch generierter, teilbarer Link zur Trust-Center-Seite                      |

### AGB & Consent

| Einstellung                      | Beschreibung                                                                                |
| -------------------------------- | ------------------------------------------------------------------------------------------- |
| **AGB-Inhalt**                   | Markdown-Text, der als AGB-/Consent-Hinweis angezeigt wird                                  |
| **Text des Akzeptieren-Buttons** | Label auf dem Akzeptieren-Button                                                            |
| **Text des Ablehnen-Buttons**    | Label auf dem Ablehnen-Button                                                               |
| **Consent erforderlich**         | Wenn aktiviert, müssen Besucher die Bedingungen akzeptieren, bevor sie ein Gespräch starten |

***

## Freigabe

Erzeuge teilbare Links, die eine eigenständige Seite mit deinem Widget öffnen - nützlich für Stakeholder-Reviews und Tests vor dem Livegang.

<Note>
  Der Share-Tab ist erst verfügbar, nachdem du das Widget gespeichert hast.
</Note>

Siehe [Widget-Share-Links](/de/manage/web-widgets/share-links) für die vollständigen Details zum Erstellen und Verwalten von Share-Links.

***

## Exportieren

Generiere den Embed-Code, um dein Widget auf deiner Website bereitzustellen.

<Screenshot lightSrc="/images/widget__export-tab_DE-light.png" darkSrc="/images/widget__export-tab_DE-dark.png" alt="Export-Tab mit generiertem Embed-Skript und installationsbezogenen Hinweisen für Plattformen" caption="Export liefert dir das eine Script-Tag für deine Website und kurze Installationshinweise für gängige Website-Builder." maxWidth="860px" />

Kopiere das generierte Script und füge es in das HTML deiner Website ein, direkt vor dem schließenden `</body>`-Tag.

```html theme={null}
<script src="https://widgets.itellico.ai/widgets/your-widget-id/widget.js" async></script>
```

<Note>
  Der Embed-Code bleibt gleich, auch wenn du Widget-Einstellungen änderst. Die Plattform wendet Konfigurationsänderungen automatisch an; du musst den Code deiner Website nicht aktualisieren.
</Note>

***

## Nächste Schritte

<CardGroup cols={2}>
  <Card title="Web-Widgets-Übersicht" icon="browser" href="/de/manage/web-widgets/overview">
    Widget-Liste verwalten, neue Widgets erstellen und den Widget-Editor öffnen
  </Card>

  <Card title="Widget-Deployment" icon="rocket" href="/de/launch/web-widget-deployment">
    Der Schritt-für-Schritt-Anleitung zum Deployen deines Widgets auf deiner Website folgen
  </Card>
</CardGroup>