# WhatsApp-widget ## Integratie van de WhatsApp-widget Voeg een zwevende WhatsApp-chatknop toe aan je website met deze eenvoudige handleiding. > **Goed om te weten.** De WhatsApp-widget is een eenvoudige "klik om te chatten"-knop — als een bezoeker hierop klikt, wordt WhatsApp geopend zodat ze je daar een bericht kunnen sturen. Het brengt geen berichten naar je Chats-inbox en activeert de AI niet uit zichzelf. Gebruik voor een AI-chatervaring die in je website is ingesloten de afzonderlijke [Chat-widget](chat-widget.md). > > **Wil je liever een gewone link of je eigen knop?** Als je de zwevende widget niet wilt en liever je eigen knop (of een stukje tekst) rechtstreeks naar een WhatsApp-chat wilt laten verwijzen, ga dan naar [Geef je de voorkeur aan een gewone link of knop? (wa.me)](#prefer-a-plain-link-or-button-wa-me) hieronder. Zie [Een klik-om-te-sms-link toevoegen](../messaging-channels/sms.md#adding-a-click-to-text-sms-link-to-your-website) voor een sms-equivalent. ### Installatie 1. Open het HTML-bestand van je website in een teksteditor. 2. Zoek het ``-tag (meestal aan het einde van je HTML-bestand). 3. Plak het volgende script vlak voor het ``-tag: {% code overflow="wrap" %} ```html ``` {% endcode %} 1. Vervang in de bovenstaande code: * `NUMBER` door je WhatsApp-nummer * Bijvoorbeeld: gebruik voor het nummer +1 555 123 4567 simpelweg: 15551234567 ### Een aangepast bericht toevoegen Als je wilt dat er een vooraf ingevuld bericht verschijnt wanneer iemand op de knop klikt: 1. Gebruik in plaats daarvan deze code: {% code overflow="wrap" %} ```html ``` {% endcode %} 1. Voorbeeld met een echt nummer en bericht: {% code overflow="wrap" %} ```html ``` {% endcode %} ### Wat je krijgt Na de installatie zie je automatisch: * Een groene WhatsApp-knop rechtsonder op je website * De knop blijft zichtbaar tijdens het scrollen * De knop werkt naadloos op mobiele apparaten * Een subtiele animatie verschijnt wanneer je over de knop zweeft ### Aanvullende informatie * Je telefoonnummer kan worden geschreven met of zonder: * Plusteken (+) * Spaties * Koppeltekens (-) * Deze worden automatisch correct verwerkt * Het bericht kan op natuurlijke wijze spaties bevatten * Geen extra bestanden of installaties nodig * De knop past zich automatisch aan mobiele schermen aan ### Voorbeeld van een volledige webpagina {% code overflow="wrap" %} ```html My Website ``` {% endcode %} ## Liever een gewone link of knop? (wa.me) De bovenstaande widget geeft je een kant-en-klare zwevende knop. Maar als je al je eigen knop hebt (of een menulink, afbeelding of stukje tekst) en je wilt gewoon dat deze een WhatsApp-chat met jouw nummer opent, dan heb je de widget helemaal niet nodig — je linkt deze simpelweg naar een `wa.me` URL. Het formaat is: {% code overflow="wrap" %} ``` https://wa.me/NUMBER ``` {% endcode %} Vervang `NUMBER` door je volledige nummer in internationaal formaat — **alleen cijfers, geen plusteken, spaties of koppeltekens**. Voor +31 6 5801 5937 gebruik je bijvoorbeeld: {% code overflow="wrap" %} ``` https://wa.me/31658015937 ``` {% endcode %} ### Een bericht vooraf invullen Om alvast een bericht ingevuld te hebben wanneer de chat opent, voeg je `?text=` toe, gevolgd door je bericht: {% code overflow="wrap" %} ``` https://wa.me/31658015937?text=Hi!%20I%20have%20a%20question ``` {% endcode %} Spaties in het bericht moeten worden geschreven als `%20` (dit is hoe links nu eenmaal met spaties omgaan). ### Op een knop plaatsen Link elke knop naar die URL — precies op dezelfde manier als waarop je een knop naar elk ander webadres zou linken. In ruwe HTML ziet het er zo uit: {% code overflow="wrap" %} ```html Chat on WhatsApp ``` {% endcode %} In een websitebouwer (Wix, Squarespace, WordPress, Webflow, enz.), voeg je zoals gebruikelijk een knop toe en plak je de `wa.me` URL in het veld "link" / "URL". > **Wil je één korte link die roteert tussen verschillende nummers, terugkerende bezoekers onthoudt en klikken bijhoudt?** Gebruik Short Links (onder **Instellingen → Kanalen**) in plaats van een onbewerkte `wa.me` URL.