Copy-paste WhatsApp widget HTML, van de kale wa.me-link tot een volledige zwevende knop, plus wat de ruwe code alleen u zelf laat bouwen.
Als u naar de werkelijke HTML zocht, hier is deze, geen aanmelding vereist:
<a href="https://wa.me/15551234567">Chat with us on WhatsApp</a>Vervang 15551234567 door uw nummer in volledig internationaal formaat: eerst de landcode, geen plusteken, geen spaties, geen voorafgaande nul. Die link alleen is al genoeg om een WhatsApp-chat met uw bedrijf te openen. Het is ook het volledige eerlijke antwoord op “geef mij de HTML widget-code,” want alles voorbij dit punt bent u (of een generator) die de onderdelen bouwt die die ene regel niet dekt.
Een bezoeker komt op de link terecht zonder dat er iets is getypt. Voeg de text-parameter toe zodat er een bericht klaarstaat in het vak wanneer de chat opent:
<a href="https://wa.me/15551234567?text=Hi%2C%20I%27d%20like%20to%20ask%20about%20pricing">
Chat with us on WhatsApp
</a>Het bericht moet URL-gecodeerd zijn: %20 is een spatie, %2C is een komma, %27 is een apostrof. Schrijf eerst de zin die u wilt, en laat deze vervolgens door een willekeurige URL-encoder lopen voordat u deze in de text-waarde plakt, aangezien een ruwe spatie of leesteken midden in de querystring de link op sommige browsers kan breken.
Een tekstlink is niet wat de meeste mensen bedoelen met “WhatsApp-widget.” De knop in de hoek is CSS bovenop dezelfde link:
<a
href="https://wa.me/15551234567?text=Hi%2C%20I%27d%20like%20to%20ask%20about%20pricing"
target="_blank"
rel="noopener"
aria-label="Chat on WhatsApp"
style="
position: fixed;
bottom: 24px;
right: 24px;
z-index: 999;
width: 60px;
height: 60px;
border-radius: 50%;
background: #25D366;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0,0,0,.2);
"
>
<svg width="30" height="30" viewBox="0 0 24 24" fill="white" aria-hidden="true">
<path d="M12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38a9.87 9.87 0 0 0 4.74 1.21h.01c5.46 0 9.9-4.45 9.9-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2Z"/>
</svg>
</a>Deze versie slaat een apart pictogrambestand over door het telefoon-/chatsymbool als SVG inline te zetten, dus het is werkelijk één op zichzelf staand blok: plak het voor </body> en er is verder niets te uploaden. Het laat nog steeds vier dingen over die u handmatig moet afhandelen, en dat is precies waar de werkelijke generator zijn nut bewijst.
Mobiel en desktop gedragen zich niet hetzelfde, en niets in deze snippet regelt dat. Klik op een wa.me-link op een telefoon met WhatsApp geïnstalleerd en de app opent rechtstreeks. Geen app geïnstalleerd, en de bezoeker wordt naar de app store gestuurd, er is geen alternatief bericht of alternatieve contactmethode die u vanuit de link zelf kunt instellen. Op een desktopbrowser opent het web.whatsapp.com in een nieuw tabblad, wat alleen werkt als de bezoeker al is ingelogd bij WhatsApp Web in die browser, anders staart hij naar een QR-code zonder enige context waarom. Alle drie de uitkomsten komen uit dezelfde href. U kunt niet detecteren welke er staat aan te komen of deze onderscheppen met platte HTML.
Het vooraf ingevulde bericht leeft in de URL, niet in een formulierveld. Verander het en u begint opnieuw met het handmatig coderen van een nieuwe tekenreeks, het opzoeken van elke pagina waarop de link is geplakt, en het daar ook vervangen als u geen gedeelde sjabloon heeft.
Er is geen pictogrambestand om te wisselen zonder het SVG-pad handmatig te bewerken, en geen manier om de knop te verplaatsen, van formaat te veranderen of van kleur te wisselen zonder het inline stijlblok rechtstreeks te bewerken, regel voor regel.
Niets hier legt een lead vast voordat de chat opent. De link (of de knop) gaat rechtstreeks naar WhatsApp zodra erop wordt geklikt. Als u een naam en een reden voor contact wilt voordat het gesprek begint, is dat een apart formulier dat u zelf zou moeten bouwen, aansluiten en op de een of andere manier in de text-parameter zou moeten doorgeven.
De WhatsApp Chat Widget Generator is een gratis tool die dezelfde handvol instellingen omzet in één scripttag in plaats van een blok CSS dat u zelf onderhoudt. Stel uw nummer in, kies een kleur, stel de positie en offsets in, schrijf een begroeting en schakel optioneel een pre-chatformulier in (een korte vraag, met e-mail of telefoon al dan niet verplicht) dat context verzamelt voordat het WhatsApp-venster überhaupt opent. De tool levert dit op:
<script src="https://cdn.thechatquotient.com/widget/v1/widget.js"
data-widget-id="wgt_xxxxxxxx"
data-whatsapp-number="15551234567"
data-color="#128C7E"
data-position-vertical="bottom"
data-position-horizontal="left"
data-offset-vertical="24"
data-offset-horizontal="24"
data-z-index="999"
data-greeting="Hi! Ask us anything."
data-prechat="true"
data-prechat-title="Before we chat"
data-prechat-description="Tell us what you need help with."
async
defer
></script>Elke instelling is een gelabeld data--attribuut op één regel, dus het wijzigen van de begroeting of het verplaatsen van de knop naar de andere hoek betekent het opnieuw kopiëren van de tag vanuit het formulier, niet het doorzoeken van een CSS-bestand. Het pictogram, de positioneringslogica, de deep-link-afhandeling voor mobiel versus desktop, en het pre-chatformulier bevinden zich allemaal in het gehoste script waarnaar de tag verwijst, wat de ruwe HTML hierboven niet op zichzelf kan doen zonder dat u het zelf schrijft.
Als u een gegenereerde snippet plakt en wilt weten wat elke regel regelt voordat u deze handmatig wijzigt, hier is wat de tag accepteert:
| Attribuut | Regelt |
|---|---|
data-widget-id | Unieke ID uitgegeven door de generator, bewerk deze niet |
data-whatsapp-number | Bestemmingsnummer, internationaal formaat, geen + |
data-color | Achtergrond van de knop, elke hexwaarde |
data-position-vertical | top of bottom |
data-position-horizontal | left of right |
data-offset-vertical / data-offset-horizontal | Afstand in pixels vanaf die rand |
data-z-index | Stapelvolgorde, verhoog deze als een ander vast gepositioneerd element de knop bedekt |
data-greeting | Vooraf ingevulde berichttekst, geen handmatige URL-codering nodig |
data-prechat | true om een kort formulier te tonen voordat de chat opent |
data-prechat-title / data-prechat-description / data-prechat-question | Tekst getoond op het pre-chatformulier |
Zowel de ruwe HTML als de gegenereerde scripttag gaan op dezelfde plek: ergens dat op elke pagina wordt weergegeven, idealiter net voor </body>.
theme.liquid, net boven </body>, via Online Store → Themes → Edit Code.Vereist de ruwe HTML-link een WhatsApp Business-account?
Nee. Een persoonlijk WhatsApp-nummer werkt met een wa.me-link op dezelfde manier als een Business-nummer. Business-specifieke functies, zoals een catalogus of automatische antwoorden, maken geen deel uit van de link zelf.
Waarom toont mijn knop een gebroken afbeelding in plaats van een pictogram?
Dat gebeurt wanneer de HTML verwijst naar een extern pictogrambestand (<img src="/whatsapp-icon.svg">) dat niet naar dat pad is geüpload. De inline SVG-versie hierboven vermijdt dit volledig omdat het pictogram rechtstreeks in de HTML is geschreven.
Kan ik de widget-HTML in een <head>-tag plaatsen in plaats daarvan?
Technisch gezien moet de ankertag zelf worden weergegeven in de <body>, aangezien <head>-inhoud niet wordt weergegeven. Scripts kunnen wel vanuit <head> laden, maar het plaatsen van de snippet net voor </body> voorkomt render-blokkering en is het patroon dat de meeste sitebouwers verwachten.
Is er een limiet aan hoeveel WhatsApp-widgets ik aan één pagina kan toevoegen? Niets weerhoudt u ervan er twee te plakken, maar twee zwevende knoppen op elkaar gestapeld in dezelfde hoek ziet er meestal uit als een bug in plaats van een functie. Als u twee nummers nodig heeft (verkoop en ondersteuning, bijvoorbeeld), geef elk dan een eigen positie in plaats van ze te laten overlappen.
Werkt dit op dezelfde manier op Squarespace? Het Code Injection-paneel van Squarespace (onder Settings → Advanced) accepteert beide versies op dezelfde manier als het Custom HTML-blok van WordPress, voetertekst-injectie past het sitebreed toe op één plek.
De letterlijke HTML voor een WhatsApp-widget is één <a href="https://wa.me/...">-tag, en die heeft u nu. Dit omzetten in de zwevende, gebrande, lead-vastleggende knop die mensen meestal voor ogen hebben, betekent ofwel zelf de CSS en de deep-link-uitzonderingsgevallen schrijven en onderhouden, ofwel de WhatsApp Chat Widget Generator de kant-en-klare scripttag in één keer laten uitvoeren, gratis, geen account nodig.
Voeg de Chrome-extensie toe en transformeer hoe je WhatsApp-gesprekken beheert voor je bedrijf.