Free Tool

Build a WhatsApp chat widget for your website

Configure it below and try it out right on this page. The bubble in the corner is the real widget, live.

Configure your widget

Changes update the live preview and the snippet instantly.

Pick your country so the code is right (WhatsApp can't find the chat without it), then enter the rest of the number, digits only.

Raise this if the widget ends up hidden behind another element on your site, like a cookie banner or a different chat tool.

Your embed snippet

Paste this before the closing </body> tag on your website.

Live preview

Look at the bottom corner of this page. That's your widget, rendered from the settings above using the real embed script.

Manage your leads on WhatsApp Web

Download the free Chat Quotient Chrome extension to see and manage every conversation directly inside WhatsApp Web, a full WhatsApp CRM experience.

Add to Chrome, It's Free

Was ist ein WhatsApp-Chat-Widget?

Ein WhatsApp-Chat-Widget ist eine kleine Schaltfläche, die sich in der Ecke einer Website befindet und beim Anklicken ein WhatsApp-Gespräch mit dem Unternehmen öffnet, entweder direkt zur WhatsApp-Nummer des Unternehmens oder zunächst über ein kurzes Formular. Es ersetzt einen statischen "Kontaktieren Sie uns"-Link oder ein E-Mail-Formular durch einen Kanal, den die meisten Besucher bereits auf ihrem Telefon offen haben.

Es unterscheidet sich von einem einfachen "Klick zum Chatten"-Link (nur Text oder Symbol, das wa.me öffnet) dadurch, dass ein Widget konfigurierbar ist: Position, Farbe und eine vorausgefüllte Begrüßung.

So fügen Sie ein WhatsApp-Chat-Widget zu Ihrer Website hinzu

  1. 1

    Konfigurieren Sie Ihr Widget

    Geben Sie Ihre WhatsApp-Nummer ein und wählen Sie dann eine Farbe und eine Ecke für das Widget.

  2. 2

    Kopieren Sie das Snippet

    Verwenden Sie die Schaltfläche "Snippet kopieren" oben. Es ist ein einzelnes <script>-Tag, keine anderen Dateien oder Abhängigkeiten.

  3. 3

    Fügen Sie es auf Ihrer Website ein

    Fügen Sie es direkt vor dem schließenden </body>-Tag des HTML Ihrer Website ein.

  4. 4

    Veröffentlichen

    Das ist alles. Das Widget wird aus dem Snippet selbst gerendert, kein Build-Schritt, Backend oder Konto erforderlich.

Wo Sie es einfügen, nach Plattform

WordPress
Verwenden Sie ein Plugin wie "Insert Headers and Footers" oder "WPCode", oder fügen Sie es direkt in das footer.php Ihres Themes vor </body> über Appearance → Theme File Editor ein.
Shopify
Online Store → Themes → Edit code → theme.liquid, und fügen Sie das Snippet direkt über </body> ein.
Wix
Settings → Custom Code → Add Code, stellen Sie es so ein, dass es auf allen Seiten im Abschnitt "Body - end" geladen wird.
Webflow
Project Settings → Custom Code → Footer Code, dann veröffentlichen Sie Ihre Website.
Jede andere Website
Wenn Sie das HTML Ihrer Website bearbeiten können, fügen Sie es vor </body> ein. Es funktioniert überall gleich.

Warum eine WhatsApp-Schaltfläche zu Ihrer Website hinzufügen

Kein Formular, keine E-Mail, kein Neuladen der Seite

Besucher erreichen Sie in einer App, die sie bereits auf ihrem Telefon offen haben, anstatt in ein Kontaktformular zu tippen und auf eine Antwort zu warten.

Es trifft Besucher dort, wo sie bereits sind

WhatsApp ist die Standard-Messaging-App für Milliarden von Menschen weltweit. Für die meisten Besucher gibt es nichts Neues zum Herunterladen oder Registrieren.

Jeder Chat beginnt mit Kontext

Eine vorausgefüllte Begrüßung bedeutet, dass das Gespräch nicht kalt beginnt. Besucher landen in WhatsApp mit ihrer Nachricht bereits gerahmt.

Sie kontrollieren genau, wo es sitzt

Legen Sie Farbe, Ecke und Versatz fest, damit das Widget zu Ihrer Website passt, anstatt einer generischen Standard-Blase.

Kostenlos ohne Genehmigungsprozess

Keine WhatsApp Business API-Anfrage, keine separate Nummer, kein Code über ein einzelnes Script-Tag hinaus.

Chat-Schaltfläche vs. Chat-Widget: Wo ist der Unterschied?

Chat-Schaltfläche

Ein statischer Link oder Symbol, der beim Anklicken einen WhatsApp-Chat öffnet. Keine Konfiguration über die Zieltelefonnummer hinaus.

Chat-Widget

  • Konfigurierbare Farbe, Position und vorausgefüllte Begrüßung
  • Funktioniert überall: WordPress, Shopify, Wix, Webflow oder einfaches HTML, keine Abhängigkeiten
  • Das ist genau das, was Sie oben bauen

Häufig gestellte Fragen

Ist dieser WhatsApp-Chat-Widget-Generator kostenlos? +

Ja. Das Umleitungs-Widget, das Sie oben erstellen (mit Ihrer Nummer, Farbe, Position und Begrüßung), ist kostenlos, mit einem kleinen Badge "Powered by Chat Quotient". Eine KI-Agent-betriebene Pro-Version ist für die Zukunft geplant.

Benötige ich die WhatsApp Business API, um sie zu verwenden? +

Nein. Das Widget öffnet einen normalen WhatsApp-Chat mit Ihrer bestehenden WhatsApp-Nummer. Keine Business API-Genehmigung oder separate Nummer erforderlich.

Funktioniert es auf WordPress, Shopify, Wix oder einer anderen Website? +

Ja. Es ist ein einzelnes <script>-Tag ohne Abhängigkeiten, daher funktioniert es überall, wo Sie HTML einfügen können: WordPress, Shopify, Wix, Webflow, Squarespace oder eine handgebaute Website.

Verlangsamt das Widget meine Website? +

Das sollte nicht wahrnehmbar sein. Das Skript ist klein, wird mit Async und Defer geladen, damit es Ihre Seite niemals blockiert, und wird in einem isolierten Shadow DOM gerendert, damit es nicht mit den Stilen Ihrer Website kollidiert.

Kann ich den Namen eines Besuchers erfassen, bevor er zu WhatsApp geht? +

Noch nicht. Die Lead-Erfassung vor der WhatsApp-Übergabe steht auf der Roadmap, und wir werden den Schalter hier reaktivieren, sobald er fertig ist.

Wo wird meine Konfiguration gespeichert? +

Nirgendwo auf unseren Servern. Ihre Einstellungen befinden sich vollständig im Script-Tag, den Sie auf Ihre Website einfügen. Um später etwas zu ändern, kehren Sie zu dieser Seite zurück, konfigurieren Sie neu und kopieren Sie das neue Snippet (behalten Sie eine Kopie des aktuellen, da wir ihn nicht für Sie speichern).

Wo ist der Unterschied zwischen einer Chat-Schaltfläche und einem Chat-Widget? +

Ein "Chat-Button" ist normalerweise nur ein statischer Link, der WhatsApp öffnet. Ein "Chat-Widget" (das diese Werkzeug baut) ist ein schwebender Launcher mit konfigurierbarer Begrüßung, Position und Farbe.

Kann ich meine persönliche WhatsApp-Nummer verwenden oder benötige ich eine Geschäftsnummer? +

Jede WhatsApp-Nummer funktioniert, persönlich oder geschäftlich. Geben Sie einfach mit Ländercode und ohne Leerzeichen oder Pluszeichen ein.