WAButton

Universeller Einzeiler-Embed

WhatsApp-Button für HTML & Custom Websites

Fügen Sie HTML & Custom Websites in Minuten ein WhatsApp-Chat-Widget hinzu. Qualifizieren Sie Besucher, leiten Sie Gespräche weiter und halten Sie Ihr Theme schnell.

Meinen Button kostenlos erstellen

Einrichtung in 1 Min. Ziel: index.html (before </body>) or root layout component

Schritt-für-Schritt-Installation für HTML & Custom Websites

Folgen Sie diesen Schritten, um WAButton in Ihre HTML & Custom Websites-Website einzubetten. Keine komplexe Entwicklung, keine App-Gebühren.

  1. 1

    Ihr Embed-Snippet kopieren

    Kopieren Sie Ihr individuelles Skript-Snippet aus dem Dashboard Ihres WAButton-Widgets oder aus dem Onboarding-Screen.

    Tipp: Achten Sie darauf, das Attribut async aktiviert zu lassen, damit der Browser das Skript asynchron und ohne Blockierung lädt.

  2. 2

    Vor dem schließenden </body>-Tag einfügen

    Fügen Sie den Code direkt vor </body> in Ihre Haupt-HTML-Datei (z. B. index.html) oder in Ihre Root-Layout-Komponente (z. B. layout.tsx, App.vue, base.blade.php) ein.

    Tipp: Steht das Skript direkt vor </body>, lädt Ihr Seiteninhalt zuerst. 

    <script src="https://widget.wabutton.app/v1.js" data-widget-id="YOUR_WIDGET_ID" async></script>
  3. 3

    Im Browser öffnen

    Speichern Sie die Datei und laden Sie die Seite im Browser neu. Ihr schwebender WhatsApp-Button erscheint sofort in der unteren Ecke.

Warum Shop-Betreiber und Agenturen WAButton für HTML & Custom Websites wählen

Ein universelles Skript-Tag

Ein einziger winziger asynchroner Loader, der in statischem HTML sowie in SSR- und SPA-Frameworks identisch funktioniert.

Eingegrenzte Styles

Jeder Style ist auf Klassennamen mit dem Präfix wabutton- beschränkt und verändert daher Ihre Tailwind-, Bootstrap- oder eigenen CSS-Klassen nicht.

In sich geschlossenes Skript

Mit Preact gebaut und im Skript selbst mitgeliefert, sodass Ihre Seite weder jQuery noch React noch Icon-Fonts benötigt.

Erkennt SPA-Navigation

Behält den Widget-Zustand über clientseitige Routenwechsel hinweg automatisch bei (React Router, Next.js, Vue Router).

Häufige Fragen

Funktioniert WAButton mit Single-Page-Apps (SPAs) wie React, Next.js oder Vue?

Ja! WAButton initialisiert sich am window-Objekt und bleibt über die clientseitige Router-Navigation hinweg bestehen, ohne bei jedem Routenwechsel erneut ausgeführt werden zu müssen.

Verschlechtert WAButton meinen Google-Lighthouse- oder PageSpeed-Insights-Wert?

WAButton ist ein asynchrones Skript unter 40KB (mit gzip) vom Cloudflare-Edge und blockiert damit nicht den First Paint. Das Chat-Panel wird erst geladen, wenn ein Besucher es öffnet. Wie stark es Ihren eigenen Wert beeinflusst, hängt von Ihrer Website ab, weshalb Sie PageSpeed Insights vor und nach dem Hinzufügen ausführen sollten.

Passende kostenlose Tools

Kostenlose WhatsApp-Tools zur Steigerung der Shop-Conversion.

Weitere Installationsanleitungen

Die Besucher haben Sie schon. Machen Sie ihnen .

Mehr Besucher auf Ihre Website zu holen kostet Zeit und Geld. Ein WhatsApp-Button hilft Ihnen, mehr von denen zu gewinnen, die schon vorbeischauen, solange sie noch interessiert sind.

Meinen Button kostenlos erstellen Live-Builder ausprobieren

Eine Codezeile. Keine Kreditkarte. Kein Warten.