Chat-Widget #

Integrationsanleitung für das Website-Chat-Widget #

Fügen Sie Ihrer Website ein benutzerfreundliches Chat-Widget hinzu, das es Besuchern ermöglicht, direkt über die Oberfläche Ihrer Website zu kommunizieren. Der Integrationsprozess ist unkompliziert und stattet Ihre Website mit integrierten Messaging-Funktionen aus.

Erstellen und Konfigurieren des Chat-Widgets #

So gelangen Sie dorthin:

1. Klicken Sie unten in der linken Seitenleiste auf Einstellungen. (Auf einem Smartphone tippen Sie zuerst auf das Menüsymbol ☰ in der oberen Ecke, um die Seitenleiste zu öffnen.)
2. Klicken Sie in der linken Einstellungsleiste unter Kanäle auf Kanäle.
3. Suchen Sie die Karte Website-Chat-Widget.
4. Wenn Sie noch kein Widget haben, klicken Sie auf Verbinden, um eines mit einem Anzeigenamen und einer Begrüßungsnachricht zu erstellen.
5. Sobald es erstellt wurde, können Sie jederzeit auf Verwalten klicken, um das vollständige Konfigurationspanel zu öffnen.

Die von Ihnen gespeicherten Änderungen werden automatisch auf Ihr Live-Widget angewendet – Sie müssen den Installationscode nach einer Änderung nicht erneut einfügen.

Eine Live-Vorschau befindet sich direkt neben den Einstellungen: eine Beispiel-Webseite, auf der Ihr tatsächliches Widget läuft und Ihre Farben, Position, Logo, Launcher-Symbol sowie das proaktive Popup genau so anzeigt, wie Besucher sie sehen werden. Sie folgt Ihren Bearbeitungen in Echtzeit, sodass Sie nicht speichern müssen, um zu sehen, wie eine Farb- oder Designänderung aussieht. Sie können sogar innerhalb der Vorschau auf die Chat-Schaltfläche klicken, um das Widget zu öffnen und es auszuprobieren.

Was Sie anpassen können #

Das Verwaltungs-Panel ist in vier Abschnitte unterteilt.

Erscheinungsbild #

• Stil-Design: Gestalten Sie das gesamte Widget mit einem Klick um. Sechs Designs legen jeweils das Aussehen, die Farben, die Ecken und die Schriftart fest: Classic (der ursprüngliche solide Look – eine farbige Kopfzeile auf einem flachen Panel), Glass (ein mattiertes, durchscheinendes Panel, das die Seite dahinter leicht weichzeichnet, wobei die Kopfzeile und das Nachrichtenfeld als abgerundete Karten darin schweben), Midnight (Glass in dunklen Farben), Bloom (sanftes Rosa, besonders abgerundet), Ember (warmes orangefarbenes Glass) und Mono (Schwarz-Weiß, scharfe Ecken). Ein Design ist ein Ausgangspunkt – nachdem Sie eines ausgewählt haben, können Sie dennoch jede Farbe oder Einstellung individuell anpassen. Neue Widgets starten mit Glass; der Wechsel erfolgt sofort überall dort, wo das Widget eingebettet ist, ohne dass Änderungen am Code Ihrer Website erforderlich sind.
• Ecken und Schriftart: Zwei unabhängige Stil-Regler. Ecken legt fest, wie abgerundet das Panel, die Sprechblasen und die Schaltflächen sind (Rund, Weich oder Scharf), und Schriftart wählt die Schriftart aus, die Besucher sehen (Standard, Serif, Rounded oder Mono) – die Schriftarten stammen von dem, was bereits auf dem Gerät des Besuchers vorhanden ist, sodass nichts Zusätzliches auf Ihrer Website geladen wird.
• Anzeigename: Wird in der Widget-Kopfzeile angezeigt.
• Logo: Laden Sie ein Bild hoch, das oben im Chat erscheint. Verwenden Sie Ihr Firmenlogo oder ein freundliches Porträtfoto.
• Launcher-Symbol: Das Symbol auf der schwebenden Chat-Schaltfläche selbst. Wählen Sie eines der integrierten Symbole (Sprechblase, Papierflieger, Fragezeichen und mehr), verwenden Sie Ihr hochgeladenes Logo wieder oder laden Sie ein separates eigenes Bild hoch – praktisch, wenn Sie ein Foto eines echten Teammitglieds zeigen möchten, das Besucher begrüßt.
• Farben: Fünf Farben, von denen jede den Teil des Widgets benennt, den sie einfärbt. Markenfarbe ist die schwebende Schaltfläche, die Kopfzeile und die eigenen Nachrichten des Besuchers, mit Markentext für den Text, der darauf liegt. Bot-Sprechblase ist der Hintergrund der Antworten Ihres Bots und der Tipp-Anzeige, mit Bot-Sprechblasen-Text für die Wörter darin und die animierten Tipp-Punkte. Chat-Fenster ist das Panel hinter allen Nachrichten. Wählen Sie eine Farbe für die Bot-Sprechblase, die sich deutlich von Ihrer Markenfarbe unterscheidet – wenn beide übereinstimmen, haben beide Seiten des Gesprächs die gleiche Farbe und Besucher können die Antworten Ihres Bots nicht von ihren eigenen unterscheiden. Eine hellgraue Bot-Sprechblase mit dunklem Text neben Ihrer Markenfarbe ist die sichere Kombination.
• Position: Platzieren Sie die schwebende Chat-Schaltfläche in der unteren rechten oder unteren linken Ecke, mit horizontalem und vertikalem Versatz (in Pixeln), falls sie etwas anderes auf Ihrer Seite überlappt.
• Startfragen: Schnellantwort-Vorschläge (anklickbare Chips), die im Chat angezeigt werden, damit Besucher mit einem Tippen loslegen können, anstatt zu tippen – zum Beispiel „Was sind Ihre Preise?“ oder „Bieten Sie Support an?“ – bis zu 10.
• Fußzeile: Eine optionale kleine Zeile mit Ihrem eigenen Text unter dem Nachrichtenfeld, zum Beispiel „Powered by Your Agency“. Sie ist standardmäßig deaktiviert, und es wird nichts unter dem Nachrichtenfeld angezeigt, solange sie deaktiviert ist. Aktivieren Sie sie, geben Sie Ihren Text ein (bis zu 40 Zeichen) und fügen Sie bei Bedarf einen Link hinzu, der mit https:// beginnt; Besucher, die auf den Text klicken, öffnen diese Seite in einem neuen Tab. Agenturen nutzen dies, um ihren eigenen Namen auf den Widgets zu platzieren, die sie für Kunden erstellen.

Verhalten #

• Begrüßungsnachricht: Die erste Nachricht, die Besucher sehen, wenn sie den Chat öffnen (zum Beispiel: „Wie kann ich Ihnen helfen?“).
• Ton: Spielen Sie einen Ton ab, wenn eine neue Nachricht im Chat eingeht.
• Benachrichtigungsberechtigung anfragen: Fordern Sie Besucher optional dazu auf, Browser-Benachrichtigungen zuzulassen, damit sie auch dann über Antworten informiert werden, wenn sie den Tab gewechselt haben.
• Proaktive Popup-Sprechblase: Eine optionale kleine Sprechblase, die neben dem Chat-Button erscheint, um Besucher einzuladen. Aktivieren Sie diese, um die Nachricht, den Text für die Annehmen/Ablehnen-Schaltflächen sowie die Wartezeit in Sekunden bis zum Erscheinen festzulegen. Die Sprechblase schließt sich nach 20 Sekunden automatisch, wenn der Besucher nicht darauf klickt. Dies ist der einzige Text, den das Widget neben dem Chat-Button anzeigt: Es gibt keine Einstellung für eine dauerhafte Beschriftung neben dem Button.
• KI-Antwortgeschwindigkeit: Ein Schieberegler zwischen Langsamer (menschlicher – die KI wartet einen Moment vor der Antwort) und Maximale Geschwindigkeit (roboterhafter – Antworten erfolgen so schnell wie möglich). „Ausgewogen“ liegt in der Mitte. Die erste Nachricht einer Antwort erscheint mit der durch den Schieberegler festgelegten Verzögerung, wobei kurz zuvor die Tipp-Anzeige erscheint.
• Beschäftigt-Hinweis anzeigen, während die KI arbeitet: Standardmäßig deaktiviert. Wenn eine Antwort länger als ein paar Sekunden dauert, zum Beispiel weil Ihr Agent etwas in einem anderen System nachschlägt, sehen Besucher neben den Tipp-Punkten eine kurze Zeile: „Arbeite an Ihrer Antwort“ nach 5 Sekunden, „Suche das für Sie heraus“ nach 15 Sekunden, dann „Bin noch dran, fast fertig“ und eine Entschuldigung für die Wartezeit, falls es länger dauert. Schnelle Antworten zeigen weiterhin nur die Punkte. Die Zeile folgt der Sprache des Widgets und erscheint nur, während Ihre KI tatsächlich an einer Antwort arbeitet, niemals wenn die KI für diesen Chat deaktiviert ist oder ein Mitarbeiter übernommen hat.

Sprachen #

Das Widget ist von sich aus mehrsprachig – es muss nichts aktiviert werden.

• Die Sprache des Besuchers wird automatisch erkannt. Zuerst wird die Sprache geprüft, die auf Ihrer Seite im HTML-Code (<html lang="it">) angegeben ist. Ist diese nicht verfügbar, wird die Sprache des Browsers des Besuchers verwendet. Wenn keine der Sprachen von uns unterstützt wird, werden die eigenen Beschriftungen des Widgets in der Sprache angezeigt, in der Sie Ihre Begrüßungsnachricht verfasst haben. Ihre Begrüßungsnachricht, das Popup-Fenster und die Startfragen erscheinen genau so, wie Sie sie geschrieben haben.
• Eine Seitensprache, die Ihrer Begrüßung widerspricht, wird ignoriert. Manche Website-Baukästen fügen lang="en" auf jeder Seite ein, unabhängig von der Sprache der Website. Wenn die Seite eine Sprache angibt, Sie Ihre Begrüßungsnachricht aber in einer anderen verfasst haben, behandelt das Widget den Seitenwert als Standardeinstellung des Baukastens: Es folgt stattdessen der Browsersprache des Besuchers. Ist diese nicht unterstützt, wird die von Ihnen gewählte Sprache verwendet. Eine Seite, die ihren lang-Wert ändert, wenn der Besucher eine Sprache auf Ihrer Website auswählt, wird immer berücksichtigt. Wenn Sie sich nicht auf diese Automatismen verlassen möchten, legen Sie die Sprache im Bereich „Verhalten“ fest.
• Oder wählen Sie selbst eine Sprache. Das Feld Widget-Sprache im Bereich „Verhalten“ ist standardmäßig auf „Auto“ eingestellt, was der oben beschriebenen Erkennung entspricht. Wählen Sie dort eine Sprache aus, damit die eigenen Beschriftungen des Widgets (die Felder für Vorname, E-Mail und Telefon im Besucherformular sowie deren Beispieltexte, der Datenschutzhinweis und die Schaltflächen) in dieser Sprache bleiben, unabhängig davon, was die Seite oder der Browser vorgibt. Verwenden Sie dies, wenn Ihr Website-Baukasten nicht die richtige Sprache angibt oder wenn Sie eine feste Sprache für alle Besucher wünschen.
• Unterstützte Sprachen: Englisch, Niederländisch, Deutsch, Französisch, Spanisch, Italienisch, Portugiesisch, Rumänisch, Polnisch, Arabisch, Finnisch, Philippinisch, Slowenisch, Thailändisch, Bengalisch, Japanisch, Norwegisch (Bokmål) und Türkisch. Dies ist die Liste für die Schaltflächen und Beschriftungen des Widgets.
• Sprachen, die von rechts nach links gelesen werden, werden entsprechend dargestellt. Für Besucher, die Arabisch, Hebräisch, Persisch oder Urdu verwenden, spiegelt sich das gesamte Chat-Fenster: Die Kopfzeile, die Nachrichtenblasen, die Tipp-Animation, das Besucherformular und das Nachrichtenfeld beginnen alle auf der rechten Seite. Die Schaltfläche für die Sprechblase bleibt in der von Ihnen gewählten Ecke. Besucher, die Hebräisch, Persisch oder Urdu verwenden, sehen die Beschriftungen auf Englisch (oder in der von Ihnen festgelegten Sprache), aber das Layout folgt ihrer Sprache. Eine Nachricht, die in einer anderen Richtung geschrieben wurde, wie z. B. eine englische Antwort in einem arabischen Chat, wird weiterhin in der richtigen Reihenfolge gelesen.
• Ihre Nachrichten werden für Sie übersetzt. Jedes Mal, wenn Sie speichern, werden Ihre Begrüßungsnachricht, das proaktive Popup-Fenster und die Startfragen in alle achtzehn oben genannten Sprachen übersetzt. Sie müssen sie nur einmal schreiben, in der Sprache Ihrer Wahl: Die Sprache, in der Sie geschrieben haben, wird automatisch erkannt, diese Version wird wortgetreu beibehalten und alle anderen Sprachen sind Übersetzungen davon. Es spielt keine Rolle, auf welche Sprache Ihr Konto eingestellt ist.
• Schreiben Sie Ihre eigene Version für eine Sprache. Im Bereich Übersetzungen des Verwaltungs-Panels, direkt unter „Verhalten“, können Sie die automatische Übersetzung durch Ihre eigene Formulierung ersetzen, zum Beispiel formelles Spanisch („usted“), wo die automatische Übersetzung informell ist. Wählen Sie eine Sprache unter Sprache aus und füllen Sie dann eines der folgenden Felder aus: Begrüßungsnachricht, Popup-Nachricht, den Annehmen-Text und Ablehnen-Text des Popups (angezeigt, während die Sprechblase aktiv ist) sowie Startfragen. Jedes Feld zeigt die automatische Übersetzung in Grau an; Mit automatischer Übersetzung beginnen kopiert diese, damit Sie sie bearbeiten können. Alles, was Sie leer lassen, behält die automatische Übersetzung bei. Sprachen, die Sie selbst verfasst haben, werden zuerst aufgelistet und mit Ihre eigene Formulierung gekennzeichnet. Mit Meine (Sprache)-Formulierung entfernen kehren Sie zur automatischen Übersetzung für diese Sprache zurück. Ihre eigene Formulierung bleibt erhalten, wenn Sie später den Originaltext bearbeiten; nur die automatischen Übersetzungen werden neu erstellt.
• Die Popup-Schaltflächen werden ebenfalls übersetzt. Die „Annehmen“- und „Ablehnen“-Schaltflächen des proaktiven Popups werden zusammen mit Ihren anderen Nachrichten übersetzt, sodass ein spanischer Besucher keine englischen Schaltflächen mehr sieht.
• Schreiben Sie jede Nachricht nur in einer Sprache. Wenn Sie zwei Sprachen in dasselbe Feld schreiben – zum Beispiel eine englische Zeile und eine italienische Zeile –, wird das Ganze als eine einzige Nachricht behandelt und so übersetzt, wie es ist. Ein italienischer Besucher sieht dann denselben Satz zweimal. Schreiben Sie ihn einmal, in der Sprache Ihrer Wahl.
• Die KI antwortet in der Sprache des Besuchers. Egal, in welcher Sprache jemand schreibt, Ihr Agent antwortet in derselben Sprache, unabhängig davon, in welcher Sprache die Beschriftungen des Widgets angezeigt werden. Wenn Sie möchten, dass er immer in einer festen Sprache antwortet, legen Sie dies in den Anweisungen für Ihren Agenten fest.
• Legen Sie die Sprache pro Seite im Einbettungscode fest. Betreiben Sie ein Widget auf einer englischen Website und eine übersetzte Kopie davon? Fügen Sie data-lang zum Skript-Tag des Widgets auf jeder Seite hinzu. data-lang="es" zeigt das Widget auf dieser Seite auf Spanisch an, unabhängig davon, was der Browser sagt; data-lang="page" sorgt dafür, dass es dem eigenen <html lang="...">-Wert der Seite folgt (sodass lang="es-MX" Spanisch ergibt), selbst wenn Ihre Begrüßungsnachricht in einer anderen Sprache verfasst ist. Dies hat Vorrang vor dem Feld Widget-Sprache, welches wiederum Vorrang vor der automatischen Erkennung hat. Zum Beispiel:

<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID" data-lang="page" defer></script>

Behalten Sie den Einbettungscode aus dem Verwaltungsbereich bei und fügen Sie nur das Attribut data-lang hinzu. Für ein Inline-Chat-Panel fügen Sie data-lang zum <div data-chat-widget="…"> hinzu.

Tipp: Wenn Ihre Website kein lang-Attribut in ihrem <html>-Tag festgelegt hat, fügen Sie eines hinzu. Dies ist das stärkste Signal, das wir haben, um die richtige Sprache auszuwählen, insbesondere für Besucher, die aus dem Ausland surfen.

Lead-Erfassung & Datenschutz #

• Besucherinformationen erfassen: Standardmäßig deaktiviert. Wenn aktiviert, werden Besucher vor Beginn des Gesprächs nach ihrem Namen und ihrer E-Mail-Adresse (und optional Telefonnummer) gefragt, damit Sie den Lead erfassen, selbst wenn der Besucher den Chat vorzeitig verlässt.
• Formulartitel und Formular-Untertitel: Passen Sie die Überschrift und die kurze Erklärung an, die über dem Formular angezeigt werden.
• Telefonnummer erfassen: Aktivieren Sie dies, um zusätzlich nach einer Telefonnummer zu fragen; wenn deaktiviert, werden nur Name und E-Mail-Adresse erfasst.
• Nachnamen erfassen: Standardmäßig deaktiviert. Aktivieren Sie dies, um direkt nach dem Vornamen ein Pflichtfeld für den Nachnamen hinzuzufügen. Dieser wird beim Kontakt als Nachname gespeichert, sodass Ihre KI und alle Informationen, die sie in Ihren eigenen Systemen nachschlägt, den vollständigen Namen ab der ersten Nachricht kennen. Besucher, die das Formular bereits ausgefüllt haben, bevor Sie diese Option aktiviert haben, werden nicht erneut gefragt.
• E-Mails bei ungelesenen Antworten an Besucher: Ein Besucher, der eine E-Mail-Adresse hinterlassen hat und Ihre Antwort nach 15 Minuten noch nicht gesehen hat, erhält eine E-Mail, die ihn zurück zum Chat führt. Deaktivieren Sie dies unter Einstellungen → Benachrichtigungen → Chat-Widget-Besucher. Siehe E-Mails an Chat-Widget-Besucher.

Ein Besucher hat eine Telefonnummer hinterlassen und hat Ihre Website verlassen – kann ich auf WhatsApp fortfahren? Ja. Öffnen Sie den Chat und wählen Sie Auf WhatsApp fortfahren aus dem Drei-Punkte-Menü (WhatsApp Web oder WhatsApp Business muss verbunden sein). Your AI Connector erstellt eine verknüpfte WhatsApp-Konversation für dieselbe Person, kopiert deren Namen, E-Mail und Details, und die KI übernimmt das, was auf Ihrer Website gesagt wurde, sodass sich niemand wiederholen muss. Der Website-Chat bleibt bestehen und beide Chats verweisen unter Verknüpfte Konversationen im Kontaktbereich aufeinander. Siehe Chat-Oberfläche.

Ein Besucher hat seine E-Mail-Adresse hinterlassen, aber nicht gebucht – kann ich per E-Mail nachfassen? Ja, mit einer Automatisierung. Ein Schritt vom Typ Kontakt erstellen mit dem auf E-Mail gesetzten Kanal wandelt die vom Besucher hinterlassene Adresse in einen E-Mail-Kontakt in Ihrem verbundenen E-Mail-Kanal um, und ein darauf folgender Schritt vom Typ Nachricht senden wird als E-Mail verschickt; Antworten landen in Chats für Ihren E-Mail-Agenten. Das vollständige Rezept, einschließlich der Anleitung, wie die Sequenz gestoppt wird, sobald der Besucher gebucht hat, finden Sie unter Automatisierungen → Beispiel: E-Mail-Nachfassaktionen für Website-Chat-Leads.

Kann der KI-Agent den Wechsel zu WhatsApp selbst anbieten? Ja, und dafür ist keine zusätzliche Funktion erforderlich – eine Zeile in den Anweisungen des Agenten reicht aus. Erstellen Sie einen Short Link für Ihre WhatsApp-Nummer mit einer vorausgefüllten Nachricht wie „Hallo, ich habe auf Ihrer Website gechattet und möchte hier fortfahren“, und weisen Sie den Agenten dann an, wann er diesen senden soll, zum Beispiel: „Wenn der Besucher gehen muss, später fortfahren möchte oder nach WhatsApp fragt, bieten Sie an, dort weiterzumachen, und senden Sie diesen Link: (Ihr Short Link)“. Links im Widget sind anklickbar, sodass der Besucher in WhatsApp landet, Ihre Nummer ausgewählt ist und die Nachricht bereits vorausgefüllt ist. Die erste Nachricht des Besuchers öffnet dann eine WhatsApp-Konversation in Ihrem Posteingang. Wenn der Besucher die Telefonnummer, von der aus er schreibt (mit Ländervorwahl), im Widget-Formular hinterlassen hat, verknüpft Your AI Connector die beiden Konversationen automatisch und die KI auf WhatsApp kennt bereits den Website-Chat, genau wie bei Auf WhatsApp fortfahren. Wenn keine Telefonnummer erfasst wurde, sind die beiden Chats nicht verknüpft. Achten Sie daher darauf, dass die vorausgefüllte Nachricht spezifisch genug ist, damit der WhatsApp-Agent weiß, woher die Person kommt.

• Bestätigung der Datenschutzrichtlinie erforderlich: Verlangen Sie optional, dass Besucher Ihre Datenschutzrichtlinie akzeptieren, bevor sie chatten, und legen Sie die URL fest, auf die sie verweist.

Was speichert das Widget im Browser eines Besuchers und muss ich es hinter einem Cookie-Banner platzieren? Es wird nichts gespeichert, nur weil eine Seite geladen wird. Das Widget schreibt keine Cookies und nutzt keinen Browserspeicher, bis der Besucher sich entscheidet zu chatten: eine erste Nachricht sendet, das Besucher-Info-Formular ausfüllt oder Ihre Datenschutzrichtlinie akzeptiert. Ab diesem Moment speichert es eine zufällige Konversations-ID und eine Kopie der Konversation in diesem Browser als Erstanbieter-Speicher auf Ihrer eigenen Domain, sodass der Chat bei einer Rückkehr des Besuchers weiterhin verfügbar ist. Es lädt keine Analyse- oder Tracking-Skripte und setzt keine Drittanbieter-Cookies. Da nichts geschrieben wird, bevor der Besucher den Chat initiiert, fällt dies unter die Speicherung, die für einen vom Besucher angeforderten Dienst unbedingt erforderlich ist. Sie können es daher laden, ohne es hinter einem Einwilligungsbanner zu verstecken. Falls Ihre Website ohnehin ein Consent-Tool verwendet, ist es in Ordnung, das Widget dahinter zu platzieren; der Chat erscheint dann einfach, sobald der Besucher zustimmt.

Kanäle & Einbettung #

• Anhang-Schaltfläche: Ermöglicht Besuchern das Senden von Bildern und Dateien im Chat.
• Emoji-Auswahl: Fügt neben dem Nachrichtenfeld eine Emoji-Auswahl hinzu.
• Kanal-Links: Fügen Sie optional WhatsApp-, Instagram- oder Messenger-Links hinzu, damit Besucher das Gespräch auf der von ihnen bevorzugten Plattform fortsetzen können. Dies wird erst angezeigt, nachdem Sie eine WhatsApp-Nummer (WhatsApp Business oder WhatsApp Web), Instagram oder Messenger verbunden haben. Das Aktivieren des WhatsApp-Links fügt Ihre verbundene Nummer automatisch ein; der Link bleibt bearbeitbar, sodass Sie nach einem Nummernwechsel die neue Nummer dort eingeben können.
• Aktionsschaltflächen: Eine Reihe von Verknüpfungen oben im Chat, die den Besucher an einen anderen Ort führen, anstatt in ein Gespräch – siehe Aktionsschaltflächen weiter unten.
• Domain-Whitelist: Schränken Sie ein, welche Websites Ihr Widget einbetten dürfen. Fügen Sie die Domains hinzu, auf denen Sie es installiert haben (z. B. example.com oder *.example.com); lassen Sie das Feld leer, um alle Domains zuzulassen.
• Blockierte Länder: Halten Sie das Widget von Besuchern in Ländern fern, die Sie nicht bedienen. Besucher, deren Netzwerkstandort in einem von Ihnen ausgewählten Land liegt, sehen das Widget nie, und jeder Chat, den sie zu starten versuchen, wird abgelehnt. Lassen Sie das Feld leer, um alle zuzulassen. Siehe Bots und unnötigen Verbrauch von Guthaben verhindern weiter unten.
• Diese Chats weiterleiten an: Wählen Sie den Agenten aus, der Chats bearbeiten soll, die über den Code eingehen, den Sie gleich kopieren werden. Belassen Sie es auf Kontostandard, um Ihre normale Chat-Widget-Weiterleitung zu verwenden. Siehe Verschiedene Seiten an verschiedene Agenten senden weiter unten.
• Einbettungs-Snippet: Wählen Sie Schwebende Blase oder Inline und kopieren Sie den Installationscode (siehe unten).
• Client-Demo-Link: Fügen Sie eine beliebige Website-Adresse ein und klicken Sie auf Link erstellen, um einen teilbaren Link zu erhalten, der diese Seite mit Ihrem darauf laufenden Widget öffnet, ohne dass beim Empfänger etwas installiert werden muss. Jeder von Ihnen erstellte Link wird aufgelistet, und Sie können jeden einzelnen deaktivieren. Siehe Das Widget auf der Website einer anderen Person anzeigen weiter unten.
• Link teilen: Ein fertiger Link, der Ihren Assistenten auf einer eigenen Seite im Vollbildmodus öffnet, ohne dass eine Website erforderlich ist. Kopieren Sie ihn und senden Sie ihn überall hin. Siehe Einen direkten Link zum Chat teilen weiter unten.

Unten im Panel entfernt die Aktion Chat-Widget löschen das Widget sofort von Ihrer Website – dies kann nicht rückgängig gemacht werden und Besucher sehen die Chat-Sprechblase nicht mehr.

Aktionsschaltflächen #

Manche Besucher möchten nicht chatten. Sie möchten Ihre Telefonnummer, Ihre Adresse oder Ihre E-Mail-Adresse, und zwar mit einem einzigen Tippen. Aktionsschaltflächen sind eine Reihe von Verknüpfungen oben im Chat-Bereich, die genau das ermöglichen.

Fügen Sie bis zu sechs Schaltflächen hinzu. Jede hat eine Beschriftung (der Text auf der Schaltfläche) und ein Ziel, wobei das Ziel von der gewählten Aktion abhängt:

Diese Schaltflächen verbrauchen keine Credits. Das Tippen auf eine Schaltfläche sendet keine Nachricht und startet kein Gespräch – es führt den Besucher lediglich dorthin, wo er hinwollte. Nur ein tatsächliches Gespräch mit Ihrem KI-Agenten verbraucht Credits, genau wie bisher.

Ein paar Dinge, die Sie wissen sollten:

• Die Schaltflächen bleiben sichtbar, während der Besucher chattet. Jemand kann zwei Fragen stellen und danach trotzdem auf Wegbeschreibung tippen, ohne die Seite neu zu laden.
• Ihre Beschriftungen werden genau so angezeigt, wie Sie sie geschrieben haben. Im Gegensatz zu Ihrer Begrüßungsnachricht und den Starter-Fragen werden Schaltflächenbeschriftungen nicht automatisch übersetzt. Wenn Sie Besucher in mehreren Sprachen bedienen, halten Sie die Beschriftungen daher kurz und eindeutig (oder schreiben Sie sie in Ihrer Hauptsprache).
• Füllen Sie eine Schaltfläche korrekt aus, sonst wird sie nicht gespeichert. Wenn eine Telefonnummer, E-Mail-Adresse oder ein Link ungültig ist, weist das Bedienfeld darauf hin und blockiert Änderungen speichern, anstatt eine Schaltfläche zu veröffentlichen, die auf Ihrer Website keine Funktion hätte.
• Es sind keine FAQ-Antworten. Aktionsschaltflächen leiten Personen nur weiter; sie antworten nicht mit vorgefertigten Texten. Fragen sind die Aufgabe Ihres KI-Agenten, der sie aus Ihrer Wissensdatenbank beantwortet. Wenn Sie Vorschläge machen möchten, was gefragt werden kann, verwenden Sie unter „Erscheinungsbild“ die Starter-Fragen.

Was Sie nicht anpassen können #

Das Verwaltungs-Panel umfasst alle verfügbaren Optionen. Insbesondere:

• Kein benutzerdefiniertes CSS oder Stylesheet. Das Styling beschränkt sich auf das, was die Themen-, Ecken-, Schriftarten- und Farbauswahl bieten – Sie können kein eigenes CSS in das Widget einfügen, und Regeln auf Ihrer Seite wirken sich nicht darauf aus.
• Kein benutzerdefinierter Platzhaltertext im Nachrichtenfeld.
• Keine Videoeinbettung innerhalb des Chats.

Wenn einer dieser Punkte ein Hindernis für Sie darstellt, bietet Ihnen die Inline-Einbettung die größte Kontrolle: Das Widget befindet sich in einem Container auf Ihrer eigenen Seite, den Sie selbst in Größe und Position bestimmen.

Bots und Kreditverbrauch fernhalten #

Jede KI-Antwort kostet Kredite, daher ist ein Skript (oder eine gelangweilte Person), das einen Chat nach dem anderen auf Ihrer Website eröffnet, das Einzige, wogegen sich ein öffentliches Widget verteidigen muss. Das Widget erledigt das meiste davon von selbst, und zwei Einstellungen im Verwaltungsbereich ermöglichen es Ihnen, dies für Ihre Website zu verschärfen.

• Domain-Whitelist. Nur die von Ihnen aufgelisteten Websites können das Widget anzeigen. Wer Ihren Einbettungscode auf einer anderen Website kopiert, erhält nichts.
• Blockierte Länder. Besucher, deren Netzwerkstandort in einem von Ihnen blockierten Land liegt, sehen das Widget nie, und ein Chat, den sie dennoch zu starten versuchen, wird abgelehnt. Der Standort wird über die Verbindung des Besuchers ermittelt: Jemand, der ein VPN nutzt, wird als aus dem Land des VPNs stammend angezeigt, und ein Besucher, dessen Standort nicht bestimmt werden kann, wird durchgelassen, anstatt ausgeschlossen zu werden. Ihre eigene Vorschau innerhalb der App funktioniert weiterhin, selbst wenn Sie das Land blockieren, in dem Sie sich gerade befinden.
• Neue Konversationen pro Verbindung. Eine Verbindung (in der Praxis ein Haushalt oder eine Büro-Adresse) kann 20 neue Konversationen pro Tag über ein Widget eröffnen. Wiederkehrende Besucher, die ihren bestehenden Chat fortsetzen, zählen nicht mit, nur brandneue Konversationen werden gezählt. Ein Skript, das ständig neue Chats startet, um KI-Antworten zu generieren, läuft also nach 20 Versuchen ins Leere, während echte Besucher davon nichts bemerken. Wenn sich viele Personen eine Verbindung auf Ihrer Website teilen (ein Campus, ein Callcenter), erhöhen Sie die Anzahl über die REST API mit max_new_chats_per_ip_daily; 0 schaltet die Prüfung aus.
• Menschlichkeitsprüfung (optional). Besucher bestehen eine kurze Cloudflare Turnstile-Prüfung, bevor ihre erste Nachricht gesendet wird, sodass ein Skript gar keine Chats starten kann. Die meisten Leute müssen nichts anklicken; Cloudflare zeigt nur dann ein Kontrollkästchen an, wenn es sich unsicher ist. Es verwendet Ihre eigenen kostenlosen Turnstile-Schlüssel, siehe Menschlichkeitsprüfung hinzufügen unten.
• Integrierte Limits. Darüber hinaus ist jede Browsersitzung in der Anzahl der Nachrichten begrenzt, die sie pro Minute und pro Tag senden kann, und der Agent, der den Chat beantwortet, hört auf, einem Besucher zu antworten, sobald das unter Maximale KI-Nachrichten pro Chat in den Antwortlimits festgelegte Limit erreicht ist.

Nichts davon identifiziert Geräte oder Personen: Das Widget speichert nichts im Browser eines Besuchers, bis dieser sich entscheidet zu chatten (siehe oben), und es gibt kein Fingerprinting.

Menschlichkeitsprüfung hinzufügen (Cloudflare Turnstile) #

Aktivieren Sie dies, wenn Bots ständig Chats auf Ihrer Website eröffnen und die oben genannten Einstellungen nicht ausreichen. Die Prüfung wird einmalig durchgeführt, direkt bevor die erste Nachricht eines Besuchers gesendet wird. Ein Besucher, der die Prüfung besteht, kann 24 Stunden lang weiter chatten, ohne sie erneut zu sehen, und jeder, der zu einer früheren Konversation zurückkehrt, kann diese weiterhin lesen, bevor die Prüfung erfolgt.

1. Melden Sie sich bei Ihrem Cloudflare-Konto an (ein kostenloses Konto reicht aus) und öffnen Sie Turnstile.
2. Klicken Sie auf Add widget, geben Sie ihm einen Namen und fügen Sie jede Domain hinzu, auf der Ihr Chat-Widget läuft (zum Beispiel yourshop.com). Lassen Sie den Widget-Modus auf Managed.
3. Kopieren Sie den Site key und den Secret key, die Cloudflare Ihnen anzeigt.
4. Öffnen Sie in der App das Manage-Panel Ihres Chat-Widgets, aktivieren Sie Human check before chatting, fügen Sie beide Schlüssel ein und speichern Sie.

Was Sie erwartet:

• Die Prüfung bleibt deaktiviert, bis beide Schlüssel ausgefüllt sind, sodass das Einschalten ohne Schlüssel niemals Besucher ausschließt.
• Wenn ein Besucher die Prüfung nicht besteht oder sie ungelöst lässt, wird seine Nachricht nicht gesendet und er erhält eine Wiederholen-Schaltfläche.
• Die Prüfung erscheint nur auf den Domains, die Sie in Cloudflare hinzugefügt haben. Auf jeder anderen Domain verweigert Cloudflare sie und niemand auf dieser Website kann eine Nachricht senden. Fügen Sie also jede Domain hinzu, bevor Sie die Prüfung einschalten.
• Wenn Ihre Website eine Content Security Policy verwendet, erlauben Sie https://challenges.cloudflare.com für Skripte und Frames, da die Prüfung sonst nicht geladen werden kann.
• Die Schlüssel gehören zu Ihrem eigenen Cloudflare-Konto, und der geheime Schlüssel (Secret Key) wird niemals an die Browser Ihrer Besucher gesendet.

Installationsanweisungen #

Um das Chat-Widget zu Ihrer Website hinzuzufügen, fügen Sie eine Zeile Code in das HTML Ihrer Website ein.

1. Öffnen Sie die HTML-Datei Ihrer Website in einem Texteditor.
2. Suchen Sie das schließende </body>-Tag – dieses befindet sich normalerweise ganz am Ende der Datei.
3. Fügen Sie diese Codezeile direkt vor dem </body>-Tag ein, damit der Rest Ihrer Seite zuerst geladen wird:

<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID" defer></script>

4. Ersetzen Sie CONFIG_ID durch Ihre eindeutige Konfigurationskennung, die im Bereich Kanäle & Einbettungen des Verwaltungs-Panels angezeigt wird. Diese Kennung ist spezifisch für Ihr Konto und verbindet das Widget mit Ihrem Nachrichtensystem.

Das Snippet verlangsamt Ihre Website nicht: Es ist ein winziger Loader, und das Widget selbst wird im Hintergrund heruntergeladen, ohne die Seite zu blockieren. Wenn Sie dennoch möchten, dass das Widget wartet, bis Ihre Seite vollständig geladen ist, können Sie stattdessen dieselbe URL wie folgt umschließen:

<script>
window.addEventListener('load', function () {
  var s = document.createElement('script');
  s.src = 'https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID';
  s.async = true;
  document.body.appendChild(s);
});
</script>

Und wenn Sie nicht das Laden des Widgets, sondern die kleine Einladungsblase verzögern möchten, finden Sie die entsprechende Einstellung unter Proaktive Popup-Blase im Abschnitt „Verhalten“ weiter oben – ganz ohne Code.

Installation auf Shopify #

1. Gehen Sie in Ihrem Shopify-Adminbereich zu Onlineshop > Themes.
2. Klicken Sie bei dem als aktuell (veröffentlicht) markierten Theme auf die Schaltfläche … und wählen Sie Code bearbeiten. Das Bearbeiten eines Entwurfs oder einer Kopie des Themes ändert nichts an Ihrem Live-Shop.
3. Öffnen Sie layout/theme.liquid und scrollen Sie nach unten zum schließenden </body>-Tag.
4. Fügen Sie Ihre Installationszeile direkt über </body> ein und klicken Sie auf Speichern:

<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID" defer></script>

Wenn Sie das Widget installiert haben, bevor die Installationszeile defer enthielt, zeigt der Code-Editor von Shopify eine rote Unterstreichung darunter an. Diese Unterstreichung ist eine Warnung des Shopify-Code-Prüfers bezüglich Skriptzeilen ohne defer oder async, kein Fehler: Das Theme wird trotzdem gespeichert und das Widget funktioniert weiterhin. Das Hinzufügen von defer wie oben gezeigt lässt die Unterstreichung verschwinden und ändert nichts am Verhalten des Widgets, daher ist eine Neuinstallation auf anderen Seiten nicht erforderlich.

Hier ist ein vollständiges Beispiel dafür, wie Ihre HTML-Datei mit dem implementierten Chat-Widget aussehen sollte:

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>
    <!-- Your existing website content would be here -->

    <!-- Chat Widget Integration -->
    <script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID" defer></script>
</body>
</html>

Inline auf einer Seite einbetten (Fortgeschritten) #

Wenn der Chat als Teil Ihrer Seite erscheinen soll – zum Beispiel in einem speziellen „Kontakt“-Bereich, einem Hilfe-Tab oder einer Seitenleiste – anstatt als schwebende Sprechblase in der Ecke, stellen Sie im Verwaltungs-Panel Einbettungs-Snippet auf Inline um und kopieren Sie das Inline-Snippet.

Es sieht so aus:

<div data-chat-widget="CONFIG_ID" style="width:100%;height:600px;"></div>
<script src="https://api.youraiconnector.com/v1/chat-widget/embed.js" async></script>

Das <div> ist der Einhängepunkt – das Chat-Panel wird darin gerendert und füllt dessen Abmessungen aus. Gestalten Sie das div nach Belieben (geben Sie ihm eine feste Höhe, platzieren Sie es in einem Flex-Container, in einer Rasterzelle usw.), und das Chat-Panel passt sich entsprechend an.

Sie benötigen nur ein <script>-Tag auf der Seite, selbst wenn Sie mehrere Chat-Widgets einbetten. Das Skript durchsucht die Seite nach jedem <div data-chat-widget="…"> und hängt in jedem ein Chat-Panel ein.

Wann Sie Inline gegenüber Floating wählen sollten:

• Floating Bubble eignet sich für einen seitenweiten, jederzeit verfügbaren „Benötigen Sie Hilfe?“-Button.
• Inline-Einbettung ist die richtige Wahl, wenn der Chat an einem bestimmten Ort erscheinen soll – auf einer Support-Seite, in einer Seitenleiste der Wissensdatenbank, einem In-App-Hilfe-Tab – und sich wie ein nativer Teil dieser Seite anfühlen soll.

Die Inline-Einbettung verwendet dieselbe Konfiguration wie die schwebende Sprechblase (Logo, Begrüßungsnachricht, Lead-Erfassung, Einstiegsfragen usw.), sodass Sie nichts doppelt einrichten müssen.

Das Widget auf der Website einer anderen Person anzeigen #

Sie können Ihr Chat-Widget auf einer Website anzeigen lassen, die Sie nicht kontrollieren — ohne Code und ohne Zugriff auf deren Website. Dies ist der schnellste Weg, einem Interessenten zu zeigen, wie der Assistent auf seinen eigenen Seiten aussehen würde.

1. Öffnen Sie das Panel „Verwalten“ und scrollen Sie zu Kanäle & Einbettungen.
2. Geben Sie unter Client-Demo-Link die Website-Adresse ein (zum Beispiel www.theircompany.com).
3. Optional: Wählen Sie unter dem Feld den Agenten aus, der in dieser Demo antworten soll, zum Beispiel einen Agenten, den Sie auf Basis der Website des Interessenten erstellt haben, damit er über dessen Dienstleistungen, Preise und FAQs spricht. Lassen Sie die Einstellung auf Kontostandard, um Ihr normales Chat-Widget-Routing zu verwenden.
4. Klicken Sie auf Link erstellen. Der Link wird für Sie kopiert und erscheint in der Liste unter dem Feld, zusammen mit den Schaltflächen Kopieren und Öffnen sowie dem verwendeten Agenten.
5. Senden Sie den Link an die Person, der Sie ihn zeigen möchten.

Beim Öffnen des Links wird die Website geladen, wobei Ihr Chat-Widget darüber schwebt, genau so, wie es aussehen würde, wenn es installiert wäre. Jeder mit dem Link kann ihn öffnen — es ist kein Login erforderlich.

Ein paar Dinge, die Sie wissen sollten:

• Chats aus der Demo sind echt. Nachrichten, die ein Besucher in einer Demo sendet, kommen in Ihrem Posteingang an, werden von Ihrem Agenten beantwortet und verbrauchen Credits wie jedes andere Gespräch.
• Die Seite ist ohne Branding. Sie zeigt die Website des Besuchers und Ihr Widget, sonst nichts.
• Einige Websites können nicht in Frames geladen werden. Eine Reihe von Websites (Banken, große Einzelhändler, alles hinter strengen Sicherheitseinstellungen) blockieren die Anzeige ihrer Seiten durch andere. Wenn dies passiert, funktioniert der Link dennoch: Er zeigt ein neutrales Mock-Browserfenster anstelle der echten Website, mit Ihrem Widget darüber, sodass die Demo ihren Zweck erfüllt.
• Die Website des Besuchers wird nicht verändert. Es wird nichts installiert und nichts modifiziert – die Demo existiert nur innerhalb dieses Links.
• Deaktivieren Sie einen Link, wenn die Demo beendet ist. Klicken Sie in der Liste neben dem Link auf Deaktivieren und bestätigen Sie. Von diesem Moment an sieht jeder, der den Link öffnet, eine Seite mit dem Hinweis, dass der Link deaktiviert wurde. Ihr Widget und Ihre anderen Demo-Links funktionieren weiterhin. Ein deaktivierter Link kann nicht wieder aktiviert werden; erstellen Sie stattdessen einen neuen.
• Links, die vor dem 25. September 2026 kopiert wurden. Demo-Links, die vor der Existenz der Liste erstellt wurden, sind nicht darin enthalten. Sie funktionieren weiterhin, bis Sie unter der Liste auf Diese deaktivieren klicken, wodurch alle auf einmal abgeschaltet werden (und Diese wieder aktivieren macht dies rückgängig).

Ein Demo-Link, der ohne einen Agenten erstellt wurde, verwendet Ihre Standard-Kontoweiterleitung, unabhängig davon, worauf Diese Chats weiterleiten an eingestellt ist. Wenn ein Agent ausgewählt ist, wird jeder Chat über diesen Link diesem Agenten zugewiesen und von diesem beantwortet. Das Widget behält sein eigenes Aussehen, seinen Namen und seine Begrüßungsnachricht bei. Der Link enthält dies als &agent=AGENT_ID; das manuelle Hinzufügen zu einem älteren Link funktioniert ebenfalls (verwenden Sie &, nicht ?, da der Link bereits ein ? enthält).

Wenn Sie später den Agenten löschen, den ein Demo-Link verwendet, funktioniert der Link weiterhin: Die Chats werden stattdessen an Ihr Standard-Routing für das Konto weitergeleitet, und in der Liste wird daneben „gelöschter Agent, verwendet den Standard“ angezeigt. Das Löschen des Agenten, der Ihr Standard-Chat-Widget ist, hat keine Auswirkungen auf Links, die an einen anderen Agenten gebunden sind.

Einen direkten Link zum Chat teilen #

Manchmal gibt es keine Website, auf der das Widget platziert werden kann – Sie möchten jemandem einen Link geben, damit er sofort mit Ihrem Assistenten sprechen kann. Jedes Chat-Widget hat einen:

1. Öffnen Sie das Verwaltungs-Panel und scrollen Sie zu Kanäle & Einbettungen.
2. Suchen Sie Link teilen (es befindet sich direkt unter dem Client-Demo-Link).
3. Klicken Sie auf Kopieren, um den Link zu übernehmen, oder auf Öffnen, um ihn selbst auszuprobieren.

Beim Öffnen wird nichts anderes als Ihr Assistent angezeigt, der den gesamten Bildschirm ausfüllt – keine Website im Hintergrund, keine Blase, auf die man zuerst klicken muss, nichts zu installieren. Fügen Sie ihn in Ihre Instagram-Bio, einen QR-Code auf einem Flyer, eine E-Mail-Signatur oder eine WhatsApp-Nachricht an einen Interessenten ein.

Der Freigabelink folgt der Standard-Weiterleitung Ihres Chat-Widgets. Um stattdessen einen bestimmten Agenten zu öffnen, fügen Sie ?agent=AGENT_ID an das Ende des Links an; jeder Chat darüber wird dann diesem Agenten zugewiesen und von diesem beantwortet, während die Seite den Namen und die Begrüßungsnachricht Ihres Widgets beibehält.

Ein paar Dinge, die Sie wissen sollten:

• Chats über den Link sind echt. Sie kommen in Ihrem Posteingang an, Ihr Agent beantwortet sie und sie verbrauchen Credits wie jedes andere Gespräch.
• Die Seite enthält kein Branding von uns. Sie zeigt Ihren Assistenten und sonst nichts und wird aus den Suchergebnissen herausgehalten.
• Es funktioniert unter Ihrer eigenen Adresse. Wenn Ihr Anbieter die App auf seiner eigenen Domain betreibt, verwendet der Link ebenfalls diese Adresse, sodass nichts Unbekanntes darin erscheint.
• Ein Besucher pro Link, pro Browser. Wer ihn öffnet, behält in diesem Browser dieselbe Identität bei, sodass bei einer späteren Rückkehr dasselbe Gespräch fortgesetzt wird, anstatt ein neues mit einem Fremden zu beginnen. Ein anderer Browser oder der Link eines anderen Widgets bedeutet einen anderen Besucher.

Verschiedene Seiten an verschiedene Agenten senden #

Standardmäßig wird jeder Chat, der über Ihr Widget eingeht, vom selben Agenten bearbeitet. Sie können dies pro Seite überschreiben, sodass Besucher auf Ihrer Preisseite mit Ihrem Vertriebsmitarbeiter sprechen, während Besucher auf Ihrer Hilfeseite mit Ihrem Support-Mitarbeiter sprechen – alles über dasselbe Chat-Widget.

Es gibt zwei Möglichkeiten, den Code zu erhalten:

• Vom Agenten aus. Klicken Sie auf der Seite KI-Agenten auf die Schaltfläche </> in der Zeile oder öffnen Sie den Agenten und gehen Sie zu dessen Tab Einstiegspunkte. In beiden Fällen erhalten Sie ein sofort kopierbares Snippet, das bereits auf diesen Agenten ausgerichtet ist.

  Der Tab Einstiegspunkte eines Agenten enthält außerdem ein Panel Website-Chat-Widget, das anzeigt, wie viele Website-Chats dieser Agent bereits bearbeitet. Chats über ein eingebettetes Widget erreichen den Agenten direkt, daher müssen Sie keine Einstiegspunktregel dafür erstellen – ein Agent ohne jegliche Regeln beantwortet dennoch Anfragen über sein eingebettetes Widget.

  Die Schaltfläche </> erscheint nur bei aktiven Agenten. Ein pausierter Agent würde den Chat zwar empfangen, aber nie antworten, daher ist die Option ausgeblendet, bis Sie sie wieder einschalten. Es gibt keinen Kanal, der für einen Agenten eingerichtet werden muss – ein Agent kann einen Chat von jedem Kanal entgegennehmen.

• Von den Widget-Einstellungen aus. Legen Sie unter Einstellungen → Kanäle → Verwalten in Ihrem Chat-Widget die Option Diese Chats weiterleiten an fest und kopieren Sie das darunter liegende Snippet. Das Ändern des Dropdowns schreibt das Snippet um.

Das schwebende Snippet enthält das Ziel in der Adresse:

<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID?agent=AGENT_ID" defer></script>

Das Inline-Snippet enthält es stattdessen auf dem <div>, sodass eine Seite mehrere Chats enthalten kann, die an verschiedene Orte gehen:

<div data-chat-widget="CONFIG_ID" data-agent="AGENT_ID" style="width:100%;height:600px;"></div>
<script src="https://api.youraiconnector.com/v1/chat-widget/embed.js" async></script>

Snippets, die vor der Einstellung von Kampagnen kopiert wurden, enthalten stattdessen ?campaign= oder data-campaign=. Sie funktionieren weiterhin, es muss also nichts neu eingefügt werden.

Ein paar Dinge, die Sie wissen sollten:

• Verwenden Sie die Kopier-Schaltfläche, anstatt die ID manuell einzugeben. Wenn die ID nicht mit einem Agenten in Ihrem Konto übereinstimmt, funktioniert der Chat weiterhin, greift aber auf Ihre Standard-Weiterleitung zurück.
• Jemand, der sich bereits mitten in einer Unterhaltung befindet, bleibt bei demjenigen, mit dem er begonnen hat, selbst wenn er später auf einer Seite landet, die auf einen anderen Ort verweist. Dies verhindert, dass eine Unterhaltung mitten im Gespräch die Persönlichkeit wechselt.
• Ein seitenspezifisches Ziel hat Vorrang vor Ihrem Kontostandard und vor Keyword-Auslösern.

Dem Widget mitteilen, wer der Besucher ist (Fortgeschritten) #

Wenn Sie das Chat-Widget in einem Mitgliederbereich, einem Kundenportal oder einer App platzieren, in der Benutzer bereits angemeldet sind, kennt Ihre Website diese bereits. Sie können diese Informationen an das Widget weitergeben, damit der Besucher nicht nach Details gefragt wird, die er Ihnen bereits mitgeteilt hat, und damit Ihre KI das nutzen kann, was Sie bereits über ihn wissen.

Fügen Sie vor dem Widget-Skript einen kleinen Einstellungsblock hinzu:

<script>
  window.chatWidgetSettings = {
    visitor: {
      id: "12345",
      name: "Maria",
      email: "maria@example.com",
      phone: "+391234567890"
    },
    data: {
      plan: "Professional",
      customer_since: "2024",
      last_order: "A-2291"
    }
  };
</script>
<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID" defer></script>

Ihre Seite sollte diese Werte serverseitig von demjenigen ausfüllen, der gerade angemeldet ist.

Um auch einen Nachnamen zu speichern, fügen Sie last_name neben name im Block visitor hinzu (data-visitor-last-name bei einem Inline-Embed). Dies ist optional: Ein Name und eine E-Mail-Adresse reichen weiterhin aus, um das Formular zu überspringen, unabhängig davon, ob Nachnamen erfassen aktiviert ist oder nicht.

Zwei Dinge passieren:

• Das Formular „Bevor wir beginnen…“ wird übersprungen. Wenn Name und E-Mail-Adresse angegeben sind, gelangt der Besucher direkt in das Gespräch, und diese Details werden genau so in seinem Kontakt gespeichert, als hätte er sie selbst eingegeben.
• Alles unter data wird an Ihre KI übergeben. Alles, was Sie dort einfügen — Plan, Bestellnummer, Verlängerungsdatum, Guthaben, Anzahl der Plätze — wird Teil dessen, was die KI über diese Person weiß. So kann sie Fragen wie „Wann verlängert sich mein Plan?“ beantworten, ohne den Besucher zuerst fragen zu müssen, wer er ist. Verwenden Sie beliebige Feldnamen, die für Sie sinnvoll sind; sie erscheinen im Kontakt unter Benutzerdefinierte Felder. Bis zu 20 Werte werden mit jeder Nachricht neu gesendet, sodass die KI bei einer Planänderung während des Gesprächs den neuen Plan sieht.

Bei Inline-Einbettungen können Sie dieselben Informationen stattdessen in das <div> einfügen, was praktisch ist, wenn eine Seite mehrere Chats enthält:

<div data-chat-widget="CONFIG_ID"
     data-visitor-name="Maria"
     data-visitor-email="maria@example.com"
     data-visitor-data='{"plan":"Professional"}'
     style="width:100%;height:600px;"></div>
<script src="https://api.youraiconnector.com/v1/chat-widget/embed.js" async></script>

Wenn Ihre Website erst nach dem Laden der Seite weiß, wer der Besucher ist — zum Beispiel bei einer Single-Page-App, bei der die Anmeldung ohne Neuladen der Seite erfolgt —, rufen Sie dies auf, sobald Sie die Details haben, und das Widget aktualisiert sich selbst:

<script>
  window.chatWidget.setVisitor({
    visitor: { id: "12345", name: "Maria", email: "maria@example.com" },
    data: { plan: "Professional" }
  });
</script>

Ein paar Dinge, die Sie wissen sollten:

• Wenn sich zwei verschiedene Personen auf demselben Computer anmelden, beginnt die zweite Person eine neue Unterhaltung, anstatt den Chat der ersten Person zu sehen. Das Widget erkennt den Benutzerwechsel und setzt sich zurück.
• Dies dient lediglich dem Kontext und nicht der Anmeldung. Unterhaltungen werden weiterhin wie gewohnt getrennt gehalten, sodass die Weitergabe einer id es niemandem ermöglicht, den Chat einer anderen Person zu öffnen, und jemand, der ein anderes Gerät oder einen anderen Browser verwendet, dort eine neue Unterhaltung beginnt. Um die Unterhaltung geräteübergreifend fortzusetzen, melden Sie den id wie im Folgenden beschrieben an.
• Dies ist optional. Ein Widget auf einer normalen öffentlichen Seite benötigt dies nicht und verhält sich genau wie bisher.

Fortsetzen derselben Unterhaltung auf jedem Gerät (angemeldete Besucher-ID) #

Wenn Ihre Kunden Konten haben, können Sie dafür sorgen, dass ihr Chat ihnen folgt: Melden Sie sich auf einem Telefon an, setzen Sie die Unterhaltung auf einem Laptop fort, und es ist dieselbe Unterhaltung mit demselben Kontakt in Ihrem Posteingang, und die KI weiß immer noch alles, was gesagt wurde. Dafür benötigt Your AI Connector einen Nachweis, dass der Besucher wirklich die Person ist, für die Ihre Seite ihn ausgibt; andernfalls könnte jeder eine Kundennummer in seinen Browser eingeben und den Chat dieses Kunden lesen. Der Nachweis ist eine Signatur, die Sie auf Ihrem Server berechnen.

1. Suchen Sie im Verwalten-Bereich des Widgets unter Kanäle & Einbettungen nach Angemeldete Besucher und klicken Sie auf Geheimnis generieren. Kopieren Sie das Identitätsgeheimnis. Bewahren Sie es nur auf Ihrem Server auf; fügen Sie es niemals direkt in die Seite ein.

2. Wenn Ihr Server eine Seite für einen angemeldeten Kunden rendert, berechnen Sie einen HMAC-SHA256 der ID dieses Kunden unter Verwendung des Geheimnisses als hexadezimale Zeichenfolge in Kleinbuchstaben:

// Node.js
const hash = require("crypto").createHmac("sha256", IDENTITY_SECRET).update(customerId).digest("hex");

// PHP
$hash = hash_hmac('sha256', $customerId, IDENTITY_SECRET);

# Python
import hmac, hashlib
hash = hmac.new(IDENTITY_SECRET.encode(), customer_id.encode(), hashlib.sha256).hexdigest()

3. Fügen Sie die ID und den Hash in den Einstellungsblock ein, neben dem Namen und der E-Mail-Adresse, die Sie bereits übergeben:

<script>
  window.chatWidgetSettings = {
    visitor: {
      id: "12345",
      hash: "3f2a…e91c",
      name: "Maria",
      email: "maria@example.com"
    }
  };
</script>
<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID" defer></script>

Die Inline-Einbettung verwendet denselben Wert wie data-visitor-hash auf der <div>, und window.chatWidget.setVisitor({ visitor: { id, hash } }) funktioniert für Apps, die Benutzer ohne Neuladen der Seite anmelden.

Was passiert, sobald die Signatur überprüft wurde:

• Der Chat des Kunden wird unter seinem Konto gespeichert und nicht unter dem Browser, sodass es sich auf jedem Gerät und in jedem Browser, in dem er angemeldet ist, um dieselbe Unterhaltung und einen einzigen Kontakt in Ihrem Posteingang handelt.
• Die früheren Nachrichten werden auf dem neuen Gerät geladen, und die KI macht dort weiter, wo sie aufgehört hat.
• Wenn die Signatur falsch ist, verhält sich das Widget im Hintergrund wie bisher als normaler browserbasierter Chat und gibt den Grund in der Browser-Konsole aus, damit ein Entwickler ihn erkennen kann. Ihre Besucher sehen niemals einen Fehler.
• Die ID wird exakt so verglichen, wie Sie sie gesendet haben. Signieren Sie also denselben Wert, den Sie als id übergeben, und verwenden Sie überall dieselbe ID für dieselbe Person.

Zwei Dinge, die Sie wissen sollten:

• Neu generieren im Verwaltungsbereich gibt Ihnen ein neues Geheimnis. Seiten, die noch mit dem alten signieren, fallen auf normale browserbasierte Chats zurück, bis Ihr Server das neue Geheimnis verwendet. Bestehende Unterhaltungen bleiben erhalten; sie sind mit der ID des Kunden verknüpft, nicht mit dem Geheimnis.
• Eine Unterhaltung, die jemand vor der Anmeldung als anonymer Besucher geführt hat, bleibt ein separater Chat. Die kontobasierte Unterhaltung beginnt mit der ersten Nachricht, die der Benutzer im angemeldeten Zustand sendet.

Ändern der Widget-Einstellungen über Ihren eigenen Code (API) #

Alles auf dem Verwalten-Panel des Widgets kann auch über die REST-API geändert werden. Dies ist praktisch, wenn Sie viele Websites verwalten oder die Schaltfläche für Anhänge für einen Kunden automatisch deaktivieren möchten. Senden Sie einen PATCH an https://api.youraiconnector.com/v1/chat-widget-configs/CONFIG_ID mit Ihrem API-Schlüssel und nur den Feldern, die Sie ändern möchten – zum Beispiel blendet {"show_upload_button": false} die Schaltfläche für Anhänge aus, {"show_emoji_button": false} blendet die Emoji-Auswahl aus und {"launcher_icon": "chat-dots"} tauscht das Launcher-Symbol aus. CONFIG_ID ist derselbe Bezeichner wie in Ihrem Einbettungsskript. Die vollständige Liste der akzeptierten Felder (Name, Begrüßungsnachricht, Farben, Launcher-Symbol, erlaubte Domains, Besucher-Info-Formular, Datenschutzhinweis, Design, Ecken- und Schriftstil) finden Sie in der API-Referenz unter Chat-Widget. Websites übernehmen die Änderungen beim nächsten Laden der Seite.

Was Sie nach der Installation erwartet #

Sobald Sie das Skript auf Ihrer Website hinzugefügt haben, erstellt das Chat-Widget automatisch eine Chat-Schaltfläche in der Ecke Ihrer Website (standardmäßig unten rechts). Das Widget bleibt in einer festen Position, während Benutzer durch Ihre Seiten scrollen, sodass es jederzeit zugänglich ist.

Wenn Besucher auf diese Schaltfläche klicken, erweitert sie sich zu einem vollständigen Chat-Fenster, in dem sie ein Gespräch beginnen können, wobei Ihre Begrüßungsnachricht angezeigt wird. Wenn „Besucherinformationen erfassen“ aktiviert ist, erscheint zuerst ein kleines Formular, das nach Name und E-Mail (und optional Telefonnummer) fragt, bevor sie tippen können.

Die Chat-Oberfläche passt sich automatisch an verschiedene Bildschirmgrößen an und funktioniert daher nahtlos sowohl auf Desktop- als auch auf Mobilgeräten.

Testen Ihrer Implementierung #

Nachdem Sie das Widget zu Ihrer Website hinzugefügt haben, testen Sie, ob es funktioniert:

1. Öffnen Sie Ihre Website in einem Browser.
2. Klicken Sie auf den Chat-Button, um das Widget zu öffnen.
3. Senden Sie eine Testnachricht und bestätigen Sie, dass Sie eine Antwort erhalten.
4. Wiederholen Sie dies auf einem anderen Gerät oder Browser, um sicherzustellen, dass es überall funktioniert.

Wenn das Chat-Widget nicht auf Ihrer Website erscheint, überprüfen Sie Folgendes:

1. Stellen Sie sicher, dass Sie CONFIG_ID durch Ihre tatsächliche Konfigurationskennung ersetzt haben.
2. Stellen Sie sicher, dass das Skript-Tag vor dem schließenden </body>-Tag platziert ist.
3. Überprüfen Sie den Code auf Tippfehler.
4. Stellen Sie bei Shopify sicher, dass Sie das veröffentlichte Theme bearbeitet und auf Speichern geklickt haben. Eine Bearbeitung in einem Entwurf oder einem duplizierten Theme erreicht niemals Ihren Live-Shop.

Hinter einer Unternehmens-Firewall #

Wenn das Widget für die Öffentlichkeit geladen wird, nicht aber für Mitarbeiter im Büronetzwerk, blockiert das Netzwerk mit ziemlicher Sicherheit die Domain, von der es geladen wird. Bitten Sie Ihr IT-Team, über normales HTTPS auf Port 443 Folgendes zuzulassen:

• Die Domain in Ihrem Einbettungs-Snippet — die Adresse in der Zeile <script src="...">, die Sie aus dem Verwaltungs-Panel kopiert haben.
• api.youraiconnector.com — das Widget sendet seine Nachrichten auch hierhin.

Es müssen keine weiteren Freigaben erfolgen: keine zusätzlichen Ports und keine eingehenden Regeln. Sollte das Widget danach immer noch nicht erscheinen, öffnen Sie die Entwicklerkonsole Ihres Browsers auf der Seite und senden Sie uns die dortigen Meldungen — eine blockierte Anfrage nennt die Domain, die verweigert wurde, was meist schon die ganze Antwort ist.