Copy-paste WhatsApp-Widget-HTML, vom nackten wa.me-Link bis zum vollständigen schwebenden Button, plus was der reine Code allein noch selbst zu bauen übrig lässt.
Falls du nach dem tatsächlichen HTML gesucht hast, hier ist es, keine Anmeldung nötig:
<a href="https://wa.me/15551234567">Chat with us on WhatsApp</a>Ersetze 15551234567 durch deine Nummer im vollständigen internationalen Format: zuerst der Ländercode, kein Pluszeichen, keine Leerzeichen, keine führende Null. Dieser Link allein reicht schon aus, um einen WhatsApp-Chat mit deinem Unternehmen zu öffnen. Er ist auch die vollständige, ehrliche Antwort auf “gib mir den HTML-Widget-Code”, denn alles, was danach kommt, bist du (oder ein Generator), der die Teile baut, die diese eine Zeile nicht abdeckt.
Ein Besucher landet auf dem Link, ohne dass etwas eingetippt ist. Füge den text-Parameter hinzu, damit im Textfeld bereits eine Nachricht wartet, wenn sich der Chat öffnet:
<a href="https://wa.me/15551234567?text=Hi%2C%20I%27d%20like%20to%20ask%20about%20pricing">
Chat with us on WhatsApp
</a>Die Nachricht muss URL-codiert sein: %20 ist ein Leerzeichen, %2C ist ein Komma, %27 ist ein Apostroph. Schreibe zuerst den Satz, den du haben möchtest, und lasse ihn dann durch einen beliebigen URL-Encoder laufen, bevor du ihn in den text-Wert einfügst, denn ein rohes Leerzeichen oder Satzzeichen mitten im Query-String bricht den Link in manchen Browsern.
Ein Textlink ist nicht das, was die meisten Leute mit “WhatsApp-Widget” meinen. Der Button in der Ecke ist CSS auf demselben Link:
<a
href="https://wa.me/15551234567?text=Hi%2C%20I%27d%20like%20to%20ask%20about%20pricing"
target="_blank"
rel="noopener"
aria-label="Chat on WhatsApp"
style="
position: fixed;
bottom: 24px;
right: 24px;
z-index: 999;
width: 60px;
height: 60px;
border-radius: 50%;
background: #25D366;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0,0,0,.2);
"
>
<svg width="30" height="30" viewBox="0 0 24 24" fill="white" aria-hidden="true">
<path d="M12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38a9.87 9.87 0 0 0 4.74 1.21h.01c5.46 0 9.9-4.45 9.9-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2Z"/>
</svg>
</a>Diese Version verzichtet auf eine separate Icon-Datei, indem sie das Telefon-/Chat-Symbol als SVG inline einbindet, sodass es wirklich ein einziger in sich geschlossener Block ist: füge ihn vor </body> ein, und es gibt sonst nichts hochzuladen. Vier Dinge bleiben trotzdem, die du von Hand erledigen musst, und genau dort verdient sich der eigentliche Generator seinen Nutzen.
Mobile und Desktop verhalten sich nicht gleich, und nichts in diesem Snippet steuert das. Klick auf einen wa.me-Link auf einem Handy mit installiertem WhatsApp, und die App öffnet sich direkt. Ohne installierte App schickt er den Besucher stattdessen zum App Store, es gibt keine Fallback-Nachricht oder alternative Kontaktmethode, die du über den Link selbst konfigurieren kannst. In einem Desktop-Browser öffnet er web.whatsapp.com in einem neuen Tab, was nur funktioniert, wenn der Besucher in diesem Browser bereits bei WhatsApp Web eingeloggt ist, andernfalls starrt er auf einen QR-Code ohne jeden Kontext, warum. Alle drei Ergebnisse stammen aus demselben href. Mit reinem HTML kannst du weder erkennen, welches gleich eintritt, noch es abfangen.
Die vorgefüllte Nachricht steckt in der URL, nicht in einem Formularfeld. Änderst du sie, landest du wieder beim manuellen Codieren einer neuen Zeichenkette, beim Aufspüren jeder Seite, auf der der Link eingefügt ist, und beim dortigen Austauschen, falls du keine gemeinsame Vorlage hast.
Es gibt keine Icon-Datei, die du austauschen kannst, ohne den SVG-Pfad von Hand zu bearbeiten, und keine Möglichkeit, den Button zu verschieben, in der Größe zu ändern oder umzufärben, ohne den Inline-Style-Block direkt, Zeile für Zeile, anzufassen.
Nichts hier erfasst einen Lead, bevor sich der Chat öffnet. Der Link (oder der Button) führt in dem Moment, in dem er angeklickt wird, direkt zu WhatsApp. Falls du einen Namen und einen Kontaktgrund haben möchtest, bevor das Gespräch beginnt, ist das ein separates Formular, das du selbst bauen, verdrahten und irgendwie in den text-Parameter einspeisen müsstest.
Der WhatsApp-Chat-Widget-Generator ist ein kostenloses Tool, das dieselbe Handvoll Einstellungen in ein einziges Script-Tag verwandelt, statt in einen CSS-Block, den du selbst pflegst. Stelle deine Nummer ein, wähle eine Farbe, lege Position und Abstände fest, schreibe eine Begrüßung, und schalte optional ein Vor-Chat-Formular ein (eine kurze Frage, mit E-Mail oder Telefon als Pflichtfeld markiert oder nicht), das Kontext sammelt, bevor sich das WhatsApp-Fenster überhaupt öffnet. Das Tool gibt Folgendes aus:
<script src="https://cdn.thechatquotient.com/widget/v1/widget.js"
data-widget-id="wgt_xxxxxxxx"
data-whatsapp-number="15551234567"
data-color="#128C7E"
data-position-vertical="bottom"
data-position-horizontal="left"
data-offset-vertical="24"
data-offset-horizontal="24"
data-z-index="999"
data-greeting="Hi! Ask us anything."
data-prechat="true"
data-prechat-title="Before we chat"
data-prechat-description="Tell us what you need help with."
async
defer
></script>Jede Einstellung ist ein beschriftetes data--Attribut in einer Zeile, daher bedeutet das Ändern der Begrüßung oder das Verschieben des Buttons in die andere Ecke, das Tag erneut aus dem Formular zu kopieren, statt eine CSS-Datei zu durchsuchen. Das Icon, die Positionierungslogik, die Deep-Link-Behandlung für Mobile versus Desktop und das Vor-Chat-Formular leben alle im gehosteten Skript, auf das das Tag zeigt, was das rohe HTML oben allein nicht kann, ohne dass du es selbst schreibst.
Falls du ein generiertes Snippet einfügst und wissen möchtest, was jede Zeile steuert, bevor du sie von Hand änderst, hier ist, was das Tag akzeptiert:
| Attribut | Steuert |
|---|---|
data-widget-id | Eindeutige, vom Generator vergebene ID, diese nicht bearbeiten |
data-whatsapp-number | Zielnummer, internationales Format, kein + |
data-color | Hintergrundfarbe des Buttons, beliebiger Hex-Wert |
data-position-vertical | top oder bottom |
data-position-horizontal | left oder right |
data-offset-vertical / data-offset-horizontal | Pixelabstand von dieser Kante |
data-z-index | Stapelreihenfolge, erhöhen, falls ein anderes fixiertes Element den Button verdeckt |
data-greeting | Vorgefüllter Nachrichtentext, keine manuelle URL-Codierung nötig |
data-prechat | true, um vor dem Öffnen des Chats ein kurzes Formular anzuzeigen |
data-prechat-title / data-prechat-description / data-prechat-question | Texte, die im Vor-Chat-Formular angezeigt werden |
Sowohl das rohe HTML als auch das generierte Script-Tag kommen an denselben Ort: irgendwo, das auf jeder Seite gerendert wird, idealerweise direkt vor </body>.
theme.liquid, direkt über </body>, über Online Store → Themes → Edit Code.Erfordert der rohe HTML-Link ein WhatsApp-Business-Konto?
Nein. Eine private WhatsApp-Nummer funktioniert mit einem wa.me-Link genauso wie eine Business-Nummer. Business-spezifische Funktionen, wie ein Katalog oder automatische Antworten, sind nicht Teil des Links selbst.
Warum zeigt mein Button ein defektes Bild statt eines Icons?
Das passiert, wenn das HTML auf eine externe Icon-Datei verweist (<img src="/whatsapp-icon.svg">), die nicht unter diesem Pfad hochgeladen wurde. Die Inline-SVG-Version oben vermeidet das vollständig, da das Icon direkt im HTML geschrieben steht.
Kann ich das Widget-HTML stattdessen in einem <head>-Tag platzieren?
Technisch muss das Anchor-Tag selbst im <body> gerendert werden, da <head>-Inhalte nicht angezeigt werden. Skripte können aus dem <head> geladen werden, aber das Snippet direkt vor </body> zu platzieren, vermeidet Render-Blocking und ist das Muster, das die meisten Website-Baukästen erwarten.
Gibt es eine Grenze, wie viele WhatsApp-Widgets ich auf eine Seite setzen kann? Nichts hindert dich daran, zwei einzufügen, aber zwei schwebende Buttons, die in derselben Ecke gestapelt sind, sehen meist eher wie ein Fehler aus als wie eine Funktion. Falls du zwei Nummern brauchst (etwa Vertrieb und Support), gib jeder eine eigene Position, statt sie zu überlagern.
Funktioniert das bei Squarespace genauso? Squarespaces Code-Injection-Panel (unter Settings → Advanced) akzeptiert beide Versionen genauso, wie es WordPress’ Custom HTML Block tut, die Footer-Injection wendet es site-weit an einem einzigen Ort an.
Das buchstäbliche HTML für ein WhatsApp-Widget ist ein einziges <a href="https://wa.me/...">-Tag, und jetzt hast du es. Daraus den schwebenden, gebrandeten, lead-erfassenden Button zu machen, den die meisten Leute im Kopf haben, bedeutet entweder, das CSS und die Deep-Link-Grenzfälle selbst zu schreiben und zu pflegen, oder den WhatsApp-Chat-Widget-Generator das fertige Script-Tag in einem einzigen Copy-Paste ausgeben zu lassen, kostenlos, ohne Konto.
Fügen Sie die Chrome-Erweiterung hinzu und transformieren Sie die Art und Weise, wie Sie WhatsApp-Konversationen für Ihr Unternehmen verwalten.