Skip to main content
Das Web-Widget bringt deinen Assistenten auf deine Website: Besucher klicken auf eine Schaltfläche und sprechen im Browser mit dem Assistenten (kein Telefon und keine App nötig) oder schreiben im Chat mit demselben Assistenten. Das Widget ist verfügbar, wenn es in deinem Plan enthalten ist.

​
Sprache + Chat, ein Assistent

  • Voice – ein Klick startet ein Live-Sprachgespräch mit der vollständigen Konfiguration des Assistenten: Engine-Modus, Stimme, Wissensdatenbank, Tools, Guardrails. Während des Gesprächs bleibt die Präsenzvisualisierung groß und die zuletzt gesprochenen Wörter erscheinen in kleinen Untertitelgruppen; das vollständige Transkript bleibt im Verlauf verfügbar, wo Web-Anrufe die Richtung web haben.
  • Chat – derselbe Assistent, dieselben Prompts und dieselbe Wissensdatenbank in Textform, für Besucher, die nicht sprechen können oder wollen.
Weil sich beide Kanäle eine Assistentenkonfiguration teilen, pflegst du das Verhalten nur an einer Stelle.

​
Besuchersprachen

Alle Standardtexte für Bedienelemente, Formulare, Verifizierung und Fehlermeldungen unterstützen 86 Sprachen. Zuerst gilt die bevorzugte Browsersprache. Die Ländererkennung liefert einen Ersatzwert; ohne passende Sprache erscheint Englisch. Sprachen von rechts nach links erhalten das passende Layout. Eigene Begrüßungen, Assistentennamen, geänderte Feldbeschriftungen und andere individuelle Texte bleiben erhalten. Gesprächsinhalte werden nicht vom Widget übersetzt. Die Sicherheitsprüfung verwendet ihre eigenen unterstützten Sprachen.

​
Einbetten

Lege unter Settings → Channels → Web Widget ein Widget an und füge anschließend ein Snippet aus dem Editor ein. Wähle Display:
Der Standard – eine Launcher-Bubble in der Ecke. Position und Initial state gelten. Bevorzuge den script-Loader (er setzt allow="microphone" automatisch am iframe):
Fertige HTML- und React-Snippets sowie einen Prompt für KI-Coding-Agents findest du im Tab Installieren des Widget-Editors. Die Beispiele verwenden unterstützte Widget-Attribute; den vollständigen Code für deine Konfiguration findest du im Editor. Auf White-Label-Domains wird das Widget von deiner Tenant-Domain mit deinem Branding ausgeliefert. Snippets mit älteren Attribut- oder Elementnamen funktionieren weiter; du musst sie nicht austauschen.

​
Erlaubte Websites

Trage die Website(s) ein, die das Widget einbetten dürfen (exakte Origins wie https://example.com, oder Subdomain-Wildcards wie *.example.com). Localhost wird für die Entwicklung unterstützt. Origins sind beim Erstellen oder Speichern eines Widgets optional.
Einstellungen eines inaktiven Beispiel-Widgets

Web Widget & AI Avatar — Einstellungen eines inaktiven Beispiel-Widgets

  • Eine leere Allowlist bedeutet nicht „offen für jede Seite“: Fremde Origins werden blockiert. Nur die Plattform-Domain selbst bleibt erlaubt, damit die Live-Vorschau in der App weiter funktioniert.
  • Trage vor dem Livegang jeden Website-Host ein, der das Snippet lädt. Lädt das Widget auf einer Kundenseite nicht, prüfe zuerst Erlaubte Websites.

​
Anpassung

  • Display – Floating (Launcher in der Ecke) oder Inline (Einbettung im Seitenfluss). Position und Initial state gelten nur für Floating.
  • Colors and branding – Launcher-Farbe, Panel-Akzent, Logo; das Tenant-Branding greift auf White-Label-Domains automatisch.
  • Position – Eckplatzierung des schwebenden Launchers (bei Inline ausgeblendet).
  • Modes – voice-only, chat-only oder both.
  • Voice presence – klassischer Audio-Visualizer oder ein virtueller AI Avatar (siehe unten).
  • Visualizer-Stil – Aura, Bar, Wave, Radial, Grid, Satin oder Halbton. Satin (glänzend) und Halbton (Punktraster) sind animierte Orbs in deiner Akzentfarbe: Die Kontur bleibt ruhig, das Innere bewegt sich mit der Stimme des Assistenten, und der Anruf-Button sitzt auf der Unterkante des Orbs.
  • Launcher icon – Assistant orb, Chat bubbles, Question mark, Smiley face, Team oder Hand wave. Gilt für chat-only, voice-only und both. Assistant avatar ist zusätzlich verfügbar, wenn der gewählte Assistent ein Profilbild hat. Logo verwendet das Header-Logo des Widgets.
  • Launcher label – Presets (No text als Standard; Help, Ask anything, Assistance, Support, Live Chat, Need help?), übersetzt anhand der Browsersprache des Besuchers. Avatar-only nutzt weiterhin optional eigenen Launcher-Text für den Glass-CTA.
  • Texts – Willkommensnachricht, AI-Hinweis, Datenschutzhinweis.
  • Pre-chat form – optionales Formular, bevor Chat oder Sprachgespräch startet (siehe unten).

​
Virtueller AI Avatar

Virtuelle Avatare benötigen das Feature AI Avatar. Stelle im Widget-Editor Voice presence auf AI avatar und wähle einen Avatar.
  • Layouts
    • Avatar only (full-bleed) – kompakte Karte mit Fokus auf das Gesicht. Floating-Widgets können Expanded oder Minimized starten; Inline zeigt die Karte immer direkt im Layout.
    • Avatar + chat – Avatar-Präsenz mit dem klassischen Chat-/Voice-Panel-Rahmen.
  • Billing – Sprachsitzungen werden zum normalen Talk-Minute-Tarif abgerechnet, zuzüglich des Zuschlags Web widget virtual avatar pro Minute, solange ein virtueller Avatar aktiv ist; reine Text-Chat-Nachrichten werden – gesendet wie empfangen – pro Nachricht zum Web chat (sent)- bzw. Web chat (received)-Satz des Workspace in Credits abgerechnet. Die aktuellen Sätze findest du auf der Usage-Seite; siehe auch So werden Minuten abgerechnet.
  • Ohne AI-Avatar-Zugriff zeigt der Editor eine Upgrade-Option, und die API lehnt das Aktivieren der Avatar-Präsenz ab.

​
Pre-Chat-Formular

Öffne das Widget im Editor, wechsle zum Tab Nachrichten, suche Pre-chat form und aktiviere Enable. Besucher füllen dann Felder aus, bevor die Sitzung beginnt.
  • Suggestions stammen aus Kontaktfeldern (Name, E-Mail, Telefon), den Eingabevariablen des gewählten Assistenten und den Audience-Attributen des Workspace. Du kannst auch eigene Keys hinzufügen.
  • Übermittelte Werte werden zu input variables des Anrufs ({{variable_key}}), aktualisieren den Audience-Lead, wenn Identitätsfelder vorhanden sind, und erscheinen in History unter Pre-chat form / Input variables.
  • Pflichtfelder werden geprüft, bevor ein Besucher eine Sitzung starten kann.

​
Das solltest du vor dem Livegang prüfen

1

Mindestens eine erlaubte Website hinzufügen

Liste jede Website auf, die das Widget einbettet. Ohne Origins können Fremd-Hosts weder Config laden noch Tokens ausstellen.
2

Teste den Assistenten zuerst mit Browser-Anrufen

Das Widget nutzt denselben Web-Call-Pfad wie der Testanruf im Assistenten-Editor – klingt der richtig, passt auch das Widget.
3

Auf Mikrofonberechtigungen achten

Browser verlangen HTTPS für den Mikrofonzugriff. Die Host-Seite darf das Mikrofon nicht per Permissions-Policy blockieren. Script-/Web-Component-Embeds setzen allow="microphone" automatisch am iframe.
4

Aktualisiere deine Datenschutzerklärung

Sprachgespräche werden wie Anrufe verarbeitet (Transkripte, optionale Aufzeichnung mit Consent-Flow). Erwähne das Widget in deiner Datenschutzerklärung.

​
Fehlerbehebung

Vergewissere dich, dass das Embed-Snippet vor dem schließenden </body>-Tag steht, erzwinge einen Hard-Refresh (oder teste in einem privaten Fenster), um gecachtes HTML auszuschließen, prüfe, ob dein Plan das Web-Widget enthält, und suche in der Browser-Konsole nach JavaScript-Fehlern. Kopiere das Snippet neu aus dem Widget-Editor, falls du seitdem den Key des Connectors geändert hast.
Prüfe zuerst Erlaubte Websites. Eine leere Allowlist blockiert absichtlich jeden fremden Host; trage die exakte Origin ein (oder einen *.example.com-Wildcard), auf der das Widget eingebettet ist.
Voice benötigt HTTPS. Prüfe, ob die Seite über HTTPS ausgeliefert wird, der Browser die Mikrofonberechtigung erteilt hat, das Mikrofon in anderen Apps funktioniert und keine VPN- oder Firewall-Regel WebRTC blockiert. Script- und Web-Component-Embeds setzen allow="microphone" automatisch – bei einem rohen iframe-Embed musst du dieses Attribut manuell ergänzen.
Prüfe die Browser-Konsole auf Fehler, bestätige, dass der Assistent bei einem Testanruf/-chat im Assistenten-Editor funktioniert, und lade die Seite neu, um eine frische Widget-Sitzung zu starten.
Antworten kommen unter dem Key des jeweiligen Felds an; wähle also die Suggestion (oder setze den Custom Key), die zur Variable passt, die dein Assistent liest, und speichere das Widget, bevor du erneut testest.
Stelle sicher, dass du die Widget-Einstellungen gespeichert hast, und erzwinge dann einen Hard-Refresh oder teste in einem privaten Fenster; ein alter, gecachter Embed-Snippet kann eine frische Config-Änderung ebenfalls verdecken.
Verwende einen Custom-HTML-Block, platziere das Snippet vor dem schließenden </body>-Tag, und leere nach dem Speichern den Cache eventueller Caching-Plugins. Security-/Firewall-Plugins blockieren gelegentlich das Widget-Script – deaktiviere sie einzeln nacheinander, um die Ursache einzugrenzen.
Kommst du nicht weiter? Teste in einem Inkognito-Fenster und einem zweiten Browser, um Extensions und zwischengespeicherten Zustand auszuschließen, und kontaktiere dann den Support mit einem Screenshot und der Ausgabe der Browser-Konsole.

​
API & MCP

Verwalte Widgets programmatisch über die öffentliche REST-API (/api/v1/widget-connectors) und MCP-Tools (create_widget_connector, update_widget_connector, …). allowed_origins ist optional; leer oder weggelassen blockiert Fremd-Hosts. Scope: assistants:write. Der Zugriff auf Widget und AI Avatar richtet sich nach deinem Plan. Bei neuen Widgets ist unter Logo standardmäßig Assistant avatar ausgewählt. Das Bild folgt automatisch dem aktuellen Profilbild des Assistenten. Wähle Custom logo, um den Upload anzuzeigen. Klicke auf das Bild, um es hochzuladen oder zu ersetzen. Eigene Logos bleiben beim Quellenwechsel erhalten; mit Speichern veröffentlichst du die Änderung. Bestehende Widgets behalten ihr Logo, bis du die Quelle änderst.
Dieselben Optionen sind über die REST-API zur Widget-Aktualisierung und das MCP-Tool update_widget_connector verfügbar. Für einen Orb als Voice-Visualizer setzt du den Visualizer-Stil im Theme (satin oder halftone). Das Theme-Objekt ersetzt das aktuelle Theme – übernimm also alle anderen Theme-Einstellungen, die erhalten bleiben sollen.

​
Besucher per E-Mail oder SMS verifizieren

Aktiviere unter Einstellungen → Web-Widgets die Option Besucher vor dem Start verifizieren und wähle E-Mail oder SMS. Dies ist für direkte Plattform-Workspaces und den eigenen Workspace eines Resellers verfügbar, auch mit eigenem Branding. Kunden-Workspaces unter einem Reseller sind ausgeschlossen. E-Mail-Codes werden ohne zusätzliche Credits über die Plattform versendet. Ein eigener E-Mail-Absender im Workspace ist dafür nicht erforderlich. SMS-Verifizierung akzeptiert internationale Mobilnummern in unterstützten Ländern. Wähle die Ländervorwahl selbst oder nutze das anhand deines Standorts vorgeschlagene Land. Die Zustellung hängt von der Verfügbarkeit im Zielland ab. Beim Speichern mit aktivierter SMS-Verifizierung akzeptierst du den Preis, der neben SMS und im Info-Tooltip angezeigt wird: derzeit 80 Credits je angenommener Verifizierungs-SMS, auch bei erneutem Versand. Code-Prüfungen und Rückkehr mit gültiger Browser-Freigabe sind kostenlos. Abgelehnte SMS geben die Reservierung frei; unklare Sendungen bleiben bis zur Klärung offen. Verifizierungsnachrichten erscheinen nicht als Gespräche in History. Besucher geben die gewählte E-Mail-Adresse oder Telefonnummer im vorhandenen Formular ein und bestätigen einen sechsstelligen Code. SMS erfordert zusätzlich die Zustimmung zum Empfang. Codes laufen nach 10 Minuten ab; Prüfungen und erneuter Versand sind begrenzt. Erst danach starten Chat oder Anruf. Eine bestätigte E-Mail beweist nur diese E-Mail, eine bestätigte Telefonnummer nur diese Nummer. Andere Formularangaben werden nicht automatisch als bestätigte Identitäten verknüpft. Diesen Browser merken speichert eine widerrufbare Freigabe für 7 Tage. Ohne diese Option gilt sie höchstens 30 Minuten. Gespeichert wird nie der Code. Browser-Datenschutz kann die Freigabe auf die aktuelle Seite begrenzen. Diesen Browser vergessen, Ablauf und Änderungen an Widget-Konfiguration oder Verifizierungsmethode machen sie ungültig. Eine neue Adresse erfordert eine neue Verifizierung. Aktiviere Web-Chat und Web-Anrufe getrennt unter Einstellungen → Memory sowie in den Lese-/Schreibkanälen des Assistenten. Der Plan muss Memory enthalten und der Besucher muss separat zustimmen. Diese Web-Kanäle und SMS-Memory sind nur in Root-Workspaces verfügbar; gewöhnlicher SMS-Versand in Reseller-Kunden-Workspaces bleibt möglich. Anonyme Web-Sitzungen verwenden kein Kundengedächtnis. Scope, Kategorien, Widerruf und Aufbewahrung gelten weiterhin. Die Memory-Einwilligung lässt sich ohne neuen Code ändern. REST-API und MCP bieten dieselben Methoden, Verfügbarkeiten, SMS-Preise und Memory-Kanäle. Lies vor SMS-Aktivierung den aktuellen Preis und akzeptiere ihn ausdrücklich. Für E-Mail muss stattdessen die E-Mail-Verifizierung der Plattform verfügbar sein.

​
Wartezeit für Chat-Antworten

Unter Chattext → Antwortverzögerung stehen Deaktiviert, Feste Zeit und Dynamisch zur Auswahl. Deaktiviert fügt keine Wartezeit hinzu: Während der Assistent antwortet, erscheinen die Punkte; die Antwort wird sofort angezeigt, sobald sie eintrifft. Bei fester Zeit erscheint ein Regler. Dynamisch wählt für jede Antwort automatisch 1–10 Sekunden, ohne weitere Regler. Bei fester Zeit sind 0–10 Sekunden einstellbar. Die gewählte Dauer ist eine Mindestwartezeit; benötigt der Assistent länger, bleibt die Anzeige bestehen. Sprachanrufe sind davon unabhängig. Die Einstellung ist auch über die Widget-API und MCP verfügbar.

​
Datei- und Bild-Uploads

Besucher können einer Chat-Nachricht Dateien anhängen — über die Büroklammer, per Drag-and-drop auf das Eingabefeld oder durch Einfügen eines Bildes. Der Upload startet sofort und zeigt eine Vorschau; die Nachricht kann gesendet werden, sobald alle Dateien bereit sind. Unterstützt: PNG, JPG, WEBP, GIF, PDF, DOCX, TXT, MD, CSV und JSON, je bis 10 MB und 5 Dateien pro Nachricht. Bilder sieht der Assistent direkt (das Chat-Modell muss Bildeingaben unterstützen; andernfalls wird eine kurze generierte Beschreibung verwendet). Dokumente werden als Text gelesen und dem Assistenten mit der Nachricht übergeben. Anhänge erscheinen in der Besucher-Bubble, in der Chat-Vorschau des Assistenten im Dashboard und später in der History im Transkript des Chats — Bilder inline mit Bildbeschreibung, Dateien über einen temporären Link. Uploads sind standardmäßig aktiv. Pro Widget deaktivierst du sie unter Vorab-Formular → Datei- und Bild-Uploads im Chat erlauben (per API und MCP als chat_attachments_enabled im Widget-Theme). Die Dateien liegen im privaten Medienspeicher deines Workspaces beim Chat-Verlauf und werden durch deine Datenaufbewahrung entfernt, sobald Transkript oder Chat gelöscht werden, sowie beim Löschen des Workspaces.

​
Automationen für Webchat

Wähle Automations → Conversation started, deinen Assistenten und optional Web chat als Plattform. Der Trigger läuft, sobald sich der Besucher mit dem Chat verbindet, auch in der Widget-Vorschau. Mit Vorab-Formular passiert das nach Weiter und erfolgreicher Validierung; das bloße Öffnen des Widgets startet keine Unterhaltung. Eine erneute Verbindung mit derselben Sitzung erzeugt keinen weiteren Lauf. Mit einer HTTP Request-Aktion sendest du einen Webhook an dein System. Formularfelder stehen unter {{data.preform.values.customer_email}} bereit (ersetze den letzten Teil durch deinen Feldschlüssel); Eingabevariablen des Assistenten unter data.input_variables. Das Ereignis enthält Referenzen auf Unterhaltung, Assistent und Widget-Verbindung sowie verfügbare Kontaktdaten. Es ist eine asynchrone Benachrichtigung und liefert keine Variablen in den Assistenten-Prompt zurück.

​
Bildschirmfreigabe

Aktiviere Allgemein → Bildschirmfreigabe, damit Besucher dem KI-Assistenten während eines Chats oder Sprachanrufs einen Bildschirm, ein Fenster oder einen Browser-Tab zeigen können. Die Funktion ist standardmäßig aus und erfordert im Workspace-Tarif sowohl Web-Widget als auch Bildschirmfreigabe. Ohne diese Tarif-Funktion ist der Schalter deaktiviert. Der angezeigte Credit-Preis gilt pro tatsächlich geteilter Minute; Sprach- und Avatar-Kosten kommen bei Nutzung hinzu. Im Verlauf stehen Freigabedauer und Credit-Anteil. Datei- und Bild-Uploads behalten ihre eigene Einstellung. Nach Gesprächsbeginn wählt der Besucher das Bildschirm-Symbol neben dem Mikrofon (Sprachanruf) bzw. der Büroklammer (Chat), bestimmt im Browserdialog den Inhalt und stellt eine Frage dazu. Während der Freigabe ist das Symbol hervorgehoben; ein erneuter Klick beendet die Freigabe, wie beim Stummschalten des Mikrofons. Gesprächsende, Tabwechsel im Widget oder Schließen des Widgets beenden die Freigabe ebenfalls. System- und Tab-Audio werden nicht geteilt. Erforderlich sind ein Desktop-Browser mit Bildschirmaufnahme und HTTPS; auf Smartphones ist das Symbol ausgeblendet. Ergänze bei bestehenden iframe-Einbettungen display-capture im Attribut allow; die Permissions Policy der Website muss es ebenfalls erlauben. Script-Einbettungen enthalten diese Berechtigung automatisch. Der Assistent beschreibt sichtbare Inhalte und kann das Gerät nicht bedienen. Bildschirmbilder werden bei Bedarf verarbeitet und nicht als Anhänge gespeichert; Beschreibungen können im Gesprächsverlauf erscheinen. Die Einstellung ist über die REST-API zum Erstellen/Aktualisieren von Widgets, die MCP-Tools create_widget_connector und update_widget_connector sowie die CLI verfügbar:
Das Theme-Objekt ersetzt das bisherige Theme. Sende alle Einstellungen mit, die erhalten bleiben sollen.