Was "Live-Chat hinzufügen" wirklich bedeutet
Zieht man das Marketing ab, ist Live-Chat ein kleines schwebendes Chat-Widget, manchmal Chatbox oder Launcher genannt, das in der Ecke eurer Seiten sitzt, damit ein Besucher eine Echtzeit-Konversation starten kann. Diese Konversationen laufen in ein Postfach, aus dem euer Team, oder ein KI-Agent, antwortet.
HubSpot beschreibt es so, dass es "visitors directly with members of your team… as a widget on your website pages, where visitors can start a real-time conversation" verbindet (HubSpots Live-Chat-Doku). Zendesks Messaging-Widget ist die gleiche Idee: ein Widget, das ihr konfiguriert und dann "on your website or help center" installiert (Zendesks Web-Widget-Leitfaden). Fast jedes gehostete Tool folgt diesem Muster: Ihr erstellt ein Konto, bekommt ein JavaScript-Snippet, und ladet es auf den Seiten, auf denen das Widget erscheinen soll.
Das ist die ganze Mechanik. Was sich zwischen den Tools unterscheidet, ist, was nach dem Absenden durch den Besucher passiert, und dort liegt der Schwerpunkt dieses Leitfadens.
Die drei Wege, Live-Chat hinzuzufügen
1. Ein JavaScript-Snippet einfügen (funktioniert auf jeder Website)
Das ist die nahezu universelle Methode. Registrieren, das Einbettungs-Snippet kopieren, in den HTML-Code eurer Website einfügen, veröffentlichen. Crisps Installationsdoku ist eine gute Vorlage dafür, wie es fast jeder Anbieter formuliert: Ihr holt euch das Chatbox-Script aus den Einstellungen und kopiert das vollständige Script, denn "if part of the script is missing, the chatbox will not load correctly" (Crisps Installationsdoku). Crisp veröffentlicht außerdem einen freundlichen Live-Chat-Überblick, falls ihr das größere Bild wollt.
Die Platzierung ist wichtig, und die Anbieter sind sich leicht uneinig. Crisp empfiehlt innerhalb des <head>-Bereichs, vor dem schließenden </head>-Tag, und weicht auf vor </body> aus, falls ihr den Head nicht bearbeiten könnt. Zendesk will das Snippet ausdrücklich "before the closing HTML </body> tag." Beide teilen die Regel, die die meisten Leute überrascht: den Code auf jeder Seite einfügen, auf der das Widget erscheinen soll, und Zendesk warnt, die Installation "requires some basic familiarity with your website's code" (Zendesks Web-Widget-Leitfaden).
Eine Falle, wenn ihr eine Single-Page-App betreibt (React, Next.js und Verwandte): das Script einmal beim Start der App laden. Crisp warnt ausdrücklich davor, "reinject the script every time the visitor changes page inside your app," da das "can create duplicate loads or unexpected behavior."
2. Ein Plugin oder eine App installieren (ohne Code)
Wenn eure Website auf einem gehosteten Baukasten oder CMS läuft, überspringt das rohe HTML komplett. Die meisten Anbieter liefern eigene Apps: Crisp allein listet Anleitungen für WordPress, Squarespace, Webflow, Wix und Notion, plus E-Commerce-Plugins für Shopify, WooCommerce und Magento. Wenn eure Plattform eine eigene Anleitung hat, nutzt diese statt des generischen Snippets.
HubSpot hat eine Besonderheit, die man kennen sollte: um seinen Chat auf einer Nicht-HubSpot-Website einzusetzen, installiert ihr zuerst den HubSpot-Tracking-Code, denn "the live chat won't appear if the tracking code isn't installed" (HubSpots Live-Chat-Doku). Google Tag Manager ist ein gängiger No-Code-Weg, um jedes dieser Snippets auszuliefern, ohne Templates direkt zu bearbeiten.
3. Den nativen Chat eures Helpdesks aktivieren (ein Klick)
Wenn Chat Teil eines Helpdesks ist, den ihr schon betreibt, kann die Installation fast mühelos sein. Zendesks Help-Center-Installation ist zum Beispiel "a simple, one-click process, no tech support needed" über eine Checkbox, um das Widget in eurem Help Center einzubetten. Wenn ihr schon in Zendesk, Freshdesk, HubSpot oder Help Scout lebt, ist das meist der reibungsloseste Weg und hält den Chat im selben Postfach wie eure Tickets.
Was die Tools tatsächlich kosten
Die Preisgestaltung teilt sich entlang einer Linie, die Käufer oft stolpern lässt: manche Tools rechnen pro Sitzplatz/Agent ab, andere pro Konversation oder Ticket. Diese beiden Modelle ergeben bei gleichem Volumen völlig unterschiedliche Rechnungen, also lest die Einheit, bevor ihr die Zahl lest.
Hier seht ihr, wo die beliebten Optionen starten, laut der eigenen Preisseite jedes Anbieters (Stand Juli 2026):
| Tool | Live-Chat-Widget? | Einstiegspreis | Abrechnungsmodell |
|---|---|---|---|
| Tidio | Ja | Kostenlos (50 Konv./Monat); Starter 24,17 $/Monat | Pro abrechenbarer Konversation + Lyro-KI-Add-on |
| Crisp | Ja | Kostenlos; Mini 45 $/Monat pro Workspace | Pro Workspace, nicht pro Sitzplatz |
| LiveChat | Ja | Starter 19 $/Monat pro Nutzer | Pro Nutzer/Agent |
| Zendesk | Ja (Messaging) | Support Team 19 $/Agent/Monat | Pro Agent |
| Help Scout | Ja | Kostenlos (bis zu 5 Nutzer); Standard 25 $/Nutzer/Monat | Pro Nutzer |
| Gorgias | Ja (E-Commerce) | Starter ab 10 $/Monat (50 Tickets) | Pro Ticket / Lösung |
| Chatwoot | Ja (Open-Source) | Kostenlos (2 Agenten); Startups 19 $/Monat | Pro Agent, oder kostenlos selbst gehostet |
| HubSpot | Ja | Gebündelt, inkl. kostenlosem CRM | Gebündelt mit Service-/CRM-Plänen |
Zwei Details sind es wert, hervorgehoben zu werden. Tidio und Gorgias rechnen pro Konversation oder Ticket ab, nicht pro Sitzplatz, was für ein kleines Team mit geringem Volumen großartig ist und schmerzhaft wird, sobald ihr skaliert. Tidio zählt eine "billable conversation" nur, wenn ein menschlicher Agent antwortet, und merkt ausdrücklich an, dass "responses from Flows and Lyro AI Agent are not counted as agent replies" (Tidios Live-Chat-Seite). Crisp ist der Ausreißer und rechnet pro Workspace ab statt pro Agent, was günstiger wird, je größer euer Team ist.
Und der ausgeschriebene Preis ist selten der echte Preis. KI-Lösungen sind fast immer ein separater Zähler obendrauf, also kalkuliert das von Anfang an mit ein, wenn die KI-Ebene der Grund ist, warum ihr Chat hinzufügt, statt bei der zweiten Rechnung überrascht zu werden. Unsere eigene Aufschlüsselung von Live-Chat-Software für Websites geht tiefer auf die Gesamtkosten-Rechnung ein.
Wo KI 2026 ins Spiel kommt
Live-Chat 2026 sind eigentlich drei überlappende Modi, und zu wissen, welchen ihr einrichtet, erspart viel Verwirrung:
- Menschlicher Live-Chat. Ein echter Agent antwortet in Echtzeit. Immer noch der Vertrauensanker für alles Schwierige oder Emotionale.
- KI-Chatbot / Deflection. Ein KI-Agent übernimmt wiederkehrende Fragen, bevor ein Mensch involviert wird. Tidios Lyro, LiveChats KI-Agent, HubSpots Customer Agent, und eesels Chatbot leben alle auf dieser Ebene.
- Hybrid: KI zuerst, Eskalation an einen Menschen. Die KI übernimmt den ersten Durchgang und übergibt in dem Moment, in dem sie das Problem nicht lösen kann oder der Besucher nach einem Menschen fragt.
Dieser dritte Modus ist derjenige, der tatsächlich funktioniert, und die Community ist laut, warum. Das Scheitern, das jeder schon gefühlt hat, ist der Sackgassen-Bot. Wie es ein Thread auf r/CustomerService formulierte:
"Bots are fine as a first layer but when there's no way to reach a real person it just turns into a frustrating loop."
Die Kehrseite ist, was eine saubere Übergabe bringt. Ein anderer Betreiber im selben Subreddit fasste das gesamte Designziel zusammen:
"Speed is helpful, but being able to seamlessly talk to a real person when it gets tough is what actually builds trust."
Ich sehe das ständig live. In einem echten Chat, den ich mir angesehen habe, stellte ein Besucher auf der Website eines SEO-Tools zwei Wie-geht-das-Fragen, erhielt sofortige, dokumentenbasierte Antworten, tippte dann "Can I talk to a human?", und die KI übergab in derselben Sekunde an das Support-Team. Das ist das Muster, auf das man hinarbeiten sollte: Die KI räumt das einfache Volumen ab, und der Mensch muss nie zum tausendsten Mal "how do I reset my password" beantworten. Der Haken ist, dass eine erste KI-Ebene nur funktioniert, wenn sie auf eurer echten Wissensdatenbank trainiert ist. Ein Bot, der ins Blaue hinein antwortet, dreht sich einfach im Kreis, und das ist genau die Beschwerde hinter den meisten "AI ruined support"-Tiraden. Die Zahlen hinter Deflection haben wir in unserem Artikel KI für Live-Chat-Deflection aufgeschlüsselt.
Die Einrichtungsschritte, die tatsächlich wichtig sind
Die Installation des Widgets ist Schritt zwei von rund acht. Hier die Reihenfolge, die verhindert, dass Chat zu einer Support-Belastung wird:
- Ein Tool wählen, das zu eurem Stack und eurer Abrechnungstoleranz passt. Helpdesk-nativ, wenn ihr schon einen betreibt; sonst eine Standalone-Lösung wie Tidio, Crisp oder Chatwoot.
- Das Widget konfigurieren, bevor ihr es installiert: Akzentfarbe, Chat-Name und Avatar, Willkommensnachricht.
- Das Snippet oder Plugin installieren, nach den drei oben genannten Methoden, auf jeder Seite, auf der ihr es wollt.
- Routing-Regeln festlegen. HubSpot erlaubt euch, nach Seite zu routen, sodass ein Chat auf der Preisseite an Sales geht und ein Wissensdatenbank-Artikel an Support (HubSpots Live-Chat-Doku).
- Bürozeiten und Abwesenheitsverhalten festlegen. HubSpot bietet Verfügbarkeit basierend darauf, wer online ist, festgelegte Betriebszeiten oder 24/7, plus explizite Abwesend- und Offline-Zustände. Das ist der mit Abstand am häufigsten übersprungene Schritt, und genau der, der Chat kaputt wirken lässt.
- Textbausteine hinzufügen für eure häufigsten Fragen, damit Agenten nicht ständig die gleiche Antwort neu eintippen.
- Proaktive Trigger einrichten, wenn der Chat sich basierend auf Verhalten öffnen oder begrüßen soll (Zeit auf der Seite, Exit-Intent, Warenkorbwert).
- Testen, dann live gehen. Öffnet eure öffentliche Website, bestätigt, dass das Widget erscheint, schickt eine Testnachricht, und bestätigt, dass sie in eurem Postfach landet. Prüft die Vorschau auf dem Handy, denn das Widget wird auf einem Smartphone anders dargestellt, und ein defekter Mobile-Chat ist schlimmer als keiner.
Wenn ihr eine KI-Ebene hinzufügt, ist das auch der Punkt, an dem ihr sie mit euren Docs und, idealerweise, euren vergangenen Tickets verbindet, und sie dann gegen echte historische Konversationen simuliert, bevor sie je mit einem Kunden spricht. Dieser letzte Teil ist der Unterschied zwischen einem Bot, dem ihr vertraut, und einem, den ihr nervös beobachtet.
Die Fehler, die Live-Chat leise scheitern lassen
Ich habe genug Rollouts gesehen, um zu wissen: Das Widget scheitert fast nie bei der Installation. Es scheitert an den Dingen rundherum.
- Das Widget erscheint nicht. Crisps eigene Troubleshooting-Liste ist der Kanon der Ursachen: Script nicht vollständig kopiert, ins falsche Template eingefügt, auf manchen Seiten fehlend, ein veralteter CMS-Cache, die Website nicht neu veröffentlicht, oder eine Plattform blockiert JavaScript von Drittanbietern (Crisps Troubleshooting-Doku). Schickt eine Testnachricht, bevor ihr darauf vertraut.
- Niemand besetzt ihn. Chat ohne Abdeckung und ohne Offline-Fallback anzubieten gewöhnt Besucher an eine Antwort, die nie kommt. Legt Bürozeiten fest, oder routet Chats außerhalb der Bürozeiten zu KI oder einem Formular.
- Antworten sind zu langsam. Ein langsamer Live-Chat untergräbt seinen eigenen Zweck. Wie es ein Manager auf Reddit formulierte: "you should set chat response time expectations and hours. If you REALLY need someone available immediately, you staff that like a customer [service line]" (r/managers).
- Ihr habt Mobile nie getestet. Ein großer Anteil der Chats startet auf dem Handy. Schaut euch die Vorschau an.
- Die KI ist mit nichts verbunden. Eine KI-Ebene, die nicht auf eurem Help Center trainiert ist, lenkt Leute nur gegen eine Wand ab. Verbindet sie mit echtem Wissen, und gebt ihr einen offensichtlichen Weg, einen Menschen zu erreichen.
Die Einrichtung ist wirklich einfach. Ein Medtech-Team, mit dem ich zusammengearbeitet habe, fügte unser Chat-Snippet auf ihrer Netlify-Website ein, stieß auf ein Problem ("I copied the snippet and it doesnt work in netlify"), löste es, und hatte innerhalb derselben Konversation ein funktionierendes Widget, das auf ihren Confluence-Docs basierte und nach Jira eskalierte. Die Gesamtzeit war ein Nachmittag. Das Tool war nie der schwierige Teil.
eesel für die KI-Ebene ausprobieren
Wenn der Grund, warum ihr Live-Chat hinzufügt, ist, mehr Fragen ohne Neueinstellungen zu bewältigen, ist das Widget nur die halbe Arbeit, die KI dahinter ist die andere Hälfte. eesel ist ein KI-Agent, der sich in den Helpdesk und die Website einklinkt, die ihr schon betreibt, sich am ersten Tag selbst auf euren vergangenen Tickets und Hilfe-Dokumenten trainiert, und Kundenchats beantwortet, bevor er die kniffligen an euer Team übergibt.
Der Teil, auf den ich am meisten hinweisen würde, ist das Sicherheitsnetz: Ihr könnt den Agenten simulieren gegen Tausende eurer echten vergangenen Tickets, bevor er live geht, sodass ihr genau seht, was er gesagt und wo er eskaliert hätte. So kam Gridwise dazu, dass eesel im ersten Monat 73% der Tier-1-Anfragen löste, mit Ergebnissen, die sich bereits in einem 7-Tage-Test zeigten. Es rechnet pro Lösung ab, ohne Gebühren pro Sitzplatz, und es gibt eine kostenlose Testphase, für die keine Kreditkarte nötig ist. Wenn ihr schon einen Helpdesk betreibt, könnt ihr die KI an euren bestehenden Chat anschrauben, statt ihn zu ersetzen.
Häufig gestellte Fragen
Wie füge ich meiner Website kostenlos Live-Chat hinzu?
Was ist der einfachste Weg, Live-Chat auf einer Website einzurichten?
Was kostet Live-Chat-Software?
Sollte ich auf meiner Website einen KI-Chatbot oder menschlichen Live-Chat einsetzen?
Warum wird mein Live-Chat-Widget nicht auf meiner Website angezeigt?
Article by
Rama Adi Nugraha
Rama is a software engineer at eesel AI with two years of experience writing about B2B SaaS, AI tools, and customer support technology. Based in Bali, Indonesia, he brings a developer's perspective to product comparisons — cutting through marketing copy to what the integrations and APIs actually do.
