Wie man in wenigen Minuten einen kostenlosen WhatsApp-Chat-Widget zu einer beliebigen Website hinzufügt: der einfache wa.me-Link-Ansatz und ein Generator, der ein anpassbares, codefreies Snippet ausgibt.
Es gibt zwei ehrliche Wege, um einen WhatsApp-Chat-Widget zu einer Website hinzuzufügen, ohne dafür zu bezahlen: einen einfachen wa.me-Link einfügen und ihn selbst formatieren, oder einen Generator nutzen, der dir ein fertiges, anpassbares Snippet liefert. Beide sind wirklich kostenlos und dauern beide nur wenige Minuten. Sie setzen dich aber sechs Monate später in sehr unterschiedliche Positionen.
Dies behandelt beide Ansätze, beginnend mit dem einfachen Link, damit du genau weißt, worauf du verzichtest, wenn du ihn überspringst.
Die absolute Minimalversion ist eine Zeile HTML:
<a href="https://wa.me/15551234567?text=Hi%2C%20I%20have%20a%20question">Chat with us</a>Ersetze 15551234567 durch deine Nummer im vollständigen internationalen Format, kein Pluszeichen, keine Leerzeichen, keine führende Null. Der text-Parameter ist eine vorgefüllte Nachricht, URL-codiert, also ist %20 ein Leerzeichen und %2C ein Komma. Klicke drauf und WhatsApp öffnet sich mit dieser Nachricht bereits im Textfeld, bereit zum Versand durch den Besucher.
wa.me ist Metas eigener Kurzlink dafür, daher ist das Verhalten auf der anderen Seite konsistent: auf einem Telefon öffnet es die WhatsApp-App direkt, falls installiert, oder sendet den Besucher zum App Store, falls nicht. In einem Desktop-Browser ohne App öffnet es stattdessen web.whatsapp.com in einem neuen Tab. Du musst diese Erkennung nicht selbst programmieren, was der einzige Teil dieses Ansatzes ist, der wirklich für dich gelöst ist.
Alles andere nicht. Dieser einzelne Link ist nur unterstrichener blauer Text, überall wo du ihn einfügst. Um ihn in den schwebenden Button in der unteren Ecke zu verwandeln, den die Leute meinen, wenn sie “WhatsApp-Chat-Widget” sagen, schreibst du das CSS selbst:
<a href="https://wa.me/15551234567?text=Hi%2C%20I%20have%20a%20question"
target="_blank" rel="noopener"
style="position:fixed; bottom:20px; right:20px; z-index:5000;
width:56px; height:56px; border-radius:50%;
background:#25D366; display:flex; align-items:center;
justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.25);">
<img src="/whatsapp-icon.svg" alt="Chat on WhatsApp" width="28" height="28">
</a>Das funktioniert, aber jetzt brauchst du auch eine Icon-Datei, einen z-index, der hoch genug ist, um über deinem Cookie-Banner und allen Modals zu sitzen, ohne deine eigene Navigation auf Mobile zu überlagern, und einen Plan für das, was passiert, wenn jemand nächsten Monat den Nachrichtentext ändern möchte, was bedeutet, diesen gleichen Markup-Block wieder zu öffnen, überall wo er eingefügt wurde, auf jeder Seite oder in jedem Template, das ihn hat.
Der WhatsApp-Chat-Widget-Generator macht die gleiche Arbeit wie der Link oben, plus das Styling, die Positionierung und das Icon, und gibt dir dafür ein Script-Tag statt eines Blocks mit benutzerdefiniertem CSS zurück, den du selbst pflegen musst. Er ist kostenlos, erfordert kein Konto und berührt die WhatsApp Business API nicht, daher gibt es keinen Verifizierungsschritt, bevor du ihn nutzen kannst.
Hier ist die tatsächliche Anleitung:
#25D366) ist die Standardeinstellung, aber das Feld akzeptiert jeden Hexadezimalwert, wenn du es stattdessen an deine Brand-Farbe anpassen möchtest.text-Parameter im einfachen Link, aber bearbeitbar über das Formular statt einer URL-codierten Zeichenkette.Während du das Formular ausfüllst, wird eine Live-Vorschau des Buttons direkt auf der Seite gerendert, und das Code-Panel daneben wird in Echtzeit mit dem fertigen Snippet aktualisiert:
<script src="https://cdn.thechatquotient.com/widget/v1/widget.js"
data-widget-id="wgt_xxxxxxxx"
data-whatsapp-number="15551234567"
data-color="#25D366"
data-position-vertical="bottom"
data-position-horizontal="right"
data-offset-vertical="20"
data-offset-horizontal="20"
data-z-index="5000"
data-greeting="Hi! How can we help?"
async
defer
></script>Klicke auf Kopieren, füge dieses einzelne Tag irgendwo vor dem schließenden </body>-Tag auf deiner Site ein, und der Widget ist live. Es muss nichts anderes hochgeladen werden, keine Icon-Datei, kein separates Stylesheet. Jede Einstellung aus dem Formular (Farbe, Position, Abstände, Willkommensnachricht, Popup) ist als data--Attribut auf diesem Tag codiert, daher reist das Ganze als einzelnes Kopieren.
Die beiden Ergebnisse sehen oberflächlich ähnlich aus, ein Button in der Ecke, der WhatsApp öffnet, aber sie altern unterschiedlich.
Mit der handgerollten Version ist jede Einstellung ein Wert, der in Inline-Stilen oder einer separaten CSS-Datei vergraben ist. Die Willkommensnachricht zu ändern bedeutet, den text-Parameter in einer URL-codierten Zeichenkette zu finden und zu bearbeiten. Den Button zu verschieben, weil ein neuer Cookie-Banner ihn jetzt überlagert, bedeutet, das CSS auf jeder Seite oder jedem Template, wo du ihn eingefügt hast, erneut zu bearbeiten. Falls du einen vergessen hast, hat diese Seite stilschweigend einen kaputt aussehenden Widget, bis jemand es bemerkt. Nichts davon schlägt laut fehl, es driftet einfach seitenweise auseinander.
Das generierte Snippet hält jede dieser Einstellungen als beschriftetes Attribut in einer Zeile, das du in Sekunden aus dem Formular neu kopieren kannst, dann mit Find-and-Replace über deine Site hinweg, falls du keine gemeinsame Header- oder Footer-Include nutzt. Und weil die tatsächliche Button-Logik in der gehosteten Script-Datei lebt, auf die das Tag zeigt, nicht im Code, den du eingefügt hast, werden Bug-Fixes und Verhaltensverbesserungen am Widget selbst ausgerollt, ohne dass du deine Site je wieder berührst.
Die Mechanik ist überall gleich: bekomme das Snippet irgendwo, das auf jeder Seite rendert, idealerweise kurz vor </body>.
theme.liquid kurz über dem schließenden </body>-Tag über Online Store → Themes → Edit Code ein.Jede dieser Plattformen hat ihre eigenen Eigenheiten, die einen längeren Blick verdienen, wir werden WordPress später ausführlicher behandeln, aber der Einfügungsschritt selbst ist überall identisch: ein Script-Tag, ein Ort, angewendet auf jede Seite gleichzeitig.
Lade die Site in einem Inkognito-Fenster, damit gecachte Stile ein echtes Problem nicht verbergen, und überprüfe den Button sowohl auf Desktop als auch auf einem echten Telefon, nicht nur in einem verkleinerten Browser-Fenster. Klicke ihn von jedem aus an und bestätige, dass WhatsApp öffnet (die App auf Mobile, web.whatsapp.com auf Desktop) mit deiner Nummer und deiner Willkommensnachricht bereits ausgefüllt. Scrolle dann die Seite mit sichtbaren Cookie-Bannern oder festen Elementen. Das häufigste Fehlerszenario an diesem Punkt ist ein z-index-Konflikt, wo der Widget sich hinter einem anderen Element mit fester Position rendert, statt darauf zu sitzen.
Ist das wirklich kostenlos, oder gibt es einen Haken? Der Generator selbst ist kostenlos und erfordert kein Konto. Das Widget-Script, auf das er zeigt, wird kostenlos gehostet und bereitgestellt. Falls du später die Chrome-Erweiterung von The Chat Quotient installierst, um die Gespräche zu verwalten, die durch den Widget kommen, hat diese ihren eigenen kostenlosen Plan, aber das ist ein separater, optionaler Schritt, keine Anforderung für die Nutzung des Widgets.
Ist ein WhatsApp-Widget das gleiche wie WhatsApp Web?
Nein, und das ist eine häufige Verwechslung. WhatsApp Web (web.whatsapp.com) ist die Schnittstelle, die du nutzt, um WhatsApp-Nachrichten von einem Browser aus zu lesen und zu versenden. Ein WhatsApp-Widget-Web-Element ist der kleine Button, den du zu deiner eigenen Site hinzufügst, der, wenn angeklickt, einen Chat öffnet, entweder in der WhatsApp-App auf Mobile oder in WhatsApp Web auf einem Desktop ohne installierte App. Der Widget ist etwas, das du einbettest; WhatsApp Web ist, wo das sich ergebende Gespräch geöffnet wird.
Funktioniert der Widget, wenn ein Besucher WhatsApp nicht installiert hat? Auf Mobile sendet das Klicken ohne installierte App den Besucher zum App Store, um WhatsApp zuerst zu installieren. Es gibt keinen Weg drum herum, da der Link nur weiß, wie man zu WhatsApp selbst weiterleitet, nicht zu einem Ersatz-Messaging-Kanal.
Kann ich mehr als eine WhatsApp-Nummer haben, wie Sales und Support, auf dem gleichen Widget? Nicht auf einem Button. Der Widget ist um eine einzelne WhatsApp-Nummer pro Instanz gebaut. Wenn du zwei Einstiegspunkte brauchst, würdest du zwei Widgets mit unterschiedlichen Positionen und Willkommensnachrichten hinzufügen, obwohl zu diesem Punkt eine dedizierte Kontaktseite mit beiden separat aufgelistet normalerweise klarer für Besucher ist als zwei schwebende Buttons, die in der gleichen Ecke gestapelt sind.
Muss ich Code verstehen, um den Generator zu nutzen? Nein. Jede Einstellung ist ein Formularfeld, und das Einzige, das du einfügst, ist das einzelne Script-Tag, das er produziert, der gleiche Copy-Paste-Schritt unabhängig davon, auf welcher Plattform deine Site läuft.
Ein wa.me-Link ist wirklich alles, was du brauchst, wenn du dich damit wohlfühlst, dein eigenes CSS zu schreiben und zu pflegen und nicht dagegen ankämpfst, diesen Code jedes Mal zu besuchen, wenn sich etwas ändern muss. Der WhatsApp-Chat-Widget-Generator produziert das gleiche Ergebnis, einen schwebenden Button, der einen vorgefüllten WhatsApp-Chat öffnet, ohne das CSS, die Icon-Datei oder die Wartung, die damit kommt, es von Hand zu machen, und es ist immer noch kostenlos.
Fügen Sie die Chrome-Erweiterung hinzu und transformieren Sie die Art und Weise, wie Sie WhatsApp-Konversationen für Ihr Unternehmen verwalten.