> ## 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-Widget-Deployment

> Bette Sprache und Chat mit deinem KI-Agenten auf deiner Website ein

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

Das Web-Widget lässt Besucherinnen und Besucher per Sprache, Chat oder beidem mit deinem KI-Agenten interagieren. Erstelle dein Widget, konfiguriere es über den visuellen Editor und kopiere dann ein einziges Embed-Skript, um es bereitzustellen.

## Web-Widget-Deployment nutzen, wenn du Folgendes brauchst

* einen dauerhaft verfügbaren Assistenten auf deiner Website
* Unterstützung per Sprache, Chat oder beidem
* unterschiedliche Widget-Erlebnisse für verschiedene Seiten
* Marketing- oder Operations-Teams, die das Website-Erlebnis ohne erneutes Bauen des Agents verwalten

Der übliche Geschäftsablauf lautet: **Widget erstellen → Besuchererlebnis konfigurieren → im Preview testen → Embed-Skript veröffentlichen**.

<Tip>
  Für die detaillierte Konfiguration des Widget-Editors einschließlich Erscheinungsbild, Inhalte, Features, Aktionen, Privatsphäre und Share-Links siehe den [Widget-Konfigurationsleitfaden](/de/manage/web-widgets/configuration).
</Tip>

## Dein Widget erstellen

<Screenshot lightSrc="/images/widget__create-widget_DE-light.png" darkSrc="/images/widget__create-widget_DE-dark.png" alt="Dialog 'Widget erstellen' mit Feld für Widgetname, Dropdown für Agent, sowie Cancel- und Create-Buttons" />

<Steps>
  <Step title="Widget-Manager öffnen">
    Navigiere im Dashboard zu **Web-Widgets**
  </Step>

  <Step title="Neues Widget erstellen">
    Klicke auf **Widget erstellen** und gib Folgendes an:

    * **Widgetname** - Interner Name für dich
    * **Agent** - Wähle aus, welcher Agent dieses Widget antreibt
  </Step>

  <Step title="Widget konfigurieren">
    Nutze die Tabs des visuellen Editors, um **Setup**, **Appearance**, **Content**, **Features**, **Actions**, **Datenschutz**, **Export** und **Teilen** zu konfigurieren. Der Editor enthält eine Live-Vorschau, die sich beim Ändern aktualisiert. Siehe den [Widget-Konfigurationsleitfaden](/de/manage/web-widgets/configuration) für Details zu jedem Tab.
  </Step>

  <Step title="Änderungen speichern">
    Wenn du ungespeicherte Änderungen hast, nutze die Leiste **Unsaved changes** unten im Editor, um sie zu speichern.
  </Step>
</Steps>

## Dein Embed-Code

Sobald dein Widget konfiguriert ist, kopiere das Embed-Skript aus dem Tab **Export**.

<Screenshot lightSrc="/images/widget__export-tab_DE-light.png" darkSrc="/images/widget__export-tab_DE-dark.png" alt="Tab 'Export' mit einem eindeutigen Embed-Skript-Codeblock, Copy-Button und installationsspezifischen Anleitungen für Google Tag Manager, WordPress, Webflow, Shopify und Squarespace" />

Der Tab Export enthält:

* **Embed script** - Deine eindeutige Loader-URL zum Kopieren und Einfügen
* **Platform guides** - Schritt-für-Schritt-Anleitungen für Google Tag Manager, WordPress, Webflow, Shopify und Squarespace

## Dein Widget deployen

<Steps>
  <Step title="Im Preview testen">
    Nutze die Live-Vorschau rechts im Editor, um dein Widget vor dem Deployment zu testen. Klicke bei Bedarf auf das Aktualisieren-Symbol.
  </Step>

  <Step title="Embed-Skript kopieren">
    Gehe zum Tab **Export** und kopiere dein eindeutiges Embed-Skript.
  </Step>

  <Step title="Auf deiner Website einfügen">
    Füge das Skript direkt vor dem schließenden `</body>`-Tag auf deiner Website ein oder bitte deine Webentwicklerin bzw. deinen Webentwickler darum.
  </Step>

  <Step title="Live testen">
    Lade deine Website, klicke auf das Widget und teste ein Sprach- oder Chat-Gespräch. Prüfe unter **Gespräche**, ob die Session aufgezeichnet wurde.
  </Step>
</Steps>

<Screenshot lightSrc="/images/widget__web-call-widget_DE-light.png" darkSrc="/images/widget__web-call-widget_DE-dark.png" alt="Widget-Editor-Preview mit konfigurierter Voice-Widget-Call-to-Action auf der Vorschaufläche" caption="Nutze die Dashboard-Vorschau für Konfigurationschecks und validiere das echte eingebettete Erlebnis vor dem Launch auf der Zielseite." />

<Note>
  Konfigurationsänderungen, die du im Dashboard vornimmst, werden automatisch auf dein eingebettetes Widget angewendet. Du musst das Embed-Skript nicht aktualisieren. Wenn Änderungen nicht sofort erscheinen, mache einen Hard Aktualisieren (Strg+Umschalt+R oder Cmd+Shift+R).
</Note>

## Deployment-Hinweise

* **HTTPS erforderlich** für Mikrofonzugriff, außer auf localhost
* **Mobile responsiv** - Das Widget passt sich automatisch an mobile Bildschirme an
* Erstelle separate Widgets für unterschiedliche Websites oder Branding-Anforderungen

## Fehlerbehebung

<AccordionGroup>
  <Accordion title="Widget erscheint nicht" icon="eye-slash">
    * Bitte die Person, die deine Website verwaltet, bei Bedarf Website-Script-Fehler zu prüfen
    * Prüfe, ob die erlaubten Domains deine Website enthalten
    * Stelle sicher, dass das Script vor dem `</body>`-Tag platziert ist
    * Prüfe die Content-Security-Policy-Einstellungen
  </Accordion>

  <Accordion title="Mikrofonzugriff verweigert" icon="microphone-slash">
    * HTTPS erforderlich, außer auf localhost
    * Besucherinnen und Besucher müssen die Berechtigung manuell erteilen
    * Browser-Mikrofoneinstellungen prüfen
    * Einige Browser blockieren beim ersten Besuch
  </Accordion>

  <Accordion title="Kein Audio oder schlechte Qualität" icon="volume-xmark">
    * Audioprobleme können durch Netzwerkrestriktionen verursacht werden. Probiere ein anderes Netzwerk oder bitte dein IT-Team, Voice-Verbindungen zu erlauben.
    * Unternehmens-VPNs können Audio blockieren
    * Teste mit anderem Netzwerk oder Browser
    * Wenn es anderswo funktioniert, liegt das Problem meist an einer lokalen Netzwerk- oder Geräte-Richtlinie
  </Accordion>

  <Accordion title="Änderungen werden nicht aktualisiert" icon="arrows-rotate">
    * Speichere über die Leiste **Unsaved changes** im Editor
    * Mache einen Hard Aktualisieren deiner Website (Strg+Umschalt+R oder Cmd+Shift+R)
    * Leere bei Bedarf den Browser-Cache
    * Prüfe, ob du das richtige Widget bearbeitest
  </Accordion>
</AccordionGroup>

## Nächste Schritte

<CardGroup cols={2}>
  <Card title="Widget-Konfiguration" icon="palette" href="/de/manage/web-widgets/configuration">
    Vollständige Anleitung für den Widget-Editor: Erscheinungsbild, Inhalte, Features, Aktionen und Privatsphäre
  </Card>

  <Card title="Web-Widget-Implementierung" icon="code" href="/de/launch/web-widget-implementation">
    Widgets sauber über Umgebungen hinweg mit dem richtigen Domain- und Privacy-Setup deployen
  </Card>

  <Card title="Trust Center" icon="shield-check" href="/de/manage/trust-center/overview">
    Accountweite Datenschutz- und Compliance-Einstellungen verwalten
  </Card>

  <Card title="Produktions-Checkliste" icon="shield-check" href="/de/launch/production-checklist">
    Lernen, wie du dein Widget-Deployment pflegst und skalierst
  </Card>
</CardGroup>