Musterschreinerei

Eine fiktive deutsche Website. Der Chat öffnet sich nach 3 Sekunden von selbst (nur auf großen Bildschirmen) und zeigt drei Begrüßungsnachrichten.

Beispiel 3: Alle Optionen per JavaScript

Statt data-*-Attributen kannst du das Widget auch per JavaScript konfigurieren. Das ist praktisch, wenn die Werte aus einem CMS kommen oder du mehrere Begrüßungstexte brauchst.

<script src="https://whatsapp-widget.doebeling.dev/whatsapp-widget.js"></script>
<script>
  WhatsAppWidget.init({
    phone: '+49 000 0000000',
    name: 'Max Mustermann',
    status: 'Musterschreinerei · antwortet meist am selben Tag',
    avatar: 'assets/avatar.svg',          // lokal hosten, keine externen Bilder
    welcome: [
      'Hallo und willkommen in der Musterschreinerei! 👋',
      'Planen Sie eine Küche, einen Einbauschrank oder eine Reparatur?',
      'Schreiben Sie uns einfach – gern auch mit Maßen oder Fotos.',
    ],
    placeholder: 'Ihre Nachricht an uns …',
    lang: 'de',
    autoOpen: 3,                          // Sekunden, nur auf großen Bildschirmen
    color: '#8a4b20',                     // Kopfzeile, Button und Senden-Knopf
    theme: 'auto',                        // folgt dem Hell/Dunkel-Modus des Systems
    privacyUrl: '/datenschutz',
  });
</script>

Events für eigene Auswertungen

Das Widget selbst trackt nichts. Wenn du z. B. eine datensparsame Statistik (Matomo o. ä.) nutzt, kannst du auf diese Events reagieren:

document.addEventListener('whatsapp-widget:open',  (e) => console.log('geöffnet', e.detail.auto));
document.addEventListener('whatsapp-widget:close', ()  => console.log('geschlossen'));
document.addEventListener('whatsapp-widget:send',  (e) => {
  console.log('gesendet', e.detail.message, e.detail.url);
  // e.preventDefault() verhindert, dass WhatsApp geöffnet wird
});

Das Beispiel nutzt die Platzhalter-Nummer +49 000 0000000. Das kleine Protokoll unten links zeigt die Events und den WhatsApp-Link, statt ihn zu öffnen.