Hoe u in slechts enkele minuten een gratis WhatsApp-chatwidget aan elke website kunt toevoegen: de raw wa.me-linkbenadering en een generator die een aanpasbare, code-vrije snippet produceert.
Er zijn twee eerlijke manieren om een WhatsApp-chatwidget aan een website toe te voegen zonder ervoor te betalen: plak een gewone wa.me-link en style deze zelf, of gebruik een generator die u een klaar, aanpasbare snippet levert. Beide zijn echt gratis en beide vergen slechts enkele minuten. Ze zetten u echter zes maanden later in heel verschillende posities.
Dit behandelt beide benaderingen, beginnend met de raw link zodat u precies weet wat u overslaat wanneer u het skipt.
De absolute minimumversie is één regel HTML:
<a href="https://wa.me/15551234567?text=Hi%2C%20I%20have%20a%20question">Chat with us</a>Vervang 15551234567 door uw nummer in volledig internationaal formaat, geen plusteken, geen spaties, geen voorafgaande nul. De text-parameter is een voorgevulde bericht, URL-gecodeerd, dus %20 is een spatie en %2C is een komma. Klik erop en WhatsApp opent met dat bericht al ingetypt in het vak, wachtend totdat de bezoeker verzenden raakt.
wa.me is Meta’s eigen shortlink voor dit, dus het gedrag aan het andere einde is consistent: op een telefoon opent het rechtstreeks de WhatsApp-app als deze is geïnstalleerd, of stuurt het de bezoeker naar de app store als dit niet het geval is. Op een desktopbrowser zonder geïnstalleerde app, opent het in plaats daarvan web.whatsapp.com op een nieuw tabblad. U hoeft deze detectie zelf niet op te bouwen, wat het enige deel van deze benadering is dat werkelijk voor u is opgelost.
Al het andere niet. Die enkele link is gewoon onderstreepte blauwe tekst waar u het ook neerzet. Om het om te zetten in de zwevende knop in de onderhoek die mensen werkelijk bedoelen wanneer zij “WhatsApp-chatwidget” zeggen, schrijft u zelf de CSS:
<a href="https://wa.me/15551234567?text=Hi%2C%20I%20have%20a%20question"
target="_blank" rel="noopener"
style="position:fixed; bottom:20px; right:20px; z-index:5000;
width:56px; height:56px; border-radius:50%;
background:#25D366; display:flex; align-items:center;
justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.25);">
<img src="/whatsapp-icon.svg" alt="Chat on WhatsApp" width="28" height="28">
</a>Dat werkt, maar nu hebt u ook een pictogrambestand nodig, een z-index hoog genoeg om boven uw cookiebanner en eventuele modale vensters te zitten zonder uw eigen navigatie op mobiel te bedekken, en een plan voor wat er gebeurt wanneer iemand volgende maand de berichtentekst wil wijzigen, wat betekent dat deze dezelfde blok opmaak opnieuw opent, overal waar deze is geplakt, op elke pagina of sjabloon die deze bevat.
De WhatsApp-chatwidgetgenerator doet dezelfde taak als de bovenstaande link, plus de styling, positionering en pictogram, en levert één scripttag terug in plaats van een blok aangepaste CSS waarvoor u verantwoordelijk bent. Deze is gratis, vereist geen account en raakt de WhatsApp Business API niet aan, dus is er geen verificatiestap voordat u deze kunt gebruiken.
Hier is de werkelijke stapsgewijze handleiding:
#25D366) is de standaard, maar het veld accepteert elke hexadecimale waarde als u wilt dat deze in plaats daarvan uw websitebrandkleur aanpast.text-parameter in de raw link, maar kan in plaats daarvan via het formulier worden bewerkt vanuit een URL-gecodeerde tekenreeks.Terwijl u het formulier invult, wordt een live voorvertoning van de knop direct op de pagina weergegeven, en het codepaneel ernaast wordt in real-time bijgewerkt met de voltooide snippet:
<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>Klik op Kopiëren, plak die enkele tag overal vóór de sluitende </body>-tag op uw site, en de widget is live. U hoeft niets anders te uploaden, geen pictogrambestand, geen aparte stylesheet. Elke instelling van het formulier (kleur, positie, offsets, begroeting, pop-up) is gecodeerd als een data--attribuut op die ene tag, dus het geheel reist als één plakking.
De twee outputs lijken oppervlakkig op elkaar, een knop in de hoek die WhatsApp opent, maar zij verouderen anders.
Met de handmatig vervaardigde versie bevindt elke instelling zich als een waarde in inlinestijlen of een aparte CSS-bestand. Het wijzigen van de begroeting betekent het vinden en bewerken van de text-parameter in een URL-gecodeerde tekenreeks. Het verplaatsen van de knop omdat een nieuwe cookiebanner deze nu overlapt, betekent het opnieuw bewerken van de CSS op elke pagina of sjabloon waar u deze hebt geplakt, en als u er één bent vergeten, heeft die pagina stilzwijgend een verbroken uitziende widget totdat iemand het opmerkt. Niets hiervan mislukt luidruchtig, het drijft gewoon pagina voor pagina uit elkaar.
De gegenereerde snippet houdt elke instelling als een gelabeld attribuut op één regel vast die u in seconden opnieuw van het formulier kunt kopiëren, vervolgens zoeken-vervangen op uw site als u geen gedeelde kop- of voeterlstekst gebruikt. En omdat de werkelijke knoplogica zich in het gehoste scriptbestand bevindt waarnaar de tag verwijst, niet in code die u hebt geplakt, worden bugfixes en gedragsverbeteringen van de widget zelf zonder dat u uw site aanraakt verzonden.
De mechanica zijn hetzelfde overal: zorg dat de snippet ergens wordt weergegeven die op elke pagina wordt weergegeven, idealiter net voor </body>.
theme.liquid, net boven de sluitende </body>-tag, via Online Store, Themes, Edit Code.Elk hiervan heeft zijn eigen eigenaardigheid die meer aandacht op zich zelf verdient, we zullen WordPress in meer detail afzonderlijk behandelen, maar de plakstap zelf is identiek overal: één scripttag, één plaats, toegepast op elke pagina tegelijk.
Laad de site in een incognitovenster zodat gecachede stijlen geen werkelijk probleem verbergen, en controleer de knop op zowel desktop als op een echte telefoon, niet alleen een browservenster met gewijzigd formaat. Klik erop eenmaal van elk af en bevestig dat WhatsApp wordt geopend (de app op mobiel, web.whatsapp.com op desktop) met uw nummer en begroetingsbericht al ingevuld. Scroll dan de pagina met eventuele zichtbare cookiebanners of sticky-elementen, het meest voorkomende probleem op dit punt is een z-index-conflict, waarbij de widget achter een ander vast gepositioneerd element wordt weergegeven in plaats van bovenop.
Is dit werkelijk gratis, of zit er een addertje onder het gras? De generator zelf is gratis zonder accountvereiste. Het widgetscript waarnaar het verwijst, wordt kosteloos gehost en bediend. Als u later de Chrome-extensie van The Chat Quotient installeert om de gesprekken die via de widget binnenkomen te beheren, heeft dit een eigen gratis plan, maar het is een afzonderlijke, optionele stap, geen vereiste om de widget te gebruiken.
Is een WhatsApp-widget hetzelfde als WhatsApp Web?
Nee, en dit is een veel voorkomende verwarring. WhatsApp Web (web.whatsapp.com) is de interface die u gebruikt om WhatsApp-berichten van een browser te lezen en te verzenden. Een WhatsApp-widget-webelement is de kleine knop die u op uw eigen site toevoegt die, wanneer erop wordt geklikt, een chat opent, ofwel in de WhatsApp-app op mobiel ofwel in WhatsApp Web op een desktop waarop de desktop-app niet is geïnstalleerd. De widget is iets wat u insluit; WhatsApp Web is waar het resulterende gesprek toevallig wordt geopend.
Werkt de widget als een bezoeker WhatsApp niet geïnstalleerd heeft? Op mobiel stuurt het klikken erop zonder geïnstalleerde app de bezoeker naar hun app store om WhatsApp eerst te installeren. Er is geen manier omheen deze stap, omdat de link alleen weet hoe u naar WhatsApp zelf moet overdragen, niet naar vervanging door een ander berichtkanaal.
Kan ik meer dan één WhatsApp-nummer hebben, zoals verkoop en ondersteuning, op dezelfde widget? Niet op één knop. De widget is gebouwd rond één WhatsApp-nummer per exemplaar. Als u twee ingangspunten nodig hebt, voegt u twee widgets toe met verschillende posities en begroetingen, hoewel dit op dat moment meestal duidelijker is voor bezoekers dan twee zwevende knoppen gestapeld in dezelfde hoek op een afzonderlijke contactpagina.
Moet ik weten hoe ik moet coderen om de generator te gebruiken? Nee. Elke instelling is een formulierveld, en het enige wat u plakt, is de enkele scripttag die deze produceert, dezelfde kopie-plak stap ongeacht welk platform uw site op draait.
Een wa.me-link is echt alles wat u nodig hebt als u zich prettig voelt bij het schrijven en onderhouden van uw eigen CSS en niet erg heeft om die code elke keer dat iets moet veranderen weer in te zien. De WhatsApp-chatwidgetgenerator produceert hetzelfde resultaat, een zwevende knop die een voorgevulde WhatsApp-chat opent, zonder de CSS, het pictogrambestand of het onderhoud dat ermee gepaard gaat het handmatig op te zetten, en het is nog steeds gratis.
Voeg de Chrome-extensie toe en transformeer hoe je WhatsApp-gesprekken beheert voor je bedrijf.