Voeg een WhatsApp-chatwidget toe aan WordPress met een copy-paste snippet in plaats van een plugin: drie manieren om te plaatsen, plus wat u opgeeft door nog een plugin te installeren.
Zoek op “WhatsApp chat widget WordPress” en de meeste resultaten verwijzen naar een plugin: installeren, activeren, configureren in een eigen instellingenscherm, en nu is het weer iets extra’s op uw site dat moet worden bijgewerkt telkens wanneer de WordPress-kern of uw thema verandert. Er is een snellere route die de plugin volledig overslaat. Een WhatsApp-widget is een zwevende knop, en een zwevende knop is een paar regels HTML plus een scripttag, en voor beide heeft WordPress al een plek om te plakken zonder iets toe te voegen aan uw Plugins-pagina.
Dit artikel loopt dat door, op drie verschillende manieren afhankelijk van hoe uw site is gebouwd, en laat zien waar een speciale plugin juist wel zijn geld waard is.
Een WordPress WhatsApp-plugin is niet nep of kapot, hij voegt echt een zwevende knop toe, net als de snippet-aanpak. Het verschil zit in wat het kost om hem te blijven onderhouden. Elke plugin op een WordPress-site is code die bij elke paginaweergave draait, eigen updates nodig heeft zodra WordPress- of PHP-versies veranderen, en weer een extra regel is die een beveiligingsscanner aanmerkt zodra hij verouderd raakt. Een site met een pagebuilder, een SEO-plugin, een cachingplugin, een formulierplugin en nu ook een WhatsApp-plugin heeft vijf losse onderdelen die met elkaar kunnen botsen, en WhatsApp widget-plugins laden in het bijzonder vaak hun eigen CSS en JavaScript op elke pagina, ongeacht of een bezoeker ooit op de knop klikt.
Een geplakte snippet heeft geen instellingenscherm, geen changelog en geen compatibiliteitsmelding. Het is een statisch blok in de footer van uw thema of een Custom HTML-blok op een pagina, en WordPress behandelt het precies zoals elke andere ingesloten inhoud. Niets te activeren, niets bij te werken.
Dat gezegd hebbende, is een plugin niet voor elke site de verkeerde keuze. Voelt u zich niet prettig bij het ergens plakken van code, of wilt u dat de instellingen van de widget vanuit wp-admin te wijzigen zijn door iemand die niet aan Appearance → Theme File Editor zou moeten komen, dan is de instellingen-UI van een plugin de veiligere afweging. De snippet-route gaat ervan uit dat u het prima vindt om één blok code eenmalig te kopiëren en plakken, en er alleen naar terug te keren wanneer u daadwerkelijk iets wilt wijzigen.
De WhatsApp Chat Widget Generator zet uw nummer, knopkleur, positie en begroetingsbericht om in één scripttag. Vul het formulier in, WhatsApp-nummer in internationaal formaat zonder voorafgaande nul of plusteken, kies een kleur, kies in welke hoek de knop komt te staan, en de tool levert zoiets als dit op:
<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>Dat is de hele widget. Geen pictogrambestand om te uploaden, geen stylesheet om te laden, geen PHP. Kopieer hem en kies een van de drie onderstaande plaatsingsmethoden, afhankelijk van hoe uw WordPress-site is opgebouwd.
Als uw thema is gebouwd op de blokeditor (Gutenberg), is de snelste plek om de snippet neer te zetten rechtstreeks op een pagina of in een herbruikbaar blok, maar dan is de widget alleen op die ene pagina zichtbaar. Voor een sitebrede widget is de blokeditor niet echt gemaakt voor injectie in de hele footer, tenzij uw thema daar een template-onderdeel voor beschikbaar stelt.
De meeste thema’s die volledige site-editing ondersteunen, laten u een Custom HTML-blok toevoegen aan de footersjabloon zelf:
Omdat het zich in het footer-template-onderdeel bevindt, wordt het nu weergegeven op elke pagina die die footer gebruikt, wat bij de meeste thema’s neerkomt op elke pagina van de site.
Klassieke (niet-blok) thema’s hebben geen footer-template-onderdeel om visueel te bewerken, dus gaat de snippet in plaats daarvan rechtstreeks in het PHP-bestand van het thema:
</body>-tag, meestal onderaan het bestand.</body>.Dit is de enige methode die rechtstreeks aan themecode raakt, en daarmee komt ook de enige echte valkuil van de snippet-aanpak: een thema-update kan footer.php overschrijven en de plak stilletjes verwijderen. Als uw thema een child theme ondersteunt, voer deze bewerking dan uit in de footer.php van het child theme, aangezien bestanden van een child theme updates van het parent theme overleven. Draait u geen child theme en wilt u er ook geen opzetten, dan geeft een plugin zoals Insert Headers and Footers (een plugin met één doel en weinig onderhoud, geen volwaardige WhatsApp-widgetplugin) u een eigen footerveld dat helemaal niet aan themabestanden is gekoppeld en automatisch elke thema-update overleeft.
Als de site met een pagebuilder is gebouwd, is er meestal een widget die precies hiervoor gemaakt is:
Beide builders geven de ruwe HTML en scripttag ongewijzigd weer, geen opschoning verwijdert de <script>-tag zoals sommige WYSIWYG-inhoudsvelden dat doen, dus de widget laadt en gedraagt zich precies hetzelfde als wanneer u hem rechtstreeks in footer.php plakt.
Hoe u het ook heeft geplakt, laad de site in een incognitovenster zodat een gecachte pagina u geen verouderde versie toont, en controleer elke template waarop de widget zou moeten verschijnen: de homepage, een blogpost en elke landingspagina die met een andere template is gebouwd dan de rest van de site, aangezien een footeraanpassing in één themabestand of buildertemplate niet automatisch ook een landingspagina dekt die een aparte template gebruikt. Klik op de knop, zowel op desktop als op een echte telefoon. Op mobiel met WhatsApp geïnstalleerd zou de app rechtstreeks moeten openen met uw nummer en begroeting al ingevuld; op desktop opent het web.whatsapp.com in een nieuw tabblad.
Een paar situaties laten de balans doorslaan naar het installeren van een speciale plugin:
Als meerdere niet-technische mensen de site beheren en niemand van hen ook maar in de buurt van Theme File Editor zou moeten komen, is het instellingenscherm van een plugin veiliger dan erop vertrouwen dat iedereen footer.php met rust laat. Wilt u dat de widget per pagina of berichttype wordt getoond of verborgen via een vinkje in de zijbalk van de editor in plaats van door een templatebestand te bewerken, dan is die per-pagina-logica precies waar de PHP van een plugin voor is gemaakt en een statische snippet niet. En draait u al een volledige WhatsApp Business API-integratie via een plugin die de widget ook meeneemt als onderdeel van een groter geheel aan functies, dan voegt het vervangen van alleen het widgetdeel door een aparte snippet iets toe om te onderhouden in plaats van iets weg te nemen.
Voor het gangbare geval, één WhatsApp-nummer, één knop, hetzelfde gedrag op elke pagina, doet de snippet precies hetzelfde werk zonder dat er later nog iets bijgewerkt hoeft te worden.
Maakt dit mijn WordPress-site trager?
De scripttag gebruikt async en defer, dus hij laadt zonder de rest van de pagina te blokkeren, en het is één enkel extern verzoek in plaats van de meerdere losse style- en scriptbestanden die een volwaardige plugin zou kunnen laden.
Werkt dit samen met cachingplugins zoals WP Rocket of W3 Total Cache? Ja. Omdat het een statische scripttag is en niets dat door PHP bij elk verzoek wordt weergegeven, heeft paginacaching er geen invloed op, in tegenstelling tot sommige plugin-gebaseerde widgets die af en toe worden verwijderd door agressieve HTML-minificatie-instellingen.
Kan ik dit gebruiken met WooCommerce? Ja, de plaatsing is identiek: footer.php, een footer-template-onderdeel, of de footersjabloon van uw pagebuilder, geen van alle maakt het uit of de site ook WooCommerce draait.
Wat als Theme File Editor niet beschikbaar is bij mijn thema? Sommige hosts schakelen dit uit om veiligheidsredenen. Gebruik in dat geval het Custom HTML-blok in uw footer-template-onderdeel als uw thema volledige site-editing ondersteunt, de embed-widget van uw pagebuilder als u die heeft, of een kleine plugin met één doel zoals Insert Headers and Footers als terugvaloptie die helemaal geen themabestanden hoeft aan te raken.
Moet ik de snippet opnieuw plaatsen als ik van WordPress-thema wissel?
Ja, omdat hij in de footer.php of het template-onderdeel van het oude thema was geplakt. Kopieer dezelfde snippet opnieuw vanuit de generator (uw widget-ID blijft hetzelfde) en plak hem in het nieuwe thema met welke van de drie methoden daarbij past.
Een WhatsApp-widget is één scripttag, en WordPress heeft al drie plekken die daar precies voor gemaakt zijn: een Custom HTML-blok in uw footersjabloon, footer.php via Theme File Editor, of de embed-codewidget van uw pagebuilder. Voor geen van drieën hoeft u een speciale plugin te installeren. Haal de snippet op bij de WhatsApp Chat Widget Generator, plak hem in wat van de drie past bij hoe uw site is gebouwd, en hij staat live, zonder dat er iets nieuws bij te werken is de volgende keer dat WordPress een release uitbrengt.
Voeg de Chrome-extensie toe en transformeer hoe je WhatsApp-gesprekken beheert voor je bedrijf.