--- title: "WhatsApp-Chat-Button in Carrd einfügen (Anleitung 2026)" description: "Füge deiner Carrd-Seite einen WhatsApp-Chat-Button mit Copy-Paste-Code hinzu: Floating-Button, Chat-Widget und Multi-Chat-Optionen, plus Setup-Schritte und Fehlerbehebung." date: 2026-01-21 categories: ["web-development"] tags: ["carrd","whatsapp"] --- *Hinweis: Diese Anleitung enthält Referral-Links. Wenn du darüber kaufst, erhalte ich möglicherweise eine Provision – ohne zusätzliche Kosten für dich.* Kontaktformulare sind okay, aber manche Besucher wollen sofort Antworten. Ein **WhatsApp-Chat-Button** auf deiner [Carrd](https://go.bitdoze.com/carrd)-Seite lässt sie dich direkt anschreiben – ohne die Seite zu verlassen oder ein Formular auszufüllen. Das funktioniert gut für Service-Businesses, lokale Läden und Freelancer, die ohnehin in WhatsApp leben. Der Floating-Button und die Chat-Widget-Styles unten sind schlichtes HTML und CSS mit Inline-SVG, es gibt also keine Drittanbieter-Skripte zu laden. Eins vorweg: Jede Option hier lebt in einem Carrd-Embed-Element, und das braucht **Carrd Pro Standard oder höher** (19 $/Jahr). Der Free-Plan und Pro Lite können keinen eigenen Code einfügen. Details unten. [Carrd.co](https://go.bitdoze.com/carrd) Ein paar Carrd-Anleitungen: - [Popup-Modal in Carrd einfügen](/de/carrd-popup-modal/) - [Smooth Scroll in Carrd einfügen](/de/carrd-smooth-scroll/) - [Dark-Mode-Umschalter in Carrd einfügen](/de/carrd-dark-mode-umschalter/) - [Floating-Menü in Carrd einfügen](/de/carrd-floating-menue/) - [Seitenmenü in Carrd einfügen](/de/carrd-seitenmenue/) - [Carrd.co im Review](/de/carrd-review/) > Die komplette Liste mit Carrd-Plugins, -Themes und -Anleitungen findest du auf meiner **[carrdme.com](https://carrdme.com/)**-Website. ## Warum ein WhatsApp-Button für deine Carrd-Seite Ein paar Gründe, warum das funktioniert: 1. **Sofortiger Kontakt** – Besucher können dir direkt schreiben, statt auf E-Mail-Antworten zu warten. 2. **Höhere Conversion** – Menschen melden sich eher, wenn es so einfach ist. 3. **Mobilfreundlich** – WhatsApp ist schon auf ihrem Handy. Ein Tap und sie chatten. 4. **Vorausgefüllte Nachrichten** – Du kannst eine Standardnachricht setzen, damit Besucher nicht überlegen müssen, was sie schreiben. 5. **Globale Reichweite** – WhatsApp hat über 3 Milliarden monatliche Nutzer (Stand 2025). In vielen Ländern ist es der Hauptweg, wie Menschen einem Business schreiben. Ein simpler Floating-Button deckt die meisten Fälle ab. Wenn du ein „WhatsApp-Chat-Widget für Carrd“ mit Nachrichtenvorschau willst, bevor der Chat öffnet, ist Option 3 unten dafür gebaut. Service-Businesses, lokale Läden und Freelancer holen meist am meisten daraus. ## Was du vor dem Start brauchst Das ist die kurze Liste. Die Plan-Anforderung ist die, die Leute blockiert, also kommt sie zuerst. - Ein Carrd-Account mit Pro Standard oder höher (19 $/Jahr) – Embeds gibt es nicht im Free-Plan oder Pro Lite - Deine WhatsApp-Nummer im internationalen Format (Ländercode, keine führenden Nullen) - Die WhatsApp-App auf deinem Handy oder WhatsApp Web, um die Chat-Übergabe zu testen - Optional: die kostenlose WhatsApp-Business-App, wenn du Begrüßungsnachrichten und einen nummernversteckenden Kurzlink willst **Du brauchst Carrd Pro Standard oder höher** Das Embed-Element, das in jeder Option genutzt wird, erfordert Pro Standard (19 $/Jahr) oder höher. Der Free-Plan und Pro Lite (9 $/Jahr) können keinen eigenen Code einfügen, ein WhatsApp-Button ist auf diesen Plänen also nicht möglich. Preise geprüft gegen carrd.com/pro im September 2026. | Plan | Preis | Seiten | Was du bekommst | |---|---|---|---| | Pro Lite | 9 $/Jahr | 3 | Keine Embeds | | **Pro Standard** | **19 $/Jahr** | 10 | Embeds, Widgets, Forms, Analytics, Meta Tags | | Pro Plus | 49 $/Jahr | 25 | Alles aus Standard plus Advanced Settings, Password Protection, Framing | Pro Standard ist die Standard-Empfehlung: 19 $/Jahr sind etwa 1,60 $/Monat, und du bekommst Embeds plus Analytics (nützlich für das Klick-Tracking-Snippet weiter hinten). Für Pro Plus würde ich nicht extra zahlen, nur für einen Chat-Button. Den kompletten Plan-Vergleich findest du in [Carrd Pro – Pläne und Preise](/de/carrd-review/). [Carrd Pro holen](https://go.bitdoze.com/carrd) ## So fügst du einen WhatsApp-Button in Carrd ein Drei Schritte: Baue deinen `wa.me`-Link, füge ein Embed-Element hinzu, füge einen der vier Code-Styles unten ein. Alles ist Inline-HTML, -CSS und -SVG. Kein Widget-Skript, kein externer Font und (in der Regel) keine Cookie-Consent-Last durch den Code selbst. ### Schritt 1: Deinen WhatsApp-Chat-Link holen (wa.me) WhatsApps Click-to-Chat-Linkformat ist: ```text https://wa.me/YOURNUMBER ``` Ersetze `YOURNUMBER` durch deine Telefonnummer im internationalen Format, ohne `+`, Leerzeichen oder Bindestriche. Zum Beispiel: - US-Nummer: `12125551234` - UK-Nummer: `447911123456` Für eine vorausgefüllte Nachricht: ```text https://wa.me/YOURNUMBER?text=Hi,%20I%20found%20you%20on%20your%20website ``` Leerzeichen müssen in URLs `%20` sein. Nutze `%0A` für Zeilenumbrüche. Anatomie eines wa.me-Links https://wa.me/ 447911123456 ?text= Hi%20there - Ländercode + Nummer +, Leerzeichen, Striche, führende Nullen weg - URL-codierte Nachricht %20 = Leerzeichen, %0A = Umbruch Diese URL als href in einen der vier Button-Styles unten einfügen. **Das Nummernformat ist der häufigste Fehler** Kein +, keine Leerzeichen, Striche, Klammern oder führenden Nullen. 12125551234, nicht +1 (212) 555-1234. Alles andere lehnt WhatsApp mit „phone number shared via url is invalid“ ab. Zwei weitere offizielle Varianten, beide in WhatsApps [Click-to-Chat-Hilfeseite](https://faq.whatsapp.com/5913398998672934) dokumentiert: - **Nummernloser Pick-a-Chat-Link** – `https://wa.me/?text=Hi!%20Quick%20question` öffnet WhatsApp und lässt den Besucher wählen, wem er es schickt. - **WhatsApp-Business-Kurzlink** – `https://wa.me/message/YOURSHORTLINKCODE` versteckt deine Telefonnummer im Seitenquelltext. Ich behandle das ausführlich im Datenschutz-Abschnitt unten. `wa.me` ist das einzige Format in den aktuellen offiziellen Docs. Nutze nicht die alten `api.whatsapp.com/send?phone=`-Links, sie sind nicht mehr dokumentiert. Es lohnt sich, die offizielle Click-to-Chat-Seite ab und zu erneut zu prüfen, falls WhatsApp das Format ändert. ### Schritt 2: Ein Embed-Element in Carrd hinzufügen Das erfordert Pro Standard oder höher. Klicke auf das `+`-Zeichen und füge ein Embed-Element hinzu: - Type: Code - Style: Hidden Hidden hat drei Positionen im aktuellen Carrd: **Head**, **Body Top** und **Body End**. Faustregel: - **Body End** – alle vier Optionen. Jede enthält sichtbares Markup (ein `` oder ``), das in den Seiten-Body gehört, und Option 3s Skript fragt das DOM ab, du willst das Widget-Markup also zuerst geparst haben - **Head** – nur für reine ``-Snippets, etwa das Anpassungs-CSS weiter unten, wenn du es in einem separaten Embed hältst - **Body Top** – verfügbar, hier nicht gebraucht Wird das Elements-Panel unübersichtlich: Carrd hat im August 2026 ein Elements-Panel ausgeliefert (More Actions → Elements), das eingebetteten Code im Builder leichter auffindbar macht. Wohin der Embed-Code gehört <head> Hidden-Embed: Head Head → nur Style-CSS Body Top (hier ungenutzt) verfügbar <body>-Inhalt Hidden-Embed: Body End Body End → Optionen 1-4 **Im Builder erscheint nichts** Das Embed-Element gibt im Carrd-Builder nichts aus. Das ist erwartet. Veröffentliche die Seite und öffne die Live-URL, um den Button zu sehen. Wenn du Code einfügst und „nichts passiert“, hast du noch nicht veröffentlicht. ### Schritt 3: Button-Style auswählen Vier Copy-Paste-Optionen unten. Wähle eine, füge sie in das Code-Feld des Embeds ein, ersetze `YOURNUMBER` (oder die anderen Platzhalter), veröffentliche. --- ## Option 1: Einfacher Floating-WhatsApp-Button Ein sauberer WhatsApp-Button, der in der Ecke schwebt. Das ist meine Standard-Empfehlung: kleinster Footprint, ein Link, nichts zu pflegen. Erscheint er nach dem Veröffentlichen nicht, spring zur [Fehlerbehebung](#fehlerbehebung-whatsapp-button-funktioniert-nicht-in-carrd). ```html ``` **Wichtig:** Ersetze `YOURNUMBER` durch deine echte Telefonnummer (z. B. `12125551234`). Das `aria-label="Chat on WhatsApp"` entspricht WhatsApps eigenem Beispiel für ein barrierefreies Label in ihren offiziellen HTML-Snippets. Behalte es: Der Button ist nur Icon, Screenreader brauchen es also. Willst du zusätzlich ein Scroll-nach-oben-Control: Das Muster ist fast identisch. Sieh dir an, wie man [einen Zurück-nach-oben-Button in Carrd einfügt](/de/carrd-zurueck-nach-oben-button/) (der Embed-Screenshot in dieser Anleitung ist derselbe wie in Schritt 2). --- ## Option 2: Button mit Text Ein Button, der bei Hover den Text „Chat with us“ zeigt. Unter 600px kollabiert er zum Icon. ```html Chat with us ``` Das `aria-label` ist hier noch wichtiger: Sobald der Text auf Mobile kollabiert, ist das Label der einzige verbleibende barrierefreie Name. **Lieber den offiziellen Button?** WhatsApp veröffentlicht gebrandete „Chat on WhatsApp“-Button-Assets (grün und weiß, 3 Größen, SVG- und PNG-Downloads) mit Brand-Guidelines plus offiziellen HTML-Beispielen. Sie sind derzeit nur auf Englisch. Das eigene Inline-SVG in dieser Anleitung ist leichter und lässt dich das Label ändern. Die offiziellen Assets gibt es auf der Click-to-Chat-Hilfeseite. --- ## Option 3: Aufklappbares WhatsApp-Chat-Widget Ein Button, der sich zu einer Nachrichtenvorschau ausklappt, bevor WhatsApp öffnet. Das ist die schwerste der vier Optionen (meistes Markup und CSS), verkauft das Gespräch aber besser, weil Besucher einen Prompt sehen, bevor sie sich committen. Füge dieses Embed bei **Body End** ein (siehe Schritt 2). Das Skript unten wartet auf das DOM und bricht sauber ab, falls Button oder Popup fehlen, es funktioniert also an beiden Positionen. Body End bleibt die sicherere Platzierung, weil das Widget-Markup garantiert zuerst geparst wird. ```html
``` Passe den Header-Text und die Fake-Vorschau an deine Antwort-Erwartungen an. Willst du dasselbe Show/Hide-Muster für andere Inhalte, so [fügst du ein Popup-Modal in Carrd ein](/de/carrd-popup-modal/). --- ## Option 4: Multi-Chat-Button (WhatsApp + weitere) Wenn du mehrere Kontaktoptionen anbieten willst: ```html
``` Ersetze `YOURNUMBER`, `YOURUSERNAME` und `your@email.com`. Nutze das nur, wenn du wirklich mehrere Kanäle anbietest. Ein Ops-Hinweis: Jeder zusätzliche Kanal ist ein weiterer Posteingang, den du beobachten musst. --- ## So testest du deinen WhatsApp-Button nach dem Veröffentlichen Carrd-Embeds rendern nichts im Builder, Veröffentlichen ist also der einzige Weg, den Button zu sehen. Hake diese Checkliste nach jedem Publish selbst ab. - Veröffentliche die Seite aus dem Carrd-Builder - Öffne die Live-URL in einem privaten bzw. Inkognito-Fenster (umgeht Preview-Macken und gecachtes CSS) - Klicke den Button und bestätige, dass der wa.me-Chat mit intakter vorausgefüllter Nachricht öffnet - Teste auf einem echten Handy: Bestätige, dass die WhatsApp-App öffnet und der 60px-Button unten rechts keine CTAs oder Inhalte verdeckt - Nutzt du eine eigene Domain, teste auf der Live-Domain, nicht der Staging-URL. Siehe eine eigene Domain mit Carrd verbinden Öffnet der Klick WhatsApp, aber der Nachrichtentext sieht kaputt aus, ist deine URL-Kodierung falsch (zurück zu Schritt 1). Rendert gar nichts, liegt der Fix fast immer in der Fehlerbehebung unten. ## Deinen WhatsApp-Button anpassen Kleine CSS- und URL-Tweaks, nachdem der Button live ist. ### Position ändern Verschiebe den Button in eine andere Ecke: ```css /* Bottom left */ .whatsapp-float { bottom: 25px; left: 25px; right: auto; } /* Top right */ .whatsapp-float { top: 25px; right: 25px; bottom: auto; } ``` Nutze eine der beiden Regeln und tausche `.whatsapp-float` gegen `.wa-button`, `.wa-widget` oder `.chat-buttons`, falls du Option 2, 3 oder 4 gewählt hast. Für Option 3 links drehst du außerdem das Popup um: `.wa-widget-popup `. Egal welche Ecke du wählst: Stelle sicher, dass der Button nicht über Carrds eigenen Floating-Elementen liegt (siehe den Overlap-Fix in der Fehlerbehebung). ### Größe ändern Passe die Button-Maße an: ```css .whatsapp-float { width: 50px; /* Smaller */ height: 50px; } /* Or larger */ .whatsapp-float { width: 70px; height: 70px; } ``` Halte auf Mobile mindestens ein 48px-Touch-Target. Darunter verfehlen Taps den Button. ### Puls-Animation deaktivieren Entferne das `::before`-Pseudo-Element oder setze `animation: none`: ```css .whatsapp-float::before { display: none; } ``` ### Eigene vorausgefüllte Nachricht Passe an, was erscheint, wenn Besucher den Chat öffnen: ```text https://wa.me/12125551234?text=Hi!%20I'm%20interested%20in%20your%20web%20design%20services.%20My%20name%20is%20___ ``` Nutze `%20` für Leerzeichen und `%0A` für Zeilenumbrüche. Zwei Ops-Tricks, die sich lohnen: Schreib deine Antwortzeiten in die Nachricht („Ich antworte meist innerhalb von 2 Stunden“), damit die Erwartungen vor der ersten Nachricht gesetzt sind, und markiere die Quelle („gefunden auf deiner Website“), damit du weißt, welcher Kanal konvertiert. ### Klicks tracken (optional) Messe es, sonst weißt du nicht, ob der Button seinen Platz verdient. Carrd Pro Standard enthält schon Analytics (Google Analytics, Plausible, Matomo und andere), Tracking kostet dich also nichts extra auf dem Plan, den du ohnehin brauchst. Füge ein `onclick`-Attribut zum ``-Tag hinzu: ### Plausible ```html ``` ### Google Analytics ```html ``` ### Matomo ```html ``` ## Fehlerbehebung: WhatsApp-Button funktioniert nicht in Carrd Prüfe diese Punkte der Reihe nach. Die ersten zwei lösen die meisten Fälle. ### Button erscheint überhaupt nicht Ursache: Der Embed-Style steht nicht auf Hidden, dein Plan enthält keine Embeds (Free oder Pro Lite) oder du hast gespeichert, ohne erneut zu veröffentlichen. Fix: Setze das Embed auf Type: Code, Style: Hidden, bestätige, dass du Pro Standard oder höher hast, veröffentliche erneut und lade die Live-Seite hart neu. Kollidiert es weiterhin mit einem anderen fixierten Element, gelten dieselben Stacking-Regeln wie bei einem [Floating-Menü in Carrd](/de/carrd-floating-menue/) oder einem [Sticky-Header in Carrd](/de/carrd-sticky-header-hinzufuegen/). ### „Phone number shared via url is invalid“ Ursache: Die Nummer im `wa.me`-href ist nicht im vollen internationalen Format. Fix: Entferne `+`, Leerzeichen, Striche, Klammern und führende Nullen. `12125551234`, nicht `+1 (212) 555-1234`. Prüfe jeden `wa.me`-href, wenn du die Multi-Chat-Option eingefügt hast. ### Popup-Widget öffnet sich nicht (Option 3) Ursache: Das Skript lief, bevor das DOM fertig war, oder die Element-IDs stimmen nicht. Fix: Nutze das DOMContentLoaded-geschützte Skript aus Option 3 und verschiebe das Embed von Head nach Body End. Behalte die IDs `waButton` und `waPopup` wie im Snippet. Erneut veröffentlichen. ### Button überlappt andere Floating-Elemente Ursache: Zwei fixierte Elemente kämpfen um dieselbe Ecke und denselben `z-index`. Fix: Senke den WhatsApp-`z-index` (z. B. `9999` → `999`) oder verschiebe ihn in eine andere Ecke (siehe Position ändern). Dieselbe Kollision tritt bei Floating-Menüs und Sticky-Headern in Carrd auf. ## Datenschutz-Tipp: Nummer mit einem WhatsApp-Business-Kurzlink verstecken **Deine Nummer ist ab Veröffentlichung öffentlich** Ein simpler wa.me/YOURNUMBER-Link legt deine Telefonnummer im Seitenquelltext offen. Scraper greifen sie ab, und du solltest mit Spam-Anrufen und WhatsApp-Nachrichten rechnen. Das ist kein Carrd-Problem, sondern so funktioniert das Linkformat. Zwei Abschwächungen: 1. **Nutze eine dedizierte Business-Nummer** statt deiner privaten. Günstige SIM, separater WhatsApp-Account, saubere Trennung. 2. **Nutze den WhatsApp-Business-Kurzlink** – `https://wa.me/message/YOURSHORTLINKCODE`, generiert in den Business-Tools der kostenlosen WhatsApp-Business-App (Labels variieren je nach Version). Er verrät die Nummer nicht. Drop-in-href-Tausch für jede der vier Optionen: ```html ``` Mit Kurzlinks verlierst du die `?text=` vorausgefüllte Nachricht, also wähle: versteckte Nummer oder vorausgefüllte Nachricht. Für die meisten Solo-Betreiber gewinnt die vorausgefüllte Nachricht, und die Nummer steht ohnehin schon auf der Kontaktseite. Zum Cookie-Consent: Weil dieser Code ein simples `` mit Inline-CSS und -SVG ohne Drittanbieter-JavaScript ist, fügt er für sich genommen in der Regel keine Cookie- oder Consent-Last hinzu. Das ist eine allgemeine Einschätzung, keine Rechtsberatung. Lässt du Analytics-Skripte laufen (inklusive der Klick-Tracking-Snippets oben), ist das eine separate Frage, und du brauchst eventuell [einen Cookie-Hinweis auf deiner Carrd-Seite](/de/carrd-cookie-hinweis-hinzufuegen/). ## WhatsApp-Button auf Mobile vs. Desktop Der Button funktioniert auf beiden, aber das Erlebnis unterscheidet sich: - **Mobile**: Öffnet direkt die WhatsApp-App - **Desktop**: Öffnet WhatsApp Web in einem neuen Tab Willst du den Button nur auf Mobile zeigen: ```css @media (min-width: 769px) { .whatsapp-float { display: none; } } ``` Option 2 kollabiert unter 600px ohnehin zum Icon. Egal welchen Style du nutzt, halte das Touch-Target bei mindestens 48–60px, damit Daumen es zuverlässig treffen. ## Business-Tipps: Auto-Antworten, FAQs & mehr **Antwortzeit zählt** – Wenn du einen Chat-Button einbaust, sei bereit, schnell zu antworten. Langsame Reaktionen machen einen schlechten Eindruck. **Verfügbarkeitszeiten setzen** – Erwäge, deine Antwortzeiten in der vorausgefüllten Nachricht oder im Popup-Widget zu nennen. **WhatsApp Business nutzen** – Die kostenlose WhatsApp-Business-App bietet Begrüßungs- und Abwesenheitsnachrichten, Business-Profile und Kataloge. Die Abwesenheitsnachricht allein erspart dir den „gesehen um 2 Uhr nachts“-Stress. Biege wiederkehrende Fragen ab, bevor sie Chats werden. Ein [FAQ-Akkordeon-Bereich in Carrd](/de/carrd-akkordeon-hinzufuegen/) beantwortet die fünf Fragen, die jeder stellt, oder nutze ein [fertiges Carrd-Akkordeon-Plugin](https://go.carrdme.com/accordion), wenn du den Code nicht selbst rollen willst. Und halte einen zweiten Kanal live, damit WhatsApp nicht der einzige Posteingang wird: [ein Kontaktformular zu jeder statischen Website hinzufügen](https://www.bitdoze.com/add-contact-form-static-websites/) als Fallback. [Carrd.co testen](https://go.bitdoze.com/carrd) ## FAQ **Brauche ich einen bezahlten Carrd-Plan für einen WhatsApp-Button?** Ja. Das Embed-Element, das den Code hält, erfordert Pro Standard oder höher (19 $/Jahr). Der Free-Plan und Pro Lite (9 $/Jahr) enthalten keine Embeds. Siehe Carrd Pro – Pläne und Preise für den kompletten Vergleich. **Ist der WhatsApp-Button selbst kostenlos?** Ja. wa.me-Click-to-Chat-Links kosten nichts, und der Code in dieser Anleitung ist schlichtes HTML und CSS. Das einzig Bezahlte ist der Carrd-Plan, den du für Embeds brauchst. **Bremst das meine Seite aus?** Nein. Es gibt kein Drittanbieter-Widget-Skript. Jede Option ist ein Inline-<a>-Tag plus ein kleiner CSS-Block und ein Inline-SVG. Das ausklappbare Widget (Option 3) bringt am meisten Markup mit und ist trotzdem winzig gegenüber einem gehosteten Chat-Widget. **Brauche ich WhatsApp Business?** Nein. Ein normaler WhatsApp-Account funktioniert mit wa.me-Links problemlos. Die kostenlose WhatsApp-Business-App bringt Begrüßungs- und Abwesenheitsnachrichten, ein Business-Profil, Kataloge und den nummernversteckenden Kurzlink. Lohnt sich zu installieren, wenn du regelmäßig mit Kunden chattest. **Kann ich das auf anderen Site-Buildern nutzen?** Ja. Die vier Code-Optionen sind schlichtes HTML und CSS, sie funktionieren also überall, wo eigener Code oder HTML-Blöcke akzeptiert werden. Nur die Embed-Setup-Schritte sind Carrd-spezifisch. ## Fazit Ein WhatsApp-Button nimmt die Reibung zwischen Besuchern und dem Kontakt heraus. Der ganze Weg: Pro Standard, Code einfügen, veröffentlichen, Test-Checkliste abhaken – und dann entscheiden, ob der Business-Kurzlink für dich die vorausgefüllte Nachricht schlägt. Stell nur sicher, dass du bereit bist, die hereinkommenden Nachrichten zu beantworten. Willst du mehr Kontaktoptionen, kombiniere das mit einem [Kontaktformular auf jeder statischen Website](https://www.bitdoze.com/add-contact-form-static-websites/) oder einem [Popup-Modal](/de/carrd-popup-modal/).