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 Kopfzeile und Nachrichtenfeld als abgerundete Karten darin schweben), Midnight (Glass in dunklen Farben), Bloom (sanftes Rosa, extra 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 Codeänderungen auf 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 Tippanzeige, mit Bot-Sprechblasentext für die Wörter darin und die animierten Tipp-Punkte. Chat-Fenster ist das Panel hinter allen Nachrichten. Wählen Sie eine Bot-Sprechblasenfarbe, 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 Stück.

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 und die Wartezeit in Sekunden bis zum Erscheinen festzulegen. Die Sprechblase blendet sich nach 20 Sekunden von selbst aus, wenn niemand darauf klickt (dieser Wert ist fest), und sobald ein Besucher auf Nicht jetzt klickt, bleibt sie für den Rest des Besuchs ausgeblendet. Das Chat-Fenster selbst öffnet sich nie von alleine: Es öffnet sich, wenn der Besucher auf den Chat-Button oder die Sprechblase klickt, und bleibt geöffnet, bis er es schließt.
• KI-Antwortgeschwindigkeit: Ein Schieberegler zwischen Langsamer (menschlicher – die KI wartet einen Moment mit der Antwort) und Maximale Geschwindigkeit (roboterhafter – Antworten erfolgen so schnell wie möglich). „Ausgewogen“ liegt in der Mitte.

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 auf Englisch angezeigt, während Ihre Begrüßungsnachricht, das Popup-Fenster und die Einstiegsfragen genau so erscheinen, wie Sie sie verfasst haben.
• Oder wählen Sie selbst eine Sprache aus. 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) unabhängig von der Seiten- oder Browsereinstellung in dieser Sprache bleiben. Verwenden Sie diese Option, wenn Ihr Website-Builder nicht die richtige Sprache angibt oder wenn Sie für alle Besucher eine feste Sprache wünschen.
• Unterstützte Sprachen: Englisch, Niederländisch, Deutsch, Französisch, Spanisch, Italienisch, Portugiesisch, Rumänisch, Polnisch, Arabisch, Finnisch, Philippinisch, Slowenisch, Thailändisch, Bengalisch und Japanisch. Dies ist die Liste für die eigenen Schaltflächen und Beschriftungen des Widgets.
• Ihre Nachrichten werden für Sie übersetzt. Jedes Mal, wenn Sie speichern, werden Ihre Begrüßungsnachricht, das proaktive Popup-Fenster und die Einstiegsfragen in alle sechzehn oben genannten Sprachen übersetzt. Sie müssen sie nur einmal verfassen, und zwar in der Sprache Ihrer Wahl: Die Sprache, in der Sie schreiben, wird automatisch erkannt, diese Version wird Wort für Wort beibehalten und alle anderen Sprachen werden daraus übersetzt. Es spielt keine Rolle, auf welche Sprache Ihr Konto eingestellt ist.
• Schreiben Sie jede Nachricht nur in einer Sprache. Wenn Sie zwei Sprachen in dasselbe Feld eingeben – zum Beispiel eine englische und eine italienische Zeile –, wird das Ganze als eine einzige Nachricht behandelt und so übersetzt, wie es ist. Ein italienischer Besucher würde also am Ende denselben Satz zweimal sehen. Schreiben Sie die Nachricht nur einmal, in der Sprache Ihrer Wahl.
• Die KI antwortet in der Sprache des Besuchers. Unabhängig davon, in welcher Sprache jemand schreibt, antwortet Ihr Agent in derselben Sprache, egal welche Sprache für die Beschriftungen des Widgets eingestellt ist. Wenn Sie möchten, dass der Agent immer in einer festen Sprache antwortet, geben Sie dies in den Anweisungen für Ihren Agenten an.

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 der Telefonnummer) gefragt, sodass Sie den Lead erfassen, auch wenn der Besucher den Chat vorzeitig verlässt.
• Formulartitel und Formularuntertitel: Passen Sie die Überschrift und die kurze Erklärung an, die über dem Formular angezeigt werden.
• Telefonnummer erfassen: Aktivieren Sie diese Option, um zusätzlich nach einer Telefonnummer zu fragen; wenn deaktiviert, werden nur Name und E-Mail-Adresse erfasst.

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). DM Champ 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.

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 DM Champ 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 erscheint erst, nachdem Sie eine WhatsApp-Nummer, Instagram oder Messenger verbunden haben.
• Aktionsschaltflächen: Eine Reihe von Verknüpfungen oben im Chat, die den Besucher an einen bestimmten Ort führen, anstatt in ein Gespräch – siehe Aktionsschaltflächen 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 jede Domain 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 gewählten Land liegt, sehen das Widget nie, und jeder Chat, den sie zu starten versuchen, wird abgelehnt. Lassen Sie das Feld leer, um jeden zuzulassen. Siehe Bots und Kreditverbrauch fernhalten unten.
• Diese Chats weiterleiten an: Wählen Sie die Kampagne oder den Agenten aus, der Chats bearbeiten soll, die von dem Code stammen, den Sie gleich kopieren werden. Lassen Sie es auf Kontostandard, um Ihre normale Chat-Widget-Weiterleitung zu verwenden. Siehe Verschiedene Seiten an verschiedene Kampagnen senden 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, um einen teilbaren Link zu erhalten, der diese Seite mit Ihrem darauf laufenden Widget öffnet – es muss auf deren Seite nichts installiert werden. Siehe Das Widget auf der Website einer anderen Person anzeigen 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 wird durch die Design-, Ecken-, Schriftarten- und Farbauswahl bestimmt – Sie können kein eigenes CSS in das Widget injizieren, und Regeln auf Ihrer Seite greifen nicht in das Widget ein.
• Kein benutzerdefinierter Platzhaltertext im Nachrichtenfeld.
• Keine Videoeinbettung innerhalb des Chats.
• Kein Auto-Hide-Timer. Die Einladungsblase verschwindet nach 20 Sekunden von selbst und diese Zahl kann nicht geändert werden; das geöffnete Chatfenster schließt sich nie von selbst. Wenn die Blase über Ihrem Seiteninhalt liegt, verschieben Sie das Widget mit den Positions-Offsets oder schalten Sie die Blase aus und behalten Sie nur die Startschaltfläche.

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. Jeder, der 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 stammt von der Verbindung des Besuchers: Jemand mit einem VPN wird als das Land des VPN 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 befinden.
• Neue Konversationen pro Verbindung. Eine Verbindung (in der Praxis eine Haushalts- oder Büroadresse) kann 20 neue Konversationen pro Tag über ein Widget eröffnen. Wiederkehrende Besucher, die ihren bestehenden Chat fortsetzen, zählen nicht, nur brandneue Konversationen, sodass ein Skript, das ständig neue Chats startet, um KI-Antworten zu farmen, nach 20 Versuchen trockenläuft, während echte Besucher dies nie bemerken. Wenn viele Personen eine Verbindung auf Ihrer Website teilen (ein Campus, ein Callcenter), erhöhen Sie die Zahl über die REST API mit max_new_chats_per_ip_daily; 0 schaltet die Prüfung aus.
• 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 er das unter Antwortlimits festgelegte Maximale KI-Nachrichten pro Chat erreicht.

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.

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.dmchamp.com/v1/chat-widget/CONFIG_ID"></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.dmchamp.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.

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.dmchamp.com/v1/chat-widget/CONFIG_ID"></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.dmchamp.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 Verwaltungs-Panel und scrollen Sie zu Kanäle & Einbettung.
2. Geben Sie unter Client-Demo-Link die Website-Adresse ein (zum Beispiel www.theircompany.com).
3. Klicken Sie auf Kopieren, um den Link zu kopieren, oder auf Öffnen, um ihn sich zuerst selbst anzusehen.
4. 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 jede andere Unterhaltung.
• Die Seite ist neutral. Es wird nur deren Website und Ihr Widget angezeigt, 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 durch andere Seiten. Wenn dies geschieht, funktioniert der Link dennoch: Er zeigt ein neutrales Mock-Browserfenster anstelle der echten Website, mit Ihrem Widget live darüber, sodass die Demo ihren Zweck weiterhin erfüllt.
• Es ändert deren Website nicht. Es wird nichts installiert und nichts modifiziert — die Demo existiert nur innerhalb dieses Links.

Der Demo-Link verwendet immer Ihre Standard-Account-Weiterleitung, unabhängig davon, worauf Diese Chats weiterleiten an eingestellt ist. Wenn Sie möchten, dass Demo-Chats von einem bestimmten Agenten bearbeitet werden, legen Sie diesen Agenten zuerst als Standard für Ihr Chat-Widget fest.

Verschiedene Seiten an verschiedene Kampagnen senden #

Standardmäßig wird jeder Chat, der über Ihr Widget eingeht, von derselben Kampagne oder demselben Agenten bearbeitet. Sie können dies pro Seite überschreiben, sodass Besucher auf Ihrer Preisseite mit Ihrer Vertriebskampagne 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:

• Über die Kampagne oder den Agenten. Öffnen Sie auf der Seite Kampagnen das ⋮-Menü einer Kampagne und wählen Sie Zur Website hinzufügen. Klicken Sie auf der Seite Agenten in der entsprechenden Zeile auf die Schaltfläche </> oder öffnen Sie den Agenten und wechseln Sie zum Tab Einstiegspunkte. In beiden Fällen erhalten Sie ein sofort einsatzbereites Snippet, das bereits auf die jeweilige Kampagne oder den Agenten verweist.

  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.

  Zur Website hinzufügen erscheint nur bei Kampagnen, die aktiv sind und für die Entgegennahme eingehender Chats eingerichtet wurden. Eine Entwurf-Kampagne kann noch keine Besucher empfangen, daher ist die Option ausgeblendet, bis Sie sie veröffentlichen. Auf der Seite „Agenten“ erscheint sie bei aktiven Agenten. Ein pausierter Agent würde den Chat zwar empfangen, aber nie antworten, daher ist die Option ausgeblendet, bis Sie ihn wieder einschalten. Es gibt keinen Kanal, der für einen Agenten eingerichtet werden muss – ein Agent kann einen Chat von jedem Kanal entgegennehmen.

• Über die Widget-Einstellungen. Legen Sie unter Einstellungen → Kanäle → Verwalten in Ihrem Chat-Widget fest, wohin Diese Chats weiterleiten an erfolgen soll, und kopieren Sie das darunter stehende Snippet. Das Ändern des Dropdown-Menüs schreibt das Snippet um.

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

<script src="https://api.dmchamp.com/v1/chat-widget/CONFIG_ID?campaign=CAMPAIGN_ID"></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-campaign="CAMPAIGN_ID" style="width:100%;height:600px;"></div>
<script src="https://api.dmchamp.com/v1/chat-widget/embed.js" async></script>

Für einen Agenten ändert sich der Wortlaut zu ?agent=AGENT_ID oder data-agent="AGENT_ID".

Ein paar Dinge, die Sie wissen sollten:

• Verwenden Sie die Kopier-Schaltfläche, anstatt die ID manuell einzugeben. Wenn die ID nicht mit einer Kampagne oder einem Agenten in Ihrem Konto übereinstimmt, funktioniert der Chat weiterhin, greift aber auf Ihre Standardweiterleitung zurück.
• Jemand, der sich bereits mitten in einer Konversation befindet, bleibt bei der Person, mit der er begonnen hat, selbst wenn er später auf einer Seite landet, die auf etwas anderes verweist. Dies verhindert, dass eine Konversation mitten im Verlauf die Persönlichkeit wechselt.
• Ein seitenspezifisches Ziel hat Vorrang vor Ihrem Kontostandard und vor Keyword-Triggern.

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.dmchamp.com/v1/chat-widget/CONFIG_ID"></script>

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

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.dmchamp.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 DM Champ 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.dmchamp.com/v1/chat-widget/CONFIG_ID"></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.dmchamp.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.

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