Zum Inhalt springen
OmniChannels.ai
Menü

Kostenloses Tool

WhatsApp-Chat-Button für Ihre Website

Fügen Sie jeder Website in wenigen Minuten einen schwebenden WhatsApp-Button hinzu. Legen Sie Nummer, vorausgefüllte Nachricht, Farbe, Position, Begrüßung und Verzögerung fest, sehen Sie sich das Ergebnis live in einer Desktop- oder Mobilvorschau an und kopieren Sie dann ein kleines, eigenständiges Snippet mit Installationsanleitung für WordPress, Shopify, Wix und reines HTML.

Kostenlos · ohne Anmeldung · im Browser

Nummer und Nachricht

Geben Sie die Nummer wie bei einem Inlandsanruf ein oder beginnen Sie mit + oder 00. Leerzeichen, Bindestriche und Klammern sind erlaubt.

Erscheint im Eingabefeld der Kundin oder des Kunden und lässt sich vor dem Senden ändern. Arabisch, Emojis und Zeilenumbrüche werden automatisch kodiert.

Button-Einstellungen

Position

Ein weißes Icon auf dieser Farbe hat einen Kontrast von 2.0:1 und liegt unter den für Icons empfohlenen 3:1. Der Button bleibt für Screenreader benannt, ein dunkleres Grün ist aber besser lesbar.

Erscheint neben dem Button; Besucher können sie für den Rest des Besuchs schließen. Leer lassen für keine Blase.

Wird von Screenreadern vorgelesen und beim Darüberfahren als Tooltip angezeigt.

Anzeigen auf

Bei 0 erscheint er sofort. Eine kurze Verzögerung konkurriert nicht mit dem Haupt-Call-to-Action der Seite.

Live-Vorschau

Ihr Einbettungscode

Geben Sie eine gültige WhatsApp-Nummer ein, um den Code fertigzustellen.

<!-- WhatsApp chat button (generated with omnichannels.ai/tools/whatsapp-chat-button/) -->
<div id="ocwa" class="ocwa ocwa-r" hidden>
  <div id="ocwa-tip" class="ocwa-tip" dir="auto"><span>Hallo 👋 Wie können wir helfen?</span><button type="button" class="ocwa-x" aria-label="Schließen">&times;</button></div>
  <a class="ocwa-btn" href="https://wa.me/?text=Hallo%21%20Ich%20habe%20eine%20Frage%20zu%20Ihrer%20Website." target="_blank" rel="noopener" aria-label="Chatten Sie mit uns auf WhatsApp" title="Chatten Sie mit uns auf WhatsApp"><svg viewBox="0 0 24 24" width="30" height="30" aria-hidden="true" focusable="false"><path fill="#ffffff" d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg></a>
</div>
<style>
.ocwa{position:fixed;bottom:20px;z-index:2147483000;display:flex;flex-direction:column;align-items:flex-end;gap:10px;font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,Tahoma,Arial,sans-serif}
.ocwa[hidden]{display:none}
.ocwa-r{right:20px}.ocwa-l{left:20px;align-items:flex-start}
.ocwa-btn{width:58px;height:58px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.24);transition:transform .2s ease}
.ocwa-btn:hover{transform:scale(1.07)}
.ocwa-btn:focus-visible{outline:3px solid #1a73e8;outline-offset:3px}
.ocwa-tip{position:relative;box-sizing:border-box;max-width:min(260px,calc(100vw - 40px));margin:0;padding-block:10px;padding-inline:14px 36px;background:#fff;color:#111b21;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.18);text-align:start;overflow-wrap:anywhere}
.ocwa-x{position:absolute;top:5px;inset-inline-end:5px;width:26px;height:26px;padding:0;border:0;border-radius:50%;background:transparent;color:#54656f;font-size:20px;line-height:26px;cursor:pointer}
.ocwa-x:hover{background:#f0f2f5}.ocwa-x:focus-visible{outline:2px solid #1a73e8}
.ocwa-in{animation:ocwa-in .35s ease-out both}
@keyframes ocwa-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ocwa-in{animation:none}.ocwa-btn{transition:none}.ocwa-btn:hover{transform:none}}
@media (max-width:767px){.ocwa{bottom:16px}.ocwa-r{right:16px}.ocwa-l{left:16px}.ocwa-nomob{display:none!important}}
@media (min-width:768px){.ocwa-nodesk{display:none!important}}
@media print{.ocwa{display:none!important}}
</style>
<script>
(function(){var w=document.getElementById("ocwa");if(!w)return;var t=document.getElementById("ocwa-tip"),k="ocwa-tip-closed";if(t){var c=false;try{c=sessionStorage.getItem(k)==="1"}catch(e){}if(c){t.parentNode.removeChild(t)}else{t.querySelector("button").addEventListener("click",function(){t.parentNode.removeChild(t);try{sessionStorage.setItem(k,"1")}catch(e){}})}}setTimeout(function(){w.hidden=false;w.className+=" ocwa-in"},3000);})();
</script>

Eigenständig: etwa 3,8 KB, keine externen Skripte, Schriften oder Bilder, keine Cookies.

So bauen Sie ihn ein

  1. 1Kopieren Sie den Code oben.
  2. 2Installieren Sie ein Plugin für Header- und Footer-Code wie WPCode, oder öffnen Sie bei einem Block-Theme Design → Editor.
  3. 3Fügen Sie den Code im Footer-Bereich (Body-Ende) ein oder in einen Block „Individuelles HTML“ im Footer-Vorlagen-Teil.
  4. 4Speichern, Cache-Plugin leeren und auf dem Smartphone testen.

Stapeln sich die Chats auf einem einzigen Telefon? Beantworten Sie sie in einem gemeinsamen Posteingang

Ihre Eingaben werden nicht an unsere Server gesendet.

Kurze Antwort

Ein WhatsApp-Chat-Button ist eine kleine schwebende Schaltfläche auf einer Website, die beim Klick einen WhatsApp-Chat mit dem Unternehmen öffnet. Technisch ist er ein Link zu https://wa.me/ plus Unternehmensnummer und optionaler vorausgefüllter Nachricht, gestaltet als Symbol in einer Ecke der Seite. Besucher starten das Gespräch auf ihrem eigenen Smartphone oder in WhatsApp Web, ohne Formulare und ohne die Nummer zu speichern.

Vertrauenswürdige InfrastrukturOffizieller Meta Business Solution ProviderGoogle-RBM-PartnerGSMA-MitgliedISO/IEC 27001:2022ISO/IEC 27018ISO 9001:2015ISO 22301SOC 2 Type IIDSGVO-konform

So fügen Sie Ihrer Website einen WhatsApp-Button hinzu

  1. 1

    Nummer und Nachricht eingeben

    Wählen Sie das Land, geben Sie Ihre WhatsApp-Nummer ein und schreiben Sie die Nachricht, die Besucher senden, zum Beispiel eine Frage zu einer Bestellung.

  2. 2

    Button gestalten

    Wählen Sie Ecke, Farbe, Begrüßungsblase, Geräte und eine Verzögerung. Die Live-Vorschau zeigt den Button auf einer Beispielseite am Desktop und auf dem Smartphone.

  3. 3

    Code kopieren

    Kopieren Sie das Snippet. Es besteht aus wenigen Kilobyte HTML, CSS und JavaScript ohne externe Anfragen, Cookies oder Tracking.

  4. 4

    Vor </body> einfügen

    Folgen Sie der Anleitung für WordPress, Shopify, Wix oder reines HTML, veröffentlichen Sie und testen Sie den Button auf einem Smartphone und einem Computer.

Was der generierte Code macht

Das Snippet fügt in der unteren Ecke Ihrer Seiten einen einzelnen, fest positionierten Link ein. Der Link ist eine Standard-Click-to-Chat-URL in dem Format, das WhatsApp auf seiner Hilfeseite dokumentiert (faq.whatsapp.com/5913398998672934): https://wa.me/ plus Ihre vollständige internationale Nummer und auf Wunsch ?text= mit einer URL-kodierten Nachricht. Er öffnet auf Smartphones die WhatsApp-App und auf Computern WhatsApp Web oder die Desktop-App.

Alles ist inline: Das WhatsApp-Symbol ist ein SVG-Pfad, die Styles sind unter einem einzigen Klassenpräfix gekapselt, und das Skript besteht aus wenigen Zeilen für die Verzögerung und die schließbare Begrüßung. Es gibt keine externen Skripte, Schriften, Bilder oder Cookies, sodass der Button Ihre Seite nicht verlangsamt und keinen Drittanbieter-Tracker einbindet.

Barrierefrei und RTL-fähig

Schwebende Buttons zeigen oft nur ein Symbol, was Screenreader-Nutzer im Unklaren lässt. Der generierte Link hat ein von Ihnen festgelegtes aria-label (standardmäßig „Chatten Sie mit uns auf WhatsApp“), eine sichtbare Fokusmarkierung für Tastaturnutzer und ein dekoratives Symbol, das vor assistiven Technologien verborgen ist. Die Begrüßung hat eine echte Schließen-Schaltfläche mit eigener Beschriftung.

Besucher, die auf ihrem Gerät reduzierte Bewegung eingestellt haben, sehen den Button ohne Einblendanimation und ohne Zoom beim Überfahren. Die Begrüßung nutzt automatische Textrichtung und logische CSS-Eigenschaften, sodass Arabisch und andere rechts-nach-links geschriebene Texte korrekt dargestellt werden, und Sie können den Button bei RTL-Websites unten links platzieren.

  • Per Tastatur erreichbarer Link mit eindeutigem barrierefreiem Namen.
  • Berücksichtigt prefers-reduced-motion.
  • Beim Drucken ausgeblendet und optional je Gerätetyp.
  • Das Schließen der Begrüßung wird für den Besuch gespeichert, ohne Cookies.

Farbe, Position und Timing wählen

Unten rechts ist die übliche Position auf Websites mit Links-nach-rechts-Schrift, unten links passt oft besser zu arabischen Websites. Prüfen Sie aber, dass der Button kein Cookie-Banner, keinen Chatbot-Launcher und keine mobile Checkout-Leiste verdeckt. WhatsApp-Grün (#25D366) ist sofort wiedererkennbar; mit einem weißen Symbol erreicht es einen Kontrast von etwa 2:1. Wenn Barrierefreiheit Vorrang hat, bietet ein dunkleres Grün wie #128C7E etwa 4:1.

Eine Verzögerung von einigen Sekunden lässt Besuchern Zeit, die Seite zu lesen, bevor der Button erscheint, und ihn nur auf Mobilgeräten anzuzeigen ist sinnvoll, wenn Ihr Team vom Smartphone aus antwortet. Beschränken Sie die Begrüßung auf eine kurze, konkrete Zeile, etwa „Fragen zur Lieferung? Schreiben Sie uns.“

Der offizielle „Chat on WhatsApp“-Button und die Markenrichtlinien

WhatsApp stellt außerdem einen gebrandeten „Chat on WhatsApp“-Button in Grün und Weiß und in drei Größen bereit und bittet Unternehmen, ihn unverändert zu verwenden. Laut WhatsApp-Hilfebereich ist er derzeit nur auf Englisch verfügbar. Der schwebende Symbol-Button aus diesem Tool ist ein anderes, kompaktes Muster. Ganz gleich, welchen Sie verwenden: Verändern Sie nicht das WhatsApp-Logo selbst und erwecken Sie nicht den Eindruck, WhatsApp empfehle Ihr Unternehmen.

Wenn ein Telefon nicht mehr ausreicht

Ein Website-Button kann die Zahl eingehender Chats schnell vervielfachen. In der WhatsApp Business App laufen Unterhaltungen auf einer begrenzten Zahl verknüpfter Geräte. Auf der WhatsApp Business Platform (API) kann derselbe wa.me-Link einen gemeinsamen Posteingang speisen, in dem Chats Mitarbeitenden zugewiesen, zuerst von Chatbots oder KI-Agenten beantwortet und nach Ablauf des 24-Stunden-Kundenservice-Fensters mit genehmigten Vorlagen weiterverfolgt werden.

Planen Sie, wer zu welchen Zeiten wie schnell antwortet. Nennen Sie Ihre Antwortzeiten in der Begrüßung, wenn Sie Chats nicht rund um die Uhr betreuen.

Fragen zum WhatsApp-Button für Websites

Wie füge ich meiner Website einen WhatsApp-Button hinzu?

Erstellen Sie oben den Code mit Ihrer Nummer und Nachricht, kopieren Sie ihn und fügen Sie ihn direkt vor dem schließenden </body>-Tag Ihrer Website ein oder in den Footer-Code-Bereich Ihres Website-Baukastens. Danach erscheint er auf jeder Seite.

Ist dieses WhatsApp-Chat-Widget kostenlos?

Ja. Generator und Code sind kostenlos, erfordern kein Konto und haben keine Nutzungslimits. Der Button verlinkt direkt auf WhatsApp, es steckt also kein Abo und kein gehostetes Skript dahinter.

Verlangsamt ein WhatsApp-Button meine Website?

Nein. Das Snippet besteht aus wenigen Kilobyte Inline-HTML, -CSS und -JavaScript und stellt keine Netzwerkanfragen, bis ein Besucher darauf klickt – anders als Widgets, die externe Skripte, Schriften und Tracker laden.

Wie füge ich in WordPress einen WhatsApp-Button hinzu?

Nutzen Sie ein Plugin für Header- und Footer-Code wie WPCode und fügen Sie das Snippet in den Footer-Bereich ein, oder fügen Sie es bei einem Block-Theme in einen Block „Individuelles HTML“ in Ihrer Footer-Vorlage ein. Leeren Sie den Cache und testen Sie.

Wie füge ich in Shopify einen WhatsApp-Button hinzu?

Öffnen Sie im Shopify-Adminbereich Onlineshop → Themes und wählen Sie bei Ihrem Live-Theme Code bearbeiten. Öffnen Sie layout/theme.liquid, fügen Sie das Snippet direkt vor </body> ein, speichern Sie und prüfen Sie Ihren Shop auf dem Smartphone.

Kann ich den WhatsApp-Button nur auf Mobilgeräten anzeigen?

Ja. Deaktivieren Sie im Generator „Desktop“, dann wird der Button auf Bildschirmen ab 768 Pixel Breite ausgeblendet. Sie können auch „Mobil“ deaktivieren, um ihn nur am Desktop anzuzeigen.

Können mehrere Mitarbeitende Chats über den Website-Button beantworten?

Von einem einzelnen Telefon aus nur schlecht. Verbinden Sie die Nummer mit der WhatsApp Business API und leiten Sie Chats in einen gemeinsamen Posteingang, in dem mehrere Mitarbeitende und Chatbots über dieselbe Nummer antworten können.

Weitere kostenlose Tools