# WhatsApp-Widget ## Integration des WhatsApp-Widgets Fügen Sie mit dieser einfachen Anleitung einen schwebenden WhatsApp-Chat-Button zu Ihrer Website hinzu. > **Gut zu wissen.** Das WhatsApp-Widget ist eine einfache „Click-to-Chat“-Schaltfläche – ein Klick darauf öffnet WhatsApp für Ihre Besucher, damit diese Ihnen dort eine Nachricht senden können. Es leitet keine Nachrichten in Ihren Chats-Posteingang weiter und aktiviert nicht von selbst die KI. Für ein KI-Chat-Erlebnis, das direkt auf Ihrer Website eingebettet ist, verwenden Sie stattdessen das separate [Chat-Widget](chat-widget.md). > > **Sie möchten nur einen einfachen Link oder eine eigene Schaltfläche?** Wenn Sie kein schwebendes Widget wünschen und stattdessen lieber Ihre eigene Schaltfläche (oder einen Textabschnitt) direkt mit einem WhatsApp-Chat verknüpfen möchten, springen Sie weiter unten zu [Bevorzugen Sie einen einfachen Link oder eine Schaltfläche? (wa.me)](#prefer-a-plain-link-or-button-wa-me). Für ein SMS-Äquivalent siehe [Hinzufügen eines Click-to-Text (SMS)-Links](../messaging-channels/sms.md#adding-a-click-to-text-sms-link-to-your-website). ### Installation 1. Öffnen Sie die HTML-Datei Ihrer Website in einem Texteditor. 2. Suchen Sie das ``-Tag (normalerweise am Ende Ihrer HTML-Datei). 3. Fügen Sie das folgende Skript direkt vor dem ``-Tag ein: {% code overflow="wrap" %} ```html ``` {% endcode %} 1. Ersetzen Sie im obigen Code: * `NUMBER` durch Ihre WhatsApp-Nummer * Beispiel: Verwenden Sie für die Nummer +1 555 123 4567 einfach: 15551234567 ### Hinzufügen einer benutzerdefinierten Nachricht Wenn Sie möchten, dass eine vorausgefüllte Nachricht erscheint, sobald jemand auf den Button klickt: 1. Verwenden Sie stattdessen diesen Code: {% code overflow="wrap" %} ```html ``` {% endcode %} 1. Beispiel mit einer echten Nummer und Nachricht: {% code overflow="wrap" %} ```html ``` {% endcode %} ### Was Sie erhalten Nach der Installation sehen Sie automatisch: * Einen grünen WhatsApp-Button unten rechts auf Ihrer Website * Der Button bleibt beim Scrollen sichtbar * Der Button funktioniert nahtlos auf Mobilgeräten * Eine dezente Animation erscheint, wenn Sie mit der Maus über den Button fahren ### Zusätzliche Informationen * Ihre Telefonnummer kann mit oder ohne folgende Zeichen geschrieben werden: * Pluszeichen (+) * Leerzeichen * Bindestriche (-) * Diese werden automatisch korrekt verarbeitet * Die Nachricht kann ganz natürlich Leerzeichen enthalten * Keine zusätzlichen Dateien oder Installationen erforderlich * Der Button passt sich automatisch an mobile Bildschirme an ### Vollständiges Webseiten-Beispiel {% code overflow="wrap" %} ```html My Website ``` {% endcode %} ## Bevorzugen Sie einen einfachen Link oder Button? (wa.me) Das obige Widget bietet Ihnen einen fertigen schwebenden Button. Wenn Sie jedoch bereits einen eigenen Button (oder einen Menü-Link, ein Bild oder einen Text) haben und möchten, dass dieser einfach einen WhatsApp-Chat mit Ihrer Nummer öffnet, benötigen Sie das Widget gar nicht – Sie verlinken ihn einfach mit einer `wa.me` URL. Das Format lautet: {% code overflow="wrap" %} ``` https://wa.me/NUMBER ``` {% endcode %} Ersetzen Sie `NUMBER` durch Ihre vollständige Nummer im internationalen Format – **nur Ziffern, kein Pluszeichen, keine Leerzeichen oder Bindestriche**. Für +31 6 5801 5937 würden Sie zum Beispiel Folgendes verwenden: {% code overflow="wrap" %} ``` https://wa.me/31658015937 ``` {% endcode %} ### Vorab ausgefüllte Nachricht Damit beim Öffnen des Chats bereits eine Nachricht vorausgefüllt ist, fügen Sie `?text=` gefolgt von Ihrer Nachricht hinzu: {% code overflow="wrap" %} ``` https://wa.me/31658015937?text=Hi!%20I%20have%20a%20question ``` {% endcode %} Leerzeichen in der Nachricht müssen als `%20` geschrieben werden (so gehen Links mit Leerzeichen um). ### Einbindung in einen Button Verlinken Sie einen beliebigen Button mit dieser URL – genau so, wie Sie einen Button mit jeder anderen Webadresse verlinken würden. In reinem HTML sieht das so aus: {% code overflow="wrap" %} ```html Chat on WhatsApp ``` {% endcode %} In einem Website-Baukasten (Wix, Squarespace, WordPress, Webflow usw.) fügen Sie wie gewohnt einen Button hinzu und fügen die `wa.me` URL in das Feld „Link“ / „URL“ ein. > **Sie möchten einen kurzen Link, der zwischen mehreren Nummern rotiert, sich an wiederkehrende Besucher erinnert und Klicks nachverfolgt?** Verwenden Sie Short Links (unter **Einstellungen → Kanäle**) anstelle einer einfachen `wa.me`-URL.