In diesem Tutorial zeigen wir Ihnen eine neue Funktion, die wir entwickelt haben – eine Funktion, die viele von Ihnen gewünscht haben: einen Button, der ein Popup mit einem WhatsApp-Formular auf Ihrer Website öffnet. Egal, ob Sie einfaches HTML oder ein CMS wie WordPress mit Elementor verwenden – diese Anleitung zeigt Ihnen Schritt für Schritt, wie Sie es einrichten. Los geht‘s!
Video ansehen: https://youtu.be/J7NE3SRZoRE
Ihre Vorteile
Nach Abschluss dieser Anleitung haben Sie einen Button auf Ihrer Website, der beim Anklicken ein Popup mit einem anpassbaren WhatsApp-Formular öffnet. Dieses Popup wird von einem Widget unterstützt. Wir zeigen Ihnen, wie Sie es an Ihre Bedürfnisse anpassen – ob Banner, Countdown-Timer oder einfaches Formular.
Schritt 1: Widget als Popup einrichten
Widget erstellen oder darauf zugreifen: Bereiten Sie zunächst das gewünschte Widget vor. Dies kann ein vorhandenes WhatsApp-Widget oder ein neues sein, das Sie in Ihrem Dashboard erstellen.
Popup-Modus aktivieren: Gehen Sie in den Design-Bereich Ihrer Widget-Einstellungen. Suchen Sie nach der Option „Widget-Popup“ und aktivieren Sie sie. Diese Einstellung verwandelt Ihr Widget in ein Popup, das über einen Button ausgelöst werden kann.
Widget anpassen: Fügen Sie Elemente wie ein Banner (optional) oder ein Formular hinzu. Beispiel:
Fügen Sie ein Banner für neue oder wiederkehrende Besucher hinzu, um die Aufmerksamkeit zu erregen.
Fügen Sie ein WhatsApp-Formular ein, das Nutzer ausfüllen können.
Passen Sie Einstellungen wie Position (z. B. rechts auf der Seite) und Sichtbarkeit an.
Tipp: Wenn Sie das Banner nicht möchten, können Sie es später deaktivieren. Wir werden die Anpassungsmöglichkeiten später erläutern.
Schritt 2: Button-Code zu Ihrer Website hinzufügen
Button-Code abrufen: Der Button basiert auf einem einfachen HTML-Code, der das Widget-Popup auslöst. Sie finden diesen Code in unserem Begleitartikel (Link unten). Es sieht ungefähr so aus: html
<button data-chat-widget="open">Kontakt</button>Dies ist ein allgemeiner Code, der mit jedem Widget auf Ihrer Seite funktioniert – keine individuellen Anpassungen erforderlich!
Code einfügen:
Für HTML-Websites: Fügen Sie den Code an der gewünschten Stelle ein (z. B. in Kopf-, Fuß- oder Seitenmitte).
Für WordPress (Elementor): Fügen Sie in Elementor einen HTML-Block ein und fügen Sie den Button-Code ein.
Button gestalten: Passen Sie das Erscheinungsbild des Buttons (Farbe, Größe, Text) mit CSS oder den Styling-Tools Ihres Page Builders an.
Schritt 3: Popup testen
Funktionalität prüfen: Laden Sie Ihre Webseite, klicken Sie auf den Button und stellen Sie sicher, dass das Popup angezeigt wird. Es sollte Ihr konfiguriertes Widget anzeigen (z. B. mit einem WhatsApp-Formular oder Banner).
Einstellungen anpassen: Falls das Popup nicht wie erwartet funktioniert, passen Sie die Widget-Einstellungen an:
– Deaktivieren Sie das Banner, falls es nicht benötigt wird (gehen Sie dazu in die Widget-Einstellungen und deaktivieren Sie es).
– Aktivieren Sie das direkte Öffnen des Formulars (aktivieren Sie in den Widget-Einstellungen „Ersten Agent mit Formular öffnen“).
Entfernen Sie Countdown-Timer oder andere Funktionen (deaktivieren Sie diese bei Bedarf unter „Design > Countdown“).
Schritt 4: Popup anpassen (optional)
Das Widget-Popup ist äußerst flexibel. Hier sind einige Optionen:
Banner: Nutzen Sie vorgefertigte Vorlagen (z. B. Black Friday, Weihnachten) oder laden Sie eigene hoch. Banner können horizontal oder quadratisch sein – wählen Sie, was zu Ihrem Design passt.
Formularverhalten: Legen Sie fest, ob das Formular sofort oder nach der Interaktion mit dem Popup geöffnet wird.
Positionierung: Halten Sie das Widget dezent (z. B. durch ein kleines Symbol in der Ecke) oder heben Sie es hervor.
Automatisches Öffnen: Soll das Popup zusammen mit der Seite geladen werden? Aktivieren Sie in den Widget-Einstellungen unter „Erweiterte Optionen“ die Option „Widget beim Laden der Seite öffnen“.
Schritt 5: Anwendungsfälle und Beispiele
Mehrere Schaltflächen: Fügen Sie den Schaltflächencode an verschiedenen Stellen (Kopfzeile, Seitenmitte, Fußzeile) ein, um dasselbe Popup auszulösen.
- Eingebettetes Formular + Popup: Fügen Sie das WhatsApp-Formular direkt auf der Seite ein (über Shortcode oder Widget-Einstellungen), während der Popup-Button separat bleibt. Beides ist möglich!
WordPress-Widgets: Nutzen Sie den Button als Auslöser für ein Standard-Widget (nicht im Popup-Modus), um es bei Bedarf zu öffnen.
Schritt 6: Plattformübergreifend testen
Diese Lösung funktioniert universell:
HTML-Websites: Fügen Sie den Code direkt ein.
WordPress, Wix, Shopify usw.: Fügen Sie den Code überall dort ein, wo Ihre Plattform benutzerdefiniertes HTML zulässt.
Mobil: Stellen Sie sicher, dass Button und Popup auch auf kleineren Bildschirmen gut aussehen – das Scrollen sollte reibungslos funktionieren.
Warum das wichtig ist
Im Gegensatz zu beliebten Plugins wie Contact Form 7 bietet Ihnen dieser Ansatz:
Ein integriertes CRM zur Lead-Verfolgung.
Einen anpassbaren Editor für Formulare und Popups.
Designflexibilität ohne zusätzliche Plugins.
Unbegrenzte Möglichkeiten zum Experimentieren – keine Plan-Upgrades oder versteckten Kosten.
Ob Sie eine Kampagne durchführen, ein Angebot bewerben oder Leads erfassen – mit dieser Button-Popup-Kombination platzieren Sie Calls-to-Action genau dort, wo Sie sie brauchen.
Abschließende Tipps
Experimentieren: Testen Sie verschiedene Konfigurationen (Popup, Button, automatisches Öffnen), um herauszufinden, was bei Ihrer Zielgruppe am besten funktioniert.
Ressourcen: Den vollständigen Code und die Beispielseite finden Sie im unten verlinkten Artikel.
Feedback: Teilen Sie uns Ihre Erfahrungen mit – wir helfen Ihnen gerne weiter!