Ein WhatsApp-Chat-Widget per Copy-Paste-Snippet statt Plugin in WordPress einbinden: drei Platzierungsmethoden, plus was man aufgibt, wenn man noch ein weiteres Plugin installiert.
Wer „WhatsApp Chat Widget WordPress” sucht, landet meist bei einem Plugin: installieren, aktivieren, im eigenen Einstellungsbildschirm konfigurieren, und schon ist es ein weiteres Ding auf der Website, das jedes Mal aktualisiert werden muss, wenn sich WordPress-Core oder das Theme ändern. Es gibt einen schnelleren Weg, der das Plugin komplett umgeht. Ein WhatsApp-Widget ist ein schwebender Button, und ein schwebender Button ist ein paar Zeilen HTML plus ein Script-Tag, für beides hat WordPress bereits eine Stelle zum Einfügen, ohne dass irgendetwas auf der Plugins-Seite hinzukommt.
Hier geht es genau darum: drei verschiedene Wege, je nachdem, wie die Website aufgebaut ist, und wo sich ein dediziertes Plugin stattdessen tatsächlich lohnt.
Ein WordPress-WhatsApp-Plugin ist nicht unecht oder kaputt, es fügt tatsächlich einen schwebenden Button hinzu, genau wie der Snippet-Ansatz. Der Unterschied liegt darin, was es kostet, es dauerhaft zu behalten. Jedes Plugin auf einer WordPress-Website ist Code, der bei jedem Seitenaufruf läuft, eigene Updates braucht, wenn sich WordPress- oder PHP-Versionen ändern, und ein weiterer Eintrag ist, den ein Sicherheitsscanner anmeckert, sobald er veraltet. Eine Website mit Page-Builder, SEO-Plugin, Caching-Plugin, Formular-Plugin und jetzt noch einem WhatsApp-Plugin hat fünf separate Dinge, die miteinander in Konflikt geraten können, und gerade WhatsApp-Widget-Plugins laden tendenziell ihr eigenes CSS und JavaScript auf jeder einzelnen Seite, egal ob ein Besucher den Button je anklickt oder nicht.
Ein eingefügtes Snippet hat keinen Einstellungsbildschirm, kein Änderungsprotokoll und keinen Kompatibilitätshinweis. Es ist ein statischer Block im Footer des Themes oder ein Custom HTML Block auf einer Seite, und WordPress behandelt es genau wie jeden anderen eingebetteten Inhalt. Nichts zu aktivieren, nichts, das gepatcht werden muss.
Trotzdem ist ein Plugin nicht für jede Website die falsche Wahl. Wer sich nicht wohl dabei fühlt, irgendwo Code einzufügen, oder die Widget-Einstellungen von jemandem aus wp-admin ändern lassen möchte, der besser nicht an Appearance → Theme File Editor herangeht, fährt mit der Einstellungsoberfläche eines Plugins sicherer. Der Snippet-Weg setzt voraus, dass es in Ordnung ist, einmal einen Code-Block zu kopieren und einzufügen und ihn nur dann wieder anzufassen, wenn tatsächlich etwas geändert werden soll.
Der WhatsApp-Chat-Widget-Generator verwandelt Nummer, Button-Farbe, Position und Begrüßungsnachricht in ein einziges Script-Tag. Formular ausfüllen, WhatsApp-Nummer im internationalen Format ohne führende Null oder Pluszeichen, Farbe wählen, Ecke festlegen, in der der Button sitzen soll, und das Tool gibt etwa Folgendes aus:
<script src="https://cdn.thechatquotient.com/widget/v1/widget.js"
data-widget-id="wgt_xxxxxxxx"
data-whatsapp-number="15551234567"
data-color="#25D366"
data-position-vertical="bottom"
data-position-horizontal="right"
data-offset-vertical="20"
data-offset-horizontal="20"
data-z-index="5000"
data-greeting="Hi! How can we help?"
async
defer
></script>Das ist das gesamte Widget. Keine Icon-Datei zum Hochladen, kein Stylesheet zum Einbinden, kein PHP. Kopieren und eine der drei folgenden Platzierungen wählen, je nachdem, wie die WordPress-Website aufgebaut ist.
Ist das Theme auf dem Block-Editor (Gutenberg) aufgebaut, ist die schnellste Stelle für das Snippet direkt auf einer Seite oder in einem wiederverwendbaren Block, aber das zeigt das Widget nur auf dieser einen Seite. Für ein site-weites Widget ist der Block-Editor eigentlich nicht für eine footer-weite Einbindung gedacht, es sei denn, das Theme stellt dafür einen Template Part bereit.
Die meisten Themes, die Full Site Editing unterstützen, erlauben es, einen Custom HTML Block direkt in das Footer-Template einzufügen:
Da es im Footer-Template-Part liegt, wird es jetzt auf jeder Seite gerendert, die diesen Footer verwendet, bei den meisten Themes ist das jede Seite der Website.
Klassische (Nicht-Block-)Themes haben keinen Footer-Template-Part, der sich visuell bearbeiten lässt, also landet das Snippet stattdessen direkt in der PHP-Datei des Themes:
</body>-Tag suchen, meist gegen Ende der Datei.</body> einfügen.Das ist die einzige Methode, die direkt in den Theme-Code eingreift, und damit auch der eine echte Haken am Snippet-Ansatz: Ein Theme-Update kann footer.php überschreiben und das Eingefügte stillschweigend entfernen. Unterstützt das Theme ein Child-Theme, sollte diese Änderung stattdessen in der footer.php des Child-Themes vorgenommen werden, denn Child-Theme-Dateien überstehen Updates des Parent-Themes. Läuft kein Child-Theme und soll auch keines eingerichtet werden, gibt ein Plugin wie Insert Headers and Footers (ein zweckgebundenes, wartungsarmes Plugin, kein vollwertiges WhatsApp-Widget-Plugin) ein eigenes Footer-Feld, das überhaupt nicht an Theme-Dateien gebunden ist und jedes Theme-Update automatisch übersteht.
Ist die Website mit einem Page-Builder gebaut, gibt es dafür meist ein eigenes Widget:
Beide Builder rendern das rohe HTML und das Script-Tag unverändert, keine Bereinigung entfernt das <script>-Tag, wie es manche WYSIWYG-Inhaltsbereiche tun, das Widget lädt und verhält sich also genauso, als würde es direkt in footer.php eingefügt.
Unabhängig davon, wie es eingefügt wurde: die Website in einem Inkognito-Fenster laden, damit keine gecachte Seite eine veraltete Version zeigt, und jedes Template prüfen, auf dem das Widget erscheinen soll: die Startseite, ein Blogbeitrag und jede Landingpage, die mit einem anderen Template gebaut ist als der Rest der Website, denn eine Footer-Änderung in einer Theme-Datei oder einem Builder-Template deckt eine Landingpage mit separatem Template nicht automatisch mit ab. Den Button sowohl am Desktop als auch auf einem echten Handy anklicken. Auf Mobilgeräten mit installiertem WhatsApp sollte sich die App direkt öffnen, mit vorausgefüllter Nummer und Begrüßung; am Desktop öffnet sich web.whatsapp.com in einem neuen Tab.
Ein paar Situationen kippen die Waage wieder zugunsten eines dedizierten Plugins:
Verwalten mehrere nicht-technische Personen die Website, und keine davon sollte in die Nähe von Theme File Editor kommen, ist der Einstellungsbildschirm eines Plugins sicherer, als darauf zu vertrauen, dass alle die footer.php in Ruhe lassen. Soll das Widget über eine Checkbox in der Editor-Seitenleiste pro Seite oder Beitragstyp ein- oder ausgeblendet werden, statt eine Template-Datei zu bearbeiten, ist genau diese Pro-Seite-Logik das, was das PHP eines Plugins übernimmt und ein statisches Snippet nicht kann. Und läuft bereits eine vollständige WhatsApp-Business-API-Integration über ein Plugin, das das Widget als einen Baustein eines größeren Funktionsumfangs mit abdeckt, fügt es einen zweiten Wartungsposten hinzu statt einen wegzunehmen, nur die Widget-Hälfte durch ein separates Snippet zu ersetzen.
Für den üblichen Fall, eine WhatsApp-Nummer, ein Button, gleiches Verhalten auf jeder Seite, erledigt das Snippet dieselbe Aufgabe, ohne dass später etwas zu aktualisieren bleibt.
Wird meine WordPress-Website dadurch langsamer? Das Script-Tag nutzt async und defer, lädt also, ohne den Rest der Seite zu blockieren, und ist eine einzelne externe Anfrage statt der mehreren separaten Style- und Script-Dateien, die ein vollwertiges Plugin einbinden könnte.
Funktioniert das mit Caching-Plugins wie WP Rocket oder W3 Total Cache? Ja. Da es ein statisches Script-Tag ist und nichts, das bei jeder Anfrage per PHP gerendert wird, stört Page-Caching hier nicht, anders als bei manchen Plugin-basierten Widgets, die gelegentlich durch aggressive HTML-Minifizierungseinstellungen entfernt werden.
Kann ich das mit WooCommerce nutzen? Ja, die Platzierung ist identisch, footer.php, ein Footer-Template-Part oder das Footer-Template des Page-Builders, keinem davon ist es wichtig, ob die Website zusätzlich WooCommerce betreibt.
Was, wenn mein Theme keinen Theme File Editor hat? Manche Hoster deaktivieren ihn aus Sicherheitsgründen. In dem Fall den Custom HTML Block im Footer-Template-Part verwenden, falls das Theme Full Site Editing unterstützt, das Embed-Widget des Page-Builders, falls vorhanden, oder als Fallback ein kleines, zweckgebundenes Plugin wie Insert Headers and Footers, das überhaupt kein Anfassen von Theme-Dateien erfordert.
Muss ich das Snippet neu einfügen, wenn ich das WordPress-Theme wechsle? Ja, denn es steckt in der footer.php oder dem Template-Part des alten Themes. Dasselbe Snippet erneut aus dem Generator kopieren (die Widget-ID bleibt gleich) und beim neuen Theme mit der jeweils passenden der drei Methoden einfügen.
Ein WhatsApp-Widget ist ein einziges Script-Tag, und WordPress hat bereits drei Stellen, die genau dafür gebaut sind: ein Custom HTML Block im Footer-Template, footer.php über Theme File Editor, oder das Embed-Code-Widget des Page-Builders. Für keine davon muss ein eigens dafür gebautes Plugin installiert werden. Das Snippet aus dem WhatsApp-Chat-Widget-Generator holen, in die passende der drei Methoden einfügen, je nachdem, wie die Website aufgebaut ist, und es ist live, ohne dass beim nächsten WordPress-Release irgendetwas Neues zu aktualisieren wäre.
Fügen Sie die Chrome-Erweiterung hinzu und transformieren Sie die Art und Weise, wie Sie WhatsApp-Konversationen für Ihr Unternehmen verwalten.