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>

Het bericht wijzigen of verwijderen

De vooraf ingevulde tekst staat alleen in die scriptregel op uw website — niets in Your AI Connector schrijft, slaat dit op of genereert het, en het wijzigen van uw agent, nummerbeschrijving of widgetinstellingen heeft hier geen invloed op. Om de tekst te wijzigen, bewerkt u het gedeelte na het nummer in de src; om deze te verwijderen, schakelt u terug naar de versie zonder bericht. Hetzelfde geldt voor een eenvoudige wa.me-link: wat er ook na ?text= in de link staat, is precies wat uw bezoeker vooraf ingevuld ziet wanneer WhatsApp wordt geopend.

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.