Zum Hauptinhalt springen
Das Web-Widget ermöglicht es Besuchern, mit deinem KI-Agenten über Sprache, Chat oder beides gleichzeitig zu interagieren. Konfiguriere alles über den visuellen Editor – keine Programmierung erforderlich – und kopiere dann ein einziges Einbettungsskript.

​
dein Widget erstellen

Dialog zum Erstellen eines Widgets mit Widget-Name-Feld mit Platzhaltertext 'Widget-Name eingeben', Agent-Dropdown zur Auswahl, welcher Agent das Widget antreibt, Abbrechen- und Widget erstellen-Schaltflächen
Dialog zum Erstellen eines Widgets mit Widget-Name-Feld mit Platzhaltertext 'Widget-Name eingeben', Agent-Dropdown zur Auswahl, welcher Agent das Widget antreibt, Abbrechen- und Widget erstellen-Schaltflächen
1

Widget-Manager öffnen

Navigiere zu Web-Widgets im Dashboard
2

Neues Widget erstellen

Klicke auf Widget erstellen und gib an:
  • Widget-Name - Interne Bezeichnung für deine Referenz
  • Agent - Wähle aus, welcher Agent dieses Widget antreibt
3

Widget konfigurieren

Verwende die visuellen Editor-Tabs, um dein Widget anzupassen (siehe Abschnitte unten)
4

Änderungen speichern

Klicke auf Änderungen speichern unten rechts, um alle Updates zu übernehmen
5

Einbettungscode abrufen

Gehe zum Tab Exportieren und kopiere dein einzigartiges Einbettungsskript

​
Konfigurations-Tabs

Der Widget-Editor enthält sechs Tabs auf der linken Seite mit einer Live-Vorschau auf der rechten Seite, die sich aktualisiert, während du Änderungen vornimmst.
Widget-Konfigurationsoberfläche mit linker Seitenleiste mit Setup-, Erscheinungsbild-, Inhalt-, Funktionen-, Aktionen-, Datenschutz- und Export-Tabs, Hauptkonfigurationspanel mit Widget-Name-Feld, Agent-Dropdown, Anzeigename-Feld und Erlaubte Domains-Eingabe, Live-Vorschaupanel rechts mit Widget-Erscheinungsbild
Widget-Konfigurationsoberfläche mit linker Seitenleiste mit Setup-, Erscheinungsbild-, Inhalt-, Funktionen-, Aktionen-, Datenschutz- und Export-Tabs, Hauptkonfigurationspanel mit Widget-Name-Feld, Agent-Dropdown, Anzeigename-Feld und Erlaubte Domains-Eingabe, Live-Vorschaupanel rechts mit Widget-Erscheinungsbild
  • Widget-Name - Interne Bezeichnung in deiner Widget-Liste
  • Agent - Jederzeit zu einem anderen Agenten wechseln
  • Anzeigename - Kundenseitiger Name im Widget angezeigt
  • Erlaubte Domains - Beschränke, wo das Widget geladen werden kann (leer lassen, um alle Domains zu erlauben)
Themenvorlagen
  • Von kuratierten Farbpaletten starten
  • Durch Vorlagenoptionen scrollen
Layout
  • Position: unten links oder unten rechts
  • Widget-Größe und Abstände von Rändern
  • Anfangszustand: eingeklappt, erweitert oder immer offen
Avatar
  • Animierter “AI Pulse”-Effekt
  • Benutzerdefiniertes Bild hochladen
  • Mit externer Bild-URL verknüpfen
Farben & Verläufe
  • Hintergründe und CTA-Farben
  • Transkript-Blasen-Styling
  • Statusfarben und Orb-Verläufe
Randradius
  • Launcher-Button-Rundung
  • Chat-Fenster-Ecken
  • Nachrichtenblasen
  • Eingabefeld und CTA-Button
Animationen
  • Optionaler Wackel- oder Welleneffekt auf Anruf-Button
Sprachvorlagen
  • Vorkonfigurierte englische und deutsche Pakete
  • Setzt alle Widget-Beschriftungen und rechtlichen Texte
Willkommensnachrichten
  • Willkommens-Prompt-Text
  • Platzhaltertext
  • Statusnachrichten (zuhören, sprechen, denken, verbinden)
Feedback-Texte
  • Feedback-Aufforderung
  • Absenden-Button-Text
  • Danke-Nachricht
Beschriftungsüberschreibungen
  • Einzelne UI-Strings anpassen
  • Gruppen: Chat, Steuerelemente, Transkript, Audio, Barrierefreiheit
  • Nur-Chat-Modus - Sprache deaktivieren, nur Chat
  • Text während Anruf erlauben - Texteingabe während Sprachanrufen aktiv halten
  • Transkript-Umschaltung - Live-Transkript ein-/ausblenden
  • Stummschaltung - Stummschalt-Button anzeigen, damit Benutzer ihr Mikrofon stummschalten können
  • Anruf-Timer - Verstrichene Zeit anzeigen
  • Branding - “Powered by itellicoAI” ein-/ausblenden
  • Begrüßung überspringen - Begrüßung vermeiden, wenn Benutzer zuerst tippt
  • Feedback-Sammlung - Nachgesprächs-Feedback aktivieren (noch nicht gespeichert, demnächst verfügbar)
Konfiguriere clientseitige Tools, die dein Agent während Gesprächen aufrufen kann, um Links anzuzeigen, Seiten zu öffnen oder Telefonanrufe im Browser des Benutzers auszulösen.
Client-Tools: Im Gegensatz zu API-Aktionen, die auf deinem Server laufen, werden Client-Tools direkt im Browser des Benutzers ausgeführt. Das LLM entscheidet basierend auf dem Gesprächskontext und der von dir bereitgestellten Trigger-Beschreibung, wann diese Tools aufgerufen werden.
Füge bis zu fünf Client-Tools hinzu:
  • Button-Text - Dem Benutzer angezeigte Beschriftung (z.B. “Preise ansehen”, “Support anrufen”)
  • URL - Weblink (https://) oder Telefonnummer (tel:)
  • Trigger - Beschreibe, wann der Agent dieses Tool aufrufen soll (z.B. “Wenn Benutzer nach Preisen fragt”, “Wenn Benutzer mit einem Menschen sprechen möchte”)
  • Verhalten:
    • Auto-Klick - Link automatisch öffnen, wenn Tool aufgerufen wird
    • Auf Antwort warten - Button anzeigen und auf Benutzerklick warten (mit optionalem Timeout)
    • Anruf bei Klick beenden - Gespräch automatisch beenden, nachdem Benutzer geklickt hat
Telefonnummer-Links (tel:) beenden den Anruf automatisch, nachdem der Benutzer geklickt hat.
AGB & Datenschutz
  • Markdown-Editor für benutzerdefinierten rechtlichen Text
  • Standardtext für neue Widgets bereitgestellt
Einwilligungseinstellungen
  • Akzeptieren/Ablehnen-Button-Beschriftungen
  • Lokaler Speicherschlüssel zum Merken der Einwilligung
  • Einwilligung vor Aktivierung erforderlich
Erstelle teilbare Demo-Links für Stakeholder, Kunden oder Teammitglieder, um dein Widget zu testen, ohne es auf einer Website einzubetten.Teilbare Links erstellen
  • Klicke auf Link erstellen, um eine Demo-Seiten-URL zu generieren
  • Füge optional einen Namen zur Identifizierung des Links hinzu
  • Setze Ablaufdatum: 24 Stunden, 7 Tage, 30 Tage, nie oder benutzerdefiniertes Datum
  • Begrenze bei Bedarf die maximalen Demos
Links verwalten
  • Zeige alle vorhandenen Teilen-Links mit Erstellungsdatum und Ablauf an
  • Verfolge Demo-Anzahl und Aufrufstatistiken
  • Bearbeite Link-Einstellungen (Name, Ablauf, Max. Demos)
  • Lösche Links, die nicht mehr benötigt werden
Sicherheitshinweise
  • Teilen-Links sind öffentlich zugänglich—behandle sie wie Passwörter
  • Setze Ablaufdaten für temporären Zugang
  • Nutze Demo-Limits für kontrolliertes Testen
  • Lösche Links, wenn sie nicht mehr benötigt werden
Einbettungsskript
  • Einzigartige Loader-URL für dein Widget
  • Vor </body>-Tag kopieren und einfügen
Installationsanleitungen
  • Schritt-für-Schritt-Anweisungen
  • Plattformspezifische Tipps:
    • Google Tag Manager
    • WordPress
    • Webflow
    • Shopify
    • Wix
    • Squarespace

​
dein Widget bereitstellen

1

In der Vorschau testen

Verwende die Live-Vorschau auf der rechten Seite des Konfigurators, um dein Widget zu testen. Klicke bei Bedarf auf das Aktualisierungssymbol.
2

Einbettungsskript kopieren

Gehe zum Tab Exportieren und kopiere dein einzigartiges Einbettungsskript.
3

Zu deiner Website hinzufügen

Füge das Skript direkt vor dem schließenden </body>-Tag auf deiner Website ein.
4

Live testen

Lade deine Website, klicke auf das Widget und teste ein Sprach- oder Chat-Gespräch. Prüfe Gespräche, um zu verifizieren, dass die Sitzung aufgezeichnet wurde.
Konfigurationsänderungen, die du im Dashboard vornimmst, werden automatisch auf dein eingebettetes Widget angewendet. Das Einbettungsskript muss nicht aktualisiert werden. Wenn Änderungen nicht sofort erscheinen, führe eine harte Aktualisierung durch (Strg+Umschalt+R oder Cmd+Umschalt+R).
Hinweise:
  • Domain-Beschränkungen gelten sofort. Wenn konfiguriert, lädt das Widget nur auf erlaubten Domains.
  • HTTPS erforderlich für Mikrofonzugriff (außer localhost).
  • Mobilgeräte-responsiv - Das Widget passt sich automatisch an mobile Bildschirme an.
  • Erstelle separate Widgets für verschiedene Websites oder Branding-Anforderungen.

​
Fehlerbehebung

  • Prüfe Browser-Konsole auf JavaScript-Fehler
  • Überprüfe, ob erlaubte Domains deine Website einschließen
  • Stelle sicher, dass Skript vor </body>-Tag platziert ist
  • Prüfe Content Security Policy-Einstellungen
  • HTTPS erforderlich (außer localhost)
  • Benutzer muss Berechtigung manuell erteilen
  • Prüfe Browser-Mikrofoneinstellungen
  • Einige Browser blockieren beim ersten Besuch
  • WebRTC erfordert offene UDP-Ports
  • Unternehmens-VPNs können WebRTC blockieren
  • Teste von anderem Netzwerk
  • Prüfe Browser-WebRTC-Statistiken unter chrome://webrtc-internals
  • Klicke auf Änderungen speichern im Konfigurator
  • Aktualisiere deine Website hart (Strg+Umschalt+R oder Cmd+Umschalt+R)
  • Leere Browser-Cache bei Bedarf
  • Überprüfe, dass du das richtige Widget bearbeitest

​
Nächste Schritte

Produktions-Best Practices

Erfahre, wie du deine Widget-Bereitstellung wartest und skalierst

Conversion optimieren

Verbessere Engagement und Benutzererfahrung