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

# Web-Widgets

> Einbettbare Voice-KI-Widgets für deine Website erstellen und verwalten

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>;
};

Web-Widgets ermöglichen dir, deinen Agenten über ein einbettbares Widget auf Webseiten bereitzustellen.

**Zugriff:** Öffne **Web-Widgets** im Hauptmenü.

<Screenshot lightSrc="/images/manage__widgets-list_DE-light.png" darkSrc="/images/manage__widgets-list_DE-dark.png" alt="Web-Widgets-Liste mit Widgetname, Agent, Features und letztem Update" />

## Wann du Web-Widgets nutzt

* Voice oder Chat auf deiner Website hinzufügen
* unterschiedliche Widgets für unterschiedliche Seiten oder Zielgruppen erstellen
* vor dem Veröffentlichen sehen, wie das Erlebnis aussehen wird
* Share-Links und Embed-Code verwalten, ohne den Agenten selbst zu ändern

Jedes Widget ist eine kundenseitige Erlebnisschicht über einem Agenten. Ein Agent kann mehrere Widgets mit unterschiedlichen Konfigurationen antreiben.

## Widget-Liste

Die Liste zeigt:

* **Name**
* **Agent**
* **Features** (Voice/Text)
* **Aktualisiert**-Zeitstempel
* **Aktionen**-Menü

Ein Klick auf eine Zeile öffnet den Widget-Editor. Cmd/Ctrl+Klick öffnet ihn in einem neuen Tab.

## Widget erstellen

Nutze **Widget erstellen**, um das Erstellungsformular zu öffnen.

Pflichtfelder:

* Widgetname
* Agent

Nach der Erstellung leitet dich die Plattform zum vollständigen Widget-Konfigurationseditor mit den aktuellen Tabs **Setup**, **Aussehen**, **Inhalt**, **Features**, **Aktionen**, **Privatsphäre**, **Export** und **Teilen** weiter.

## Mit mehreren Widgets arbeiten

Du kannst separate Widgets für folgende Fälle pflegen:

* verschiedene Website-Seiten
* verschiedene Zielgruppen/Anwendungsfälle
* verschiedene Agenten-Personas

Jedes Widget hat eine eigene Konfiguration, eigene Share-Links und eigenen Embed-Code.

## Nächste Schritte

<CardGroup cols={2}>
  <Card title="Widget-Konfiguration" icon="sliders" href="/de/manage/web-widgets/configuration">
    Alle acht Tabs des Widget-Editors konfigurieren, von Setup bis Share und Export
  </Card>

  <Card title="Widget-Share-Links" icon="link" href="/de/manage/web-widgets/share-links">
    Gehostete Vorschau-Links für Prüfer und Stakeholder erstellen
  </Card>

  <Card title="Agenteneditor" icon="robot" href="/de/build/getting-started/agent-editor">
    Das Verhalten des von deinen Widgets verwendeten Agenten anpassen
  </Card>
</CardGroup>