Wie Sie WhatsApp in Ihre Website integrieren

Wussten Sie schon? Mehr als 175 Millionen Menschen senden jeden Tag Nachrichten an ein WhatsApp-Business-Konto – laut Meta.

Sie haben eine »Kontakt«-Seite, auf der niemand klickt, und ein Formular, das Staub sammelt. WhatsApp ist auf den Handys Ihrer Kunden präsent — vertraut, zuverlässig und wird ständig genutzt. Die Einbindung von WhatsApp in eine Website bedeutet, Menschen dort abzuholen, wo sie bereits kommunizieren, statt sie durch ein Support-Portal zu schicken. Fügen Sie Ihrer Website einen WhatsApp-Chat-Button hinzu, damit sie Sie so erreichen können, wie sie einem Freund schreiben würden.

Ein einfacher Link „Nachricht senden“ funktioniert für einfache Nachrichten, gibt Ihnen jedoch keine Kontrolle über Aussehen, Begrüßungsnachrichten oder Timing. Ein dediziertes WhatsApp Chat widget ermöglicht es, WhatsApp-Chat ohne Code in eine Website einzubetten — mit vorausgefüllten Antworten, Planungsfunktionen, Triggern und Branding inklusive. Sie können dies auch mit einem manuellen wa.me-Link oder der WhatsApp Business API erreichen. Dieser Leitfaden deckt alle drei Optionen ab.

Schneller Einstieg: WhatsApp-Chat zu Ihrer Website hinzufügen

Wenn du die Theorie überspringen und sofort einen funktionsfähigen WhatsApp-Chat-Button auf deiner Website nutzen möchtest, hier ist die schnellste Methode:

1. Öffnen Sie den WhatsApp-Chat-Editor und wählen Sie eine Vorlage.
2. Geben Sie Ihre WhatsApp-Nummer ein und legen Sie eine Willkommensnachricht fest.
3. Klicken Sie auf „Zur Website hinzufügen“, um den Einbettungscode zu erhalten.
4. Fügen Sie den Code in das Backend Ihrer Website ein und veröffentlichen Sie ihn.

Erstellen Sie Ihr eigenes WhatsApp-Chat-Widget im Live-Editor unten ↓

WhatsApp-Integration: Ihre Optionen

Es gibt mehrere Wege, WhatsApp-Chat in eine Website einzubetten – die passende Methode hängt davon ab, wie viel Kontrolle Sie benötigen. So vergleichen wir die drei Hauptansätze.

Der wa.me-Link funktioniert als einfache “Nachricht senden”-Verknüpfung auf einer Kontaktseite – dafür sind keine Tools oder Einrichtung erforderlich. Ein Widget ist besser, wenn Sie eine gebrandete schwebende Schaltfläche mit Willkommensnachrichten, Triggern und Terminplanung ohne Codierung wünschen. Die API ist für Hochvolumen-Operationen konzipiert, die Automatisierung, CRM-Integration und Mehr-Agenten-Routing erfordern – mit Entwicklern, die sie warten.

Bevorzugen Sie es, zuzusehen? Hier ist die vollständige Einrichtung in weniger als 3 Minuten:

WhatsApp vs. KI-Chatbot vs. Live-Chat vs. Formular: Welches passt am besten?

Bevor Sie mit der Einrichtung beginnen, lohnt es sich, kurz zu prüfen, ob WhatsApp wirklich der passende Kontaktkanal für Ihr Unternehmen ist. Jede Option schafft unterschiedliche Erwartungen bei Ihren Besuchern — wählen Sie die falsche Wahl, überfordern Sie sich selbst oder frustrieren Sie Ihre Kunden.

Wenn Ihre Kunden lieber eine Nachricht senden als ein Formular auszufüllen – Restaurants, Salons, lokale Geschäfte, Freiberufler, Agenturen – ist WhatsApp in der Regel die beste Lösung. KI-Chatbots arbeiten am besten für eine 24/7-Abdeckung, während Live-Chat oder Formulare besser geeignet sind für komplexe Support-Workflows. Die meisten Unternehmen profitieren davon, zwei Ansätze zu kombinieren: WhatsApp für schnelle Gespräche während der Geschäftszeiten, plus einen KI-Chatbot oder ein Formular für die Abdeckung außerhalb der Öffnungszeiten.

Verwenden Sie ein WhatsApp Business-Konto statt Ihrer persönlichen Nummer

Eine persönliche WhatsApp-Nummer funktioniert zwar technisch, doch Besucher sehen eine Telefonnummer ohne geschäftlichen Kontext. WhatsApp Business ist kostenlos und bietet Ihnen ein verifiziertes Profil (Firmenname, Adresse, Öffnungszeiten) sowie Kataloge, Schnellantworten, Labels und Abwesenheitsnachrichten — all das gibt es beim Privatkonto nicht.

Wenn Sie bereits eine persönliche Nummer für Ihr Unternehmen verwenden, können Sie sie ohne Verlust Ihres Chat-Verlaufs in ein WhatsApp Business-Konto umwandeln. Eine wichtige Einschränkung – Sie können dieselbe Nummer nicht gleichzeitig sowohl für WhatsApp als auch für WhatsApp Business verwenden. Wählen Sie eines aus.

Schritt-für-Schritt: WhatsApp-Chat einrichten

Jetzt, da Sie wissen, welche Methode passt und Ihr WhatsApp Business-Konto bereitsteht, erfahren Sie hier, wie Sie das Widget von Anfang bis Ende konfigurieren. Jeder Schritt erläutert nicht nur, worauf Sie klicken müssen, sondern auch, warum die Standardeinstellungen möglicherweise nicht zu Ihrem Geschäft passen.

Schritt 1: Wählen Sie eine Vorlage

Als Erstes öffnen Sie den Widget-Editor und wählen Sie eine Starter-Vorlage. Für die meisten Unternehmen ist die Allgemeine Vorlage der sicherste Start — es ist das klassische WhatsApp-Design mit einer schwebenden Chat-Blase.

Nachrichtenfeld auswählen statt nur auf die Schaltfläche “Start Chat” zu klicken. Die Anwendungsfall-Vorlagen, wie Buchung oder Beratung, kommen mit vorkonfiguriertem Text und Symbolen, die Sie anpassen können.

Schritt 2: Telefonnummer und Agenten-Info eingeben

Im Verbinden-Tab geben Sie Ihre WhatsApp-Telefonnummer mit Ländervorwahl ein (z. B. +14155551234). Beginnen Sie nicht mit 0 oder 00 — verwenden Sie das +-Format. Wenn Sie ein WhatsApp Business-Konto haben, können Sie auch Ihren Business-Kurzlink anstelle Ihrer Telefonnummer verwenden.

Gehen Sie anschließend zum Inhalt-Tab, um die Kopfzeile des Chatfensters einzurichten: Profilbild, Name und Beschriftung. So sehen Besucher es, bevor sie klicken — es setzt den Ton für die gesamte Interaktion.

Verwende deinen echten Namen und Foto, statt “Support Team” mit einem generischen Icon. Die Leute schreiben eher einer Person als einer Abteilung oder einem namenlosen Agenten. Wenn du alleine arbeitest, nutze deinen eigenen Namen. Bist du ein Team, wähle die Person aus, die tatsächlich auf Nachrichten reagiert.

Sie können auch konfigurieren:

• Profilbild — Wählen Sie aus der Bibliothek, laden Sie ein eigenes Foto hoch oder verwenden Sie das Standardlogo.
• Name — wird im Chatkopf als Agentenname angezeigt
• Bildunterschrift — Fügen Sie benutzerdefinierten Text hinzu oder wählen Sie aus vordefinierten Optionen wie “Online” oder “Replies within an hour.”

Schritt 3: Verfasse deine Willkommensnachricht und voreingestellte Antworten

Die Begrüßungsnachricht ist die Begrüßung, die Besucher sehen, wenn das Chatfenster geöffnet wird. Die Standardvariante ist allgemein – passen Sie sie gezielt an Ihr Unternehmen an. Eine gute Begrüßungsnachricht sagt Besuchern, worum sie fragen können, und setzt Erwartungen an die Reaktionszeiten.

Der vorbefüllte Text ist anders: Es ist der Text, der automatisch in WhatsApp Ihres Besuchers erscheint, wenn er auf „Start Chat“ klickt. Damit können Sie dem Kunden sagen, was er in seiner Frage anzugeben hat. Der vorbefüllte Text unterstützt außerdem den Platzhalter [page_url], der automatisch die URL der Seite enthält, auf der der Besucher den Chat gestartet hat, sodass Sie wissen, welche Produktseite die Unterhaltung ausgelöst hat.

Beispiele

Wichtiger Hinweis: Wenn Sie sich über einen WhatsApp Business-Kurzlink (statt einer Telefonnummer) verbunden haben, muss die vorgefüllte Nachricht in der WhatsApp Business-App selbst konfiguriert werden, nicht in den Widget-Einstellungen.

Schritt 4: Anzeigeplanung konfigurieren

Hier enden die meisten WhatsApp-Einbettungsanleitungen, und hier trennt sich die Qualität der Einrichtung. Die Einstellmöglichkeiten des Widgets für Datum und Uhrzeit (im Reiter Einstellungen) ermöglichen es Ihnen, genau zu steuern, wann der Chat-Button auf Ihrer Website erscheint. Sie können bestimmte Wochentage, Start- und Endzeiten sowie eine Zeitzone festlegen.

Wenn Ihr Unternehmen feste Öffnungszeiten hat – z. B. Montag bis Freitag, 9:00–18:00 Uhr – konfigurieren Sie den Zeitplan entsprechend. Besucher außerhalb dieser Zeiten sehen den WhatsApp-Button nicht, wodurch die frustrierende Erfahrung vermieden wird, eine Nachricht zu senden und 12 Stunden lang nichts zu hören.

Schritt 5: Aussehen und Platzierung anpassen

Mit diesem Schritt passen Sie das Design und Layout Ihres Chat-Widgets an. Die Registerkarte Aussehen steuert Farben, das Sprechblasen-Symbol, Animation, Schriftart und Form des Buttons. Die Registerkarte Einstellungen regelt die Position des Widgets auf der Seite. Hier können Sie anpassen:

• Position kommt in drei Modi vor: Floating Bubble (folgt dem Besucher beim Scrollen), Embed Bubble (fest im Inhalt integriert) und Embed Chat Window (Chatfenster dauerhaft geöffnet)
• Ausrichtung ermöglicht das Platzieren Ihres Widgets links, zentriert oder rechts. Unten rechts ist die Standardposition für Chat-Buttons.
• Offsets können vertikal und horizontal angepasst werden. Verwenden Sie diese, um die Sprechblase von anderen schwebenden Elementen wegzuschieben.
• Bubble-Icon kann aus der integrierten Bibliothek gewählt werden, standardmäßig belassen oder als benutzerdefiniertes Icon hochgeladen werden.
• Blasen-Animation — konfigurierbarer Ein/Aus-Schalter mit einstellbarem Intervall (Standard: 10 Sekunden)
• Farben — Hintergrund der Sprechblase, Icon, Kopfzeile, Chat-Hintergrundbild, Nachrichten-Hintergrund, Button, Benachrichtigungs-Badge und Online-Status lassen sich unabhängig anpassen

Sie können steuern, auf welchen Seiten das Widget in den Chat-Anzeigeeinstellungen angezeigt wird: auf allen Seiten anzeigen, bestimmte Seiten per URL ausschließen oder nur auf bestimmten Seiten anzeigen. Sie können außerdem nach Gerät (Desktop, Mobilgerät oder beides) und nach Besuchertyp (alle Besucher, nur neue Besucher oder nur wiederkehrende Besucher) ausrichten.

Platzierungsstrategie nach Seitentyp

• Startseite – schwebende Blase unten rechts, stets sichtbar; Ihr standardmäßiger Einstiegspunkt
• Produkt-/Dienstleistungsseiten – schwebende Blase mit einem Zeit-auf-der-Seite-Auslöser nach 10–15 Sekunden („Haben Sie eine Frage zu diesem Produkt?“)
• Preisübersicht – ziehe eine deutlichere Willkommensbotschaft in Betracht („Hilfe bei der Wahl eines Plans?“)
• Kasse – vorab ausgefüllte Nachricht, die sich auf das gekaufte Produkt bezieht
• Blog- bzw. Inhaltsseiten – nur sinnvoll, wenn Ihr Geschäftsmodell direkte Gespräche aus Inhalten vorsieht.

Schritt 6: Trigger-Verhalten einrichten

Trigger-Typen steuern, wann das Chatfenster automatisch geöffnet wird, ohne dass der Besucher auf die Blase klickt. Fünf Trigger-Typen stehen zur Verfügung, und sie können kombiniert werden (die zuerst ausgelöste öffnet den Chat):

• Beim Seitenaufruf — öffnet sich sofort, wenn die Seite geladen wird. Ideal für Seiten mit hohem Kauf- oder Handlungsbedarf, z. B. Preisgestaltung oder Checkout, aber aggressiv.
• Verweilzeit auf der Seite — öffnet sich nach einer festgelegten Anzahl Sekunden auf der aktuellen Seite. Ideal für Produktseiten, auf denen Besucher einen Moment zum Stöbern brauchen, bevor Sie Hilfe anbieten.
• Verweildauer auf der Website — öffnet sich nach einer festgelegten Gesamtzeit auf der Website. Nützlich für mehrseitige Browsing-Sitzungen.
• Scroll-Position — Öffnet sich, nachdem der Besucher einen festgelegten Prozentsatz der Seite gescrollt hat. Gut geeignet für lange Inhalte oder Landing Pages.
• Exit Intent — öffnet, wenn der Besucher den Mauszeiger über den Schließen-Tab-Button bewegt. Letzte Chance zur Interaktion — „Bevor Sie gehen, haben Sie noch Fragen?“

Die Remember Visitor-Einstellung legt fest, was passiert, nachdem ein Besucher den Chat schließt: Das Widget öffnet sich für einen konfigurierbaren Zeitraum nicht automatisch wieder (Standard: 1 Tag). So wird das lästige Muster vermieden, dass ein geschlossener Chat auf jeder Seite wieder erscheint.

Wenn Sie nicht möchten, dass der Chat überhaupt automatisch geöffnet wird – ihn dort einfach als anklickbare Blase belassen – deaktivieren Sie alle Trigger und setzen Sie zeitbasierte Optionen auf 0 Sekunden.

Schritt 7: Einbettungscode abrufen und installieren

Klicken Sie auf „In die Website einbinden“, um Ihren Installationscode zu erhalten. Der Code besteht aus zwei Teilen: einem Script-Tag, das die Elfsight-Plattform lädt, und einem Div-Tag mit der eindeutigen Klasse Ihres Widgets. Kopieren Sie den gesamten Block.

WordPress, Squarespace, Wix, Webflow, and Shopify.”>Schließlich fügen Sie den Code in einen benutzerdefinierten HTML-Block auf jeder Seite Ihrer Website ein. Das Widget wird von den meisten CMS und Website-Buildern unterstützt, darunter WordPress, Squarespace, Wix, Webflow und Shopify.

Schneller Fehlerscheck

• Widget erscheint nicht? Prüfen Sie, dass der Code in einem benutzerdefinierten HTML-Block und nicht in einem normalen Textblock liegt. Leeren Sie den Cache Ihrer Website.
• WhatsApp öffnet sich, aber keine vorausgefüllte Nachricht? Überprüfen Sie den vorausgefüllten Text in den Widget-Einstellungen. Sonderzeichen können die URL-Kodierung beeinträchtigen. Wenn Sie über einen Business-Shortlink verbunden sind, muss die vorausgefüllte Nachricht in der WhatsApp Business-App festgelegt werden.
• Überlappt das Widget andere Elemente auf Mobilgeräten? Passen Sie die vertikalen und horizontalen Abstände des Widgets in den Positionseinstellungen an oder verwenden Sie das Geräte-Targeting, um es auf Mobilgeräten auszublenden, falls dort eine andere Kontaktmöglichkeit besteht.
• “Diese Telefonnummer ist nicht bei WhatsApp registriert” Fehler? Bestätigen Sie, dass die Nummer bei WhatsApp registriert ist (und nicht nur eine normale Telefonnummer) und die korrekte Ländervorwahl enthält, ohne führende Null.

Weitere Möglichkeiten, WhatsApp-Chat in Ihre Website zu integrieren

Der Widget-Ansatz deckt die meisten Anwendungsfälle ab, ist aber nicht Ihre einzige Option. Hier sind zwei Alternativen – eine für Einfachheit, eine für Skalierbarkeit.

Fügen Sie Ihrer Website einen WhatsApp-Link mit wa.me hinzu

Ein wa.me-Link öffnet direkt eine WhatsApp-Konversation in jedem Browser. Kein Widget, kein JavaScript, kein Tool von Drittanbietern. Das ist der einfachste Weg, einen WhatsApp-Chat-Button auf deiner Website hinzuzufügen, wenn du lediglich einen einfachen „Nachrichten“-Link benötigst.

1. Construct your link: https://wa.me/[number-with-country-code]?text=[pre-filled-message] Example: https://wa.me/14155551234?text=Hi%2C%20I%27d%20like%20to%20know%20more%20about%20your%20services
2. Fügen Sie es als HTML-Anker-Tag hinzu: <a href="https://wa.me/14155551234?text=Hi" target="_blank">Message us on WhatsApp</a>
3. Gestalten Sie es mit CSS oder verwenden Sie ein Icon. Platzieren Sie es nach Belieben – in der Kopfzeile, der Fußzeile, auf der Kontaktseite oder als schwebenden CSS-Button, den Sie selbst erstellen.

Dies ist Ihr WhatsApp-Einbettungscode für eine Website in der einfachsten Form. Kein Dashboard, keine Konfiguration — nur ein Link. Wenn das alles ist, was Sie brauchen, funktioniert es.

Wie man die WhatsApp-API in eine Website integriert

Die offizielle WhatsApp Business API ermöglicht Ihnen vollständig automatisierte WhatsApp-Erlebnisse: KI-Chatbots, Vorlagen-Nachrichten, CRM-Integration und Weiterleitung an mehrere Agenten. Das ist eine Infrastruktur der Enterprise-Klasse – kein Plug-and-Play-Widget.

1. Beantragen Sie den Zugriff auf die WhatsApp Business API über einen Business Solution Provider (BSP)
2. Verifizieren Sie Ihr Unternehmen und Ihre Telefonnummer über den Meta Business Manager.
3. Erstellen oder konfigurieren Sie Ihren Messaging-Fluss: Vorlagen, Webhooks, Automatisierungsregeln.
4. Integrieren Sie eine benutzerdefinierte Chat-Oberfläche oder einen Einstiegspunkt „Chat starten“ auf Ihrer Website.

Optimierungstipps für Ihren WhatsApp-Chat

Sie haben das Widget installiert – jetzt erfahren Sie, was eine bloße Einrichtung von einer konversationsfördernden unterscheidet.

Design und Platzierung

Schichten Sie keine schwebenden Elemente übereinander. Wenn Sie bereits einen KI-Chatbot, einen Cookie-Hinweis und eine Schaltfläche ‘Nach oben’ haben, erzeugt eine WhatsApp-Blase auf Mobilgeräten visuelles Chaos. Überprüfen Sie Ihre schwebenden Elemente, bevor Sie ein weiteres hinzufügen. Verwenden Sie die Offset-Einstellungen des Widgets oder Seitenebenen-Sichtbarkeitskontrollen, um Kollisionen zu vermeiden.

Mit Seiten mit hohem Kaufinteresse beginnen – nicht mit allen Seiten. Zeigen Sie WhatsApp zunächst auf Produkt-, Preis- und Kontaktseiten. Prüfen Sie nach zwei Wochen Ihre GA-Daten — Sie werden schnell sehen, welche Seiten tatsächlich Gespräche generieren und können den Rest streichen.

Nachrichten und Antworten

Verwenden Sie die vorkonfigurierte Nachricht, um Reibungen zu vermeiden. Eine leere Begrüßung wie „Hallo“ von einem Kunden liefert Ihnen nichts zum Anknüpfen. Füllen Sie sie mit Kontext vor — „Hallo, ich interessiere mich für [product/service]“ — und sparen Sie eine Runde Hin- und Her. Der Platzhalter [page_url] sorgt automatisch für noch mehr Kontext.

Setzen Sie realistische Reaktionszeiterwartungen. Wenn Sie nicht innerhalb von Minuten antworten können, sagen Sie dies in der Willkommensnachricht: „Wir antworten in der Regel innerhalb von 2 Stunden während der Geschäftszeiten.“ Unrealistische Erwartungen schaden deutlich mehr als langsame Antworten mit Warnhinweis. Um es weiter zu optimieren, bieten Plattformen wie SendPulse neben WA CRM-Software auch WhatsApp-Kundensupport-Software, um Antworten zu automatisieren, Chats den richtigen Teammitgliedern zuweisen und Reaktionszeiten schnell zu halten — damit sich jeder Kunde auch während Stoßzeiten oder außerhalb der Geschäftszeiten gehört fühlt.

Tracking und Reichweite

Verfolgen Sie Widget-Interaktionen. Das Widget unterstützt integriertes Google Analytics-Ereignistracking (Einstellungen-Tab) mit zwei Events: Widget geöffnet und Chat gestartet. Richten Sie es ein, wenn GA oder GTM installiert ist — so erfahren Sie, auf welchen Seiten die meisten Gespräche stattfinden und wann Anfragen ihren Höhepunkt erreichen.

WhatsApp mit Abdeckung außerhalb der Geschäftszeiten kombinieren. WhatsApp eignet sich ideal während der Geschäftszeiten, wenn Sie persönlich antworten können. Für Nachtstunden und Wochenenden kombinieren Sie es mit einem KI-Chatbot, der häufige Fragen automatisch beantwortet — Besucher erhalten zu jeder Zeit eine Antwort, unabhängig von der Uhrzeit.

Häufig gestellte Fragen

Fazit

Sie haben drei Möglichkeiten gesehen, WhatsApp-Chat auf Ihrer Website zu integrieren – vom einfachen wa.me-Link bis hin zu einem vollständig konfigurierten Widget mit Terminplanung, Triggern und vorausgefüllten Nachrichten. Ganz gleich, welche Methode Sie wählen, zählen die Setup-Entscheidungen, die Besucher direkt erleben: eine Willkommensnachricht, die ihnen zeigt, was sie erwartet, eine vorausgefüllte Antwort, die Reibung reduziert, und der Zeitpunkt der Anzeige, der mit Ihrer tatsächlichen Erreichbarkeit übereinstimmt.

Falls Sie den Widget-Editor noch nicht ausprobiert haben, beginnen Sie mit dem WhatsApp-Chat-Widget — der kostenlose Plan deckt eine Grundkonfiguration ab, und Sie können alles vor dem Festlegen anpassen. Und wenn Sie außerhalb der Geschäftszeiten Rund-um-die-Uhr-Abdeckung benötigen, sorgt die Verbindung von WhatsApp mit einem KI-Chatbot dafür, dass Besucher immer eine Antwort erhalten – egal, ob Sie am Schreibtisch sitzen oder nicht.

Artikel von

Valeriya Polyakova

Content-Manager

Als Content-Manager bei Elfsight erstelle ich Inhalte, die sowohl praktisch als auch inspirierend sind. Ich liebe es, Komplexes einfach und angenehm lesbar zu gestalten.

Auf Facebook folgen

Folgen Sie uns auf X

Auf LinkedIn folgen

Folge uns auf Reddit