AnmeldenKostenlos testen

Ein Live-Chat-Widget zur Website hinzufügen

Aktualisiert am 20.10.20266 Min. Lesezeit
Deutsch
Auf dieser Seite

Das Live-Chat-Widget ist die schwebende Chat-Bubble unten rechts auf deiner Website. So richtest du es ein: Inbox erstellen (Einstellungen > Posteingänge > Posteingang hinzufügen > Live-Chat > Website-Live-Chat), Snippet kopieren und vor </body> in deine Seite einfügen. Das klappt mit jedem System: WordPress, Shopify, Webflow oder eigenem Code. Besucher chatten direkt auf deiner Website, und ihre Nachrichten landen als normale Konversationen in deiner Deskwoot-Inbox.

Mit dem Live-Chat-Widget von Deskwoot starten Besucher Konversationen direkt auf deiner Website. Es lädt schnell, funktioniert auf Desktop und Smartphone und lässt sich an deine Marke anpassen. Hier findest du eine Schritt-für-Schritt-Anleitung für die Einrichtung, Tipps für den Alltag und Antworten auf häufige Fragen.

Die Widget-Inbox erstellen

  1. Öffne Einstellungen > Posteingänge > Posteingang hinzufügen.
  2. Wähle als Kanal Live-Chat und dann Website-Live-Chat.
  3. Klicke auf Posteingang erstellen. Deskwoot legt die Inbox an und öffnet ihre Einstellungen.
  4. Richte im Tab Einstellungen das Widget ein:
    • Gib der Inbox einen aussagekräftigen Namen (z. B. „Chat Hauptseite“). Den sieht nur dein Team.
    • Lege die Widget-Farbe fest, damit das Widget zum Erscheinungsbild deiner Website passt.
    • Schreib eine Begrüßungsüberschrift und einen Untertitel der Begrüßung, die Besucher beim Öffnen des Chats sehen.
    • Wähle die Widget-Position: Unten links oder Unten rechts.
  5. Speichere jeden Abschnitt, den du geändert hast.

Das Widget installieren

Nach dem Erstellen zeigt die Karte Widget installieren im Tab Einstellungen ein JavaScript-Snippet mit deinem Widget-Token. So baust du es ein:

  1. Kopiere das Snippet.
  2. Füge es in den <head>-Bereich oder direkt vor dem schließenden </body>-Tag jeder Seite ein, auf der das Widget erscheinen soll.
  3. Nutzt du einen Tag-Manager wie den Google Tag Manager, füge das Snippet stattdessen als Tag vom Typ Benutzerdefiniertes HTML hinzu.

Öffne deine Seite danach in einem Inkognito-Fenster und prüfe, ob das Widget richtig lädt.

Die E-Mail-Adresse des Besuchers

Ein neuer Website-Live-Chat hat keinen Schritt vor dem Chat: Besucher schreiben sofort los. Beantwortet Fynn den Chat, antwortet er zuerst und fragt dann einmal im Chat nach einer E-Mail-Adresse, damit dein Team auch per E-Mail antworten kann, wenn der Besucher geht. Der Name ist freiwillig. Willst du die Adresse schon vor der ersten Nachricht, schalte im Tab Einstellungen der Inbox Vor dem Chat nach der E-Mail fragen ein. Für Name, Telefonnummer oder eigene Felder richtest du das Formular im Tab Vor-Chat-Formular ein (ab dem Startup-Tarif). Solange es aktiv ist, ersetzt es den E-Mail-Schritt. Ohne KI-Bot in der Inbox fragt niemand im Chat, und Besucher bleiben anonym, außer du schaltest den E-Mail-Schritt ein. Live-Chats, die du früher angelegt hast, behalten ihre Einstellung.

Widget anpassen

Das Aussehen des Widgets passt du in den Einstellungen der Inbox an. Du kannst Farbe, Position, Begrüßungsüberschrift, Untertitel und Begrüßungsnachricht ändern. Das Widget passt sich automatisch an Smartphone-Bildschirme an, eine eigene Konfiguration für Mobilgeräte brauchst du also nicht.

Tipps aus der Praxis

  • Halte die Begrüßung kurz. Ein oder zwei freundliche Sätze wirken besser als ein langer Absatz.
  • Nutze deine Markenfarben, damit Besucher auf deiner ganzen Website ein einheitliches Bild sehen.
  • Schalte Vor dem Chat nach der E-Mail fragen ein, falls kein KI-Bot im Chat antwortet und dein Team nicht sofort antworten kann. So kannst du per E-Mail nachfassen.
  • Teste nach der Installation auf mehreren Geräten, ob das Widget auf Desktop und Smartphone richtig angezeigt wird und funktioniert.

Fehlerbehebung

  • Widget erscheint nicht: Prüfe, ob das JavaScript-Snippet richtig platziert ist und ob eine Browser-Erweiterung oder ein Werbeblocker das Laden verhindert. Leere deinen Cache und versuche es in einem Inkognito-Fenster.
  • Stil-Konflikte: Stört das CSS deiner Website das Aussehen des Widgets, such nach globalen Stilen, die iframe- oder Button-Elemente überschreiben.
  • Langsames Laden: Steht das Snippet direkt vor dem schließenden </body>-Tag, lädt das Widget nach deinen Hauptinhalten und bremst die Seite kaum.

Häufige Fragen

Wie installiere ich das Widget?
Einstellungen > Posteingänge > Posteingang hinzufügen > Live-Chat > Website-Live-Chat > Posteingang erstellen. Danach richtest du die Inbox ein (Begrüßung, Farben, Geschäftszeiten), kopierst das Snippet aus der Karte Widget installieren und fügst es vor dem schließenden </body>-Tag in deine Website ein. Nach wenigen Minuten ist der Chat live.
Funktioniert das Widget auf jeder Plattform?
Ja. Es ist reines JavaScript und lädt asynchron. WordPress und WooCommerce (footer.php deines Themes oder ein Plugin für Header- und Footer-Skripte), Shopify (Datei theme.liquid vor </body>), Webflow (Custom Code im Footer), statische Websites: Es läuft überall, wo du JavaScript einbinden kannst.
Verlangsamt das Widget meine Website?
Kaum. Das Widget lädt asynchron und blockiert deine Seite nicht. Am besten platzierst du das Snippet vor dem schließenden </body>-Tag.
Kann ich das Aussehen anpassen?
Ja. Unter Einstellungen > Posteingänge > deine Live-Chat-Inbox > Einstellungen > Aussehen des Widgets stellst du Widget-Farbe, Position (unten links oder unten rechts), helles oder dunkles Design, den Titel der Chat-Bubble, die Begrüßungstexte und die Antwortzeit ein. Ein eigenes Avatarbild legst du unter Funktionen fest. Das Widget lädt die Einstellungen bei jedem Start neu.
Wie funktioniert das Widget für wiederkehrende Besucher?
Sobald ein Besucher dir geschrieben hat, speichert der Browser eine anonyme Besucher-ID im localStorage. Wiederkehrende Besucher sehen ihre bisherigen Konversationen und chatten einfach weiter, ohne sich erneut zu identifizieren. Im cookielosen Modus gilt das nur für die aktuelle Seitensitzung.
Kann ich eingeloggte Nutzer erkennen?
Ja, mit der Nutzer-Verifizierung. Setze window.deskwootSettings.user vor dem Widget-Skript oder rufe nach dem Login window.deskwoot.identify(user) auf. user braucht identifier (deine Nutzer-ID) und identifierHash (ein HMAC-SHA256 der ID, auf deinem Server mit dem Geheimnis der Inbox berechnet). E-Mail, Name und Attribute sind optional. Das Geheimnis erzeugst du im Tab Vor-Chat-Formular unter Nutzer-Verifizierung. Der Besucher wird mit dem Deskwoot-Kontakt verknüpft, und Konversationen erscheinen mit der ganzen Kundenhistorie.
Funktioniert das Widget auf dem Smartphone?
Ja. Das Widget passt sich jeder Bildschirmgröße an. Auf kleinen Bildschirmen ist die Chat-Bubble kleiner, und das geöffnete Widget nutzt den ganzen Bildschirm, damit sich bequem tippen lässt.
Antwortet der Bot in Live-Chat-Konversationen?
Ja, wenn du im Tab Bot-Konfiguration der Inbox einen KI-Bot wie Fynn aktivierst (ab dem Startup-Tarif). Im Bot-Modus Support-Bot übergibt er die Konversation an einen Menschen, wenn es nötig ist.
Kann ich das Widget nur auf bestimmten Seiten zeigen?
Ja. Binde das Snippet nur auf den Seiten ein, auf denen der Chat erscheinen soll (z. B. nur auf der Preisseite), oder lass es im Tag-Manager nur auf bestimmten URLs auslösen. Mit Chat-Triggern im Tab Konfiguration sprichst du Besucher außerdem gezielt an, je nach URL, Zeit auf der Seite oder ob sie wiederkommen.
Wo sehe ich Live-Chat-Konversationen?
Sie erscheinen in deiner Konversationsliste wie jeder andere Kanal, und jede Zeile zeigt den Kanal.
Wie steht es um DSGVO und Tracking?
Das Widget setzt keine Cookies. Bei neuen Besuchern speichert es nichts, bis sie den Chat öffnen oder eine Nachricht senden. Öffnet jemand den Chat, vermerkt es das im localStorage, und schreibt jemand, kommt eine anonyme Besucher-ID dazu. Der cookielose Modus (ab dem Startup-Tarif) verzichtet auch auf localStorage und sessionStorage. Die Daten liegen auf Servern in der EU (Niederlande).
Kann ich mehrere Live-Chat-Inboxen haben?
Ja. Du kannst verschiedene Widgets pro Website oder Produktbereich nutzen, z. B. eines für die Marketing-Website und eines für deine App. Jede Inbox hat ihr eigenes Snippet und eigene Einstellungen.

War diese Anleitung hilfreich?

Weiterlesen

Fynn zu dieser Anleitung fragen

Kurze Antwort aus dieser Anleitung und dem restlichen Hilfecenter.

Noch Hilfe nötig?

Fynn antwortet im Chat aus diesen Anleitungen, und dort erreichst du auch das Team.

E-Mail schreiben