Your AI Connector Docs

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.

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) hieronder. Zie Een klik-om-te-sms-link toevoegen voor een sms-equivalent.

Installatie

  1. Open het HTML-bestand van je website in een teksteditor.
  2. Zoek het </body>-tag (meestal aan het einde van je HTML-bestand).
  3. Plak het volgende script vlak voor het </body>-tag:
<script src="https://api.youraiconnector.com/v1/whatsapp-widget/NUMBER"></script>
  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:
<script src="https://api.youraiconnector.com/v1/whatsapp-widget/NUMBER/Your message here"></script>
  1. Voorbeeld met een echt nummer en bericht:
<script src="https://api.youraiconnector.com/v1/whatsapp-widget/15551234567/Hello! I'm interested in your services"></script>

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 

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>
    <!-- Your website content here -->

    <!-- WhatsApp Widget (place this just before </body>) -->
    <script src="https://api.youraiconnector.com/v1/whatsapp-widget/15551234567/Hello! I have a question"></script>
</body>
</html>

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:

https://wa.me/NUMBER

Vervang NUMBER door je volledige nummer in internationaal formaat — alleen cijfers, geen plusteken, spaties of koppeltekens. Voor +31 6 5801 5937 gebruik je bijvoorbeeld:

https://wa.me/31658015937

Een bericht vooraf invullen

Om alvast een bericht ingevuld te hebben wanneer de chat opent, voeg je ?text= toe, gevolgd door je bericht:

https://wa.me/31658015937?text=Hi!%20I%20have%20a%20question

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:

<a href="https://wa.me/31658015937?text=Hi!%20I%20have%20a%20question">Chat on WhatsApp</a>

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.