WhatsApp button op je website plaatsen

Q: Hoe maak ik een WhatsApp link?

Gebruik het formaat https://wa.me/[telefoonnummer]. Vul je telefoonnummer in internationaal formaat in zonder plus, spaties of streepjes. Voor een Nederlands nummer: https://wa.me/31612345678.

Q: Wat is het wa.me link formaat?

Het wa.me formaat is: https://wa.me/[landcode][nummer]?text=[bericht]. Voor Nederland gebruik je landcode 31 en verwijder je de voorloop-nul. Voorbeeld: 06-12345678 wordt https://wa.me/31612345678.

Q: Hoe voeg ik een vooraf ingevuld bericht toe?

Voeg ?text= toe aan je link gevolgd door je bericht. Gebruik %20 voor spaties. Voorbeeld: https://wa.me/31612345678?text=Hallo%20ik%20heb%20een%20vraag.

Samenvatting: WhatsApp button op je website

Een WhatsApp button maak je met een wa.me link in het formaat https://wa.me/31612345678. Gebruik je telefoonnummer in internationaal formaat zonder plus, spaties of streepjes. Voeg optioneel een standaardbericht toe met ?text=Hallo. Voor WordPress is de Joinchat plugin het populairst (700.000+ installaties).

Een WhatsApp link maken voor je website is eenvoudiger dan je denkt. Met de juiste code kunnen bezoekers binnen 10 minuten direct met je chatten via WhatsApp.

WhatsApp is met meer dan 3 miljard gebruikers wereldwijd de populairste messaging app.^[1] In Nederland telt WhatsApp ruim 13 miljoen gebruikers.^[8] Een WhatsApp button op je website verlaagt de drempel voor klantcontact aanzienlijk.

In dit artikel leer je hoe je een wa.me link maakt, een WhatsApp button met HTMLKeurigOnline zegtHTMLHTML is de programmeertaal voor het maken van webpagina’s. en CSSKeurigOnline zegtCSSCSS (Cascading Style Sheets) is een opmaaktaal voor het vormgeven en stylen van webpagina's en documenten. bouwt, en welke WordPressKeurigOnline zegtWordPressWordPress is een open-source contentmanagementsysteem (CMS) geschreven in PHP, waarmee je eenvoudig websites en blogs kunt bouwen en beheren. plugins het beste werken. We behandelen ook WhatsApp Business en de beste plaatsing van je button.

Klaar om WhatsApp aan je website toe te voegen? Laten we beginnen met de basis.

WhatsApp button op website: een groene WhatsApp chat knop op een website mockup waarmee bezoekers direct contact kunnen opnemen

Wat is een WhatsApp link?

Definitie: Een WhatsApp link is een speciale URL in het formaat https://wa.me/[telefoonnummer] die direct een chatgesprek opent met een specifiek nummer. Bezoekers hoeven het nummer niet eerst op te slaan als contact.

Het wa.me formaat

WhatsApp gebruikt het wa.me domein voor click-to-chat links. Dit is het officiële formaat:^[2]

https://wa.me/[telefoonnummer]

Het telefoonnummer moet in internationaal formaat zonder het plusteken, spaties of streepjes. Voor Nederland betekent dit:

Landcode: 31
Nummer zonder voorloop-nul
Geen speciale tekens

Telefoonnummer correct formatteren

Origineel nummer	wa.me formaat
06 12 34 56 78	31612345678
+31 6 12345678	31612345678
0031-6-12345678	31612345678
020 123 4567	31201234567

Let op: Gebruik nooit https://wa.me/+31-6-12345678. Het plusteken en de streepjes zorgen dat de link niet werkt.

Pre-filled bericht toevoegen

Je kunt een standaardbericht meegeven zodat bezoekers niet zelf hoeven te typen. Voeg ?text= toe aan je link:^[3]

https://wa.me/31612345678?text=Hallo%20ik%20heb%20een%20vraag

Voor spaties gebruik je %20 of een + teken. Voorbeelden van handige standaardberichten:

?text=Hoi%20ik%20wil%20graag%20meer%20informatie
?text=Hallo%20ik%20heb%20interesse%20in%20jullie%20diensten
?text=Goedendag%20ik%20heb%20een%20vraag%20over%20mijn%20bestelling

WhatsApp link maken: stap voor stap

WhatsApp link maken in 4 stappen

Bepaal je telefoonnummer — Kies een zakelijk of WhatsApp Business nummer
Converteer naar internationaal formaat — Verwijder de 0, zet 31 ervoor (NL)
Bouw je link — Combineer https://wa.me/ met je nummer
Test de link — Controleer op desktop én mobiel

Stap 1: Bepaal je telefoonnummer

Kies welk nummer je wilt gebruiken:

Zakelijk nummer — Aanbevolen voor professioneel gebruik
WhatsApp Business nummer — Beste optie voor bedrijven (meer hierover later)
Privénummer — Alleen voor kleine ondernemers die geen scheiding willen

Stap 2: Converteer naar internationaal formaat

Neem je nummer en pas deze regels toe:

Verwijder de eerste 0 van je nummer
Zet 31 ervoor (Nederlandse landcode)
Verwijder alle spaties, streepjes en haakjes

Voorbeeld: 06 12 34 56 78 wordt 31612345678

Stap 3: Bouw je WhatsApp link

Combineer het wa.me domein met je geformatteerde nummer:

https://wa.me/31612345678

Wil je een standaardbericht toevoegen?

https://wa.me/31612345678?text=Hallo%20ik%20heb%20een%20vraag%20over%20jullie%20diensten

Stap 4: Test je link

Voordat je de link op je website plaatst, test hem eerst:

Open de link in je browser
Controleer of WhatsApp Web opent (op desktop)
Test ook op je telefoon — de WhatsApp app moet direct openen
Verstuur een testbericht naar jezelf

Tip: Test met een ander telefoonnummer dan het nummer in de link. Je kunt jezelf namelijk niet berichten via een wa.me link.

WhatsApp button in WordPress

Voor WordPress-gebruikers zijn er handige plugins die WhatsApp integratie vereenvoudigen. Je hebt geen code-kennis nodig.

Plugin vergelijking

Plugin	Actieve installaties	Gratis	Floating button	Analytics
Joinchat	700.000+	✓	✓	✓
Click to Chat	700.000+	✓	✓	—
Social Chat	200.000+	✓	✓	—

Joinchat installeren (aanbevolen)

Joinchat (voorheen WAme) is de populairste WhatsApp plugin voor WordPress met meer dan 700.000 actieve installaties.^[5] Wil je WordPress sneller leren? Bekijk dan ook WordPress Studio.

Joinchat installeren in 8 stappen

Ga naar je WordPress dashboard
Klik op Plugins → Nieuwe plugin
Zoek op "Joinchat"
Klik op Nu installeren en daarna Activeren
Ga naar Instellingen → Joinchat
Vul je WhatsApp telefoonnummer in (met landcode)
Configureer het welkomstbericht en de positie
Klik op Wijzigingen opslaan

Joinchat geavanceerde instellingen

De plugin biedt veel aanpassingsmogelijkheden:

Zichtbaarheid — Toon alleen op bepaalde pagina's of categorieën
Apparaat — Aparte instellingen voor mobiel en desktop
Openingstijden — Verberg de button buiten kantooruren
Meerdere nummers — Verschillende nummers per afdeling (premium)
QR-code — Desktop-bezoekers kunnen scannen met hun telefoon
Google Tag Manager — Track conversies automatisch (lees meer over SEO tools)

Joinchat vs zelf coderen

Wanneer kies je voor een plugin of voor eigen code?

Situatie	Aanbeveling
WordPress website, geen code-kennis	Plugin (Joinchat)
WordPress website, wilt volledige controle	Eigen code in theme
Shopify, Wix, Squarespace	Eigen code of platform-app
Custom website (geen CMS)	Eigen code

WhatsApp button met HTML en CSS

Wil je meer controle over het design of gebruik je geen WordPress? Met een paar regels code maak je een professionele WhatsApp button. Hieronder vind je kant-en-klare voorbeelden met live demo's die je direct kunt gebruiken en aanpassen.

Simpele HTML link

De meest eenvoudige implementatie is een gewone link:

<a href="https://wa.me/31612345678" target="_blank" rel="noopener noreferrer">
  Chat via WhatsApp
</a>

De attributen target="_blank" opent een nieuw tabblad en rel="noopener noreferrer" verbetert de veiligheid.^[4]

Gestylede WhatsApp button

Een mooie groene button met het WhatsApp icoon die direct opvalt:

<a href="https://wa.me/31612345678" class="whatsapp-button" target="_blank" rel="noopener noreferrer">
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
  </svg>
  Chat met ons
</a>

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #1a1a2e;
}

.whatsapp-button {
  background-color: #25D366;
  color: white;
  padding: 14px 28px;
  border-radius: 30px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.25s ease;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
}

.whatsapp-button:hover {
  background-color: #128C7E;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}

.whatsapp-button:active {
  transform: translateY(0);
}

.whatsapp-button svg {
  flex-shrink: 0;
}

Deze button gebruikt de officiële WhatsApp groene kleur #25D366 met een subtiele hover animatie.

Floating WhatsApp button

Een zwevende button die altijd zichtbaar blijft, rechtsonder in het scherm. Dit is de meest populaire implementatie:

<a href="https://wa.me/31612345678?text=Hallo%20ik%20heb%20een%20vraag"
   class="whatsapp-float"
   target="_blank"
   rel="noopener noreferrer"
   aria-label="Chat via WhatsApp">
  <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="white">
    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
  </svg>
</a>

body {
  margin: 0;
  height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.whatsapp-float {
  position: fixed;
  bottom: 25px;
  right: 25px;
  z-index: 9999;
  background-color: #25D366;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.whatsapp-float:active {
  transform: scale(1.05);
}

De floating button gebruikt position: fixed zodat hij altijd zichtbaar blijft tijdens scrollen.

WhatsApp button met pulse animatie

Een opvallende variant met pulserende animatie die de aandacht trekt:

<a href="https://wa.me/31612345678"
   class="whatsapp-pulse"
   target="_blank"
   rel="noopener noreferrer"
   aria-label="Chat via WhatsApp">
  <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="white">
    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
  </svg>
</a>

body {
  margin: 0;
  height: 100vh;
  background: #1a1a2e;
  display: flex;
  justify-content: center;
  align-items: center;
}

.whatsapp-pulse {
  position: relative;
  background-color: #25D366;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.3s ease;
}

.whatsapp-pulse::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #25D366;
  animation: pulse 2s ease-out infinite;
  z-index: -1;
}

.whatsapp-pulse:hover {
  transform: scale(1.1);
}

.whatsapp-pulse:hover::before {
  animation: none;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

De @keyframes pulse animatie creëert een uitdijende ring die de aandacht trekt naar je WhatsApp button.

WhatsApp button met tooltip

Een elegante variant met een uitschuivend label bij hover:

<a href="https://wa.me/31612345678"
   class="whatsapp-tooltip"
   target="_blank"
   rel="noopener noreferrer">
  <span class="tooltip-text">Stel een vraag</span>
  <span class="tooltip-icon">
    <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24" fill="white">
      <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
    </svg>
  </span>
</a>

body {
  margin: 0;
  height: 100vh;
  background: #2c3e50;
  display: flex;
  justify-content: center;
  align-items: center;
}

.whatsapp-tooltip {
  display: flex;
  align-items: center;
  background-color: #25D366;
  border-radius: 50px;
  text-decoration: none;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
}

.tooltip-icon {
  width: 55px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tooltip-text {
  color: white;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  padding-right: 0;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.whatsapp-tooltip:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 25px rgba(37, 211, 102, 0.5);
}

.whatsapp-tooltip:hover .tooltip-text {
  max-width: 150px;
  opacity: 1;
  padding-right: 18px;
}

Deze variant combineert een compact icoon met een uitschuivende call-to-action tekst.

Gradient WhatsApp button

Een moderne variant met gradient achtergrond voor extra visuele impact:

<a href="https://wa.me/31612345678" class="whatsapp-gradient" target="_blank" rel="noopener noreferrer">
  <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="currentColor">
    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
  </svg>
  Start een gesprek
</a>

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #0f0f0f;
}

.whatsapp-gradient {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 50%, #075E54 100%);
  background-size: 200% 200%;
  color: white;
  padding: 16px 32px;
  border-radius: 12px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.4s ease;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.3);
  animation: gradient-shift 3s ease infinite;
}

.whatsapp-gradient:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(37, 211, 102, 0.5);
  color: white;
}

.whatsapp-gradient:active {
  transform: translateY(-1px);
}

@keyframes gradient-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

De gradient animatie zorgt voor een subtiele maar opvallende beweging die de button dynamisch maakt.

Outline WhatsApp button

Een minimalistische variant met alleen een border, ideaal voor lichte achtergronden:

<a href="https://wa.me/31612345678" class="whatsapp-outline" target="_blank" rel="noopener noreferrer">
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
  </svg>
  WhatsApp ons
</a>

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #f8f9fa;
}

.whatsapp-outline {
  background: transparent;
  color: #25D366;
  padding: 14px 28px;
  border: 2px solid #25D366;
  border-radius: 8px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 600;
  font-size: 16px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  z-index: 1;
}

.whatsapp-outline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #25D366;
  z-index: -1;
  transition: width 0.3s ease;
}

.whatsapp-outline:hover {
  color: white;
}

.whatsapp-outline:hover::before {
  width: 100%;
}

De ::before pseudo-element techniek creëert een vloeiende fill-animatie bij hover.

Toegankelijkheidstip: Voeg altijd een aria-label attribuut toe aan icon-only buttons. Dit helpt gebruikers van screenreaders te begrijpen wat de button doet.

WhatsApp voor Shopify en andere platforms

Niet iedereen gebruikt WordPress. Hier zijn instructies voor andere populaire platforms.

Shopify

Voor Shopify heb je twee opties:

Optie 1: HTML code toevoegen

Ga naar Online Store → Themes
Klik op Customize → Theme settings
Zoek de optie voor custom code of footer
Plak de HTML en CSS code van de floating button

Optie 2: Shopify app gebruiken

Zoek in de Shopify App Store naar "WhatsApp Chat" voor apps zoals:

WhatsApp Chat + Abandoned Cart
Pushdaddy WhatsApp Chat
Chatra Live Chat

Wix

Open je Wix Editor
Klik op het + icoon → Embed Code → Custom Element
Plak de HTML code voor je WhatsApp button
Positioneer de button waar je wilt

Of gebruik de Wix App Market voor een WhatsApp chat widget.

Squarespace

Ga naar Settings → Advanced → Code Injection
Plak de CSS in de Header sectie (tussen <style> tags)
Plak de HTML in de Footer sectie
Sla op en bekijk je site

Tip: Bij alle platforms geldt: test je WhatsApp button op zowel desktop als mobiel voordat je live gaat.

WhatsApp vs WhatsApp Business

Voor zakelijk gebruik is WhatsApp Business de betere keuze. Wat zijn de verschillen?

Feature vergelijking

Feature	WhatsApp	WhatsApp Business
Zakelijk profiel	—	✓
Productcatalogus	—	✓ (tot 500 producten)
Automatische begroeting	—	✓
Afwezigheidsbericht	—	✓
Snelle antwoorden	—	✓
Labels voor chats	—	✓
Korte link (wa.me)	✓	✓
Verificatie badge	—	✓ (na verificatie)

Bron: WhatsApp Business officiële vergelijking^[6]

Waarom WhatsApp Business voor je website?

Professionele uitstraling — Klanten zien je bedrijfsnaam, adres en beschrijving
Automatische begroeting — Beantwoord nieuwe klanten direct, ook buiten kantooruren
Snelle antwoorden — Bewaar veelgebruikte berichten voor snelle reacties
StatistiekenKeurigOnline zegtStatistiekenStatistieken laten zien hoe bezoekers je website gebruiken. — Bekijk hoeveel berichten je ontvangt en leest
Labels — Organiseer gesprekken met kleurtjes (nieuwe klant, bestelling, support)

WhatsApp Business instellen

WhatsApp Business instellen in 6 stappen

Download de app — Haal de WhatsApp Business app uit de App Store of Play Store
Accepteer de voorwaarden — Open de app en ga akkoord
Registreer je nummer — Gebruik een zakelijk telefoonnummer (kan ook een vast nummer zijn)
Vul je bedrijfsgegevens in — Bedrijfsnaam en categorie
Maak je profiel compleet — Voeg profielfoto, beschrijving en contactgegevens toe
Stel automatische berichten in — Configureer een begroetingsbericht via Business Tools

Goed om te weten: WhatsApp Business is gratis te downloaden en gebruiken. Er zijn geen maandelijkse kosten.

Best practices en tips

Een WhatsApp button plaatsen is stap één. Deze tips helpen je het maximale eruit te halen.

Optimale plaatsing

Rechtsonder (floating) — De standaard positie die bezoekers verwachten. Altijd zichtbaar, niet storend.
In de header — Direct zichtbaar, vooral effectief voor service-gerichte websites.
Op de contactpagina — Logische plek waar bezoekers contactopties zoeken.
In de footer — Naast andere contactgegevens zoals e-mail en telefoon.
Op productpagina's — Voor snelle vragen over specifieke producten.

Design tips

Gebruik WhatsApp groen — De officiële kleur is #25D366. Dit is direct herkenbaar.
Toon het WhatsApp icoon — Het icoon is wereldwijd bekend en vergroot de klikratio.
Duidelijke call-to-action — "Chat met ons" of "Stel je vraag via WhatsApp" werkt beter dan alleen een icoon.
Houd het proportioneel — Te groot is opdringerig, te klein wordt gemist. 50-60px werkt goed voor floating buttons.

Privacy overwegingen

Telefoonnummer zichtbaar — Je nummer staat in de wa.me link. Iedereen kan het zien.
Gebruik een zakelijk nummer — Houd privé en zakelijk gescheiden.
GDPR — Sla geen gesprekken op met persoonsgegevens zonder toestemming. Lees meer over privacy in ons artikel over website beveiliging.
Vermeld WhatsApp in je privacybeleid — Laat bezoekers weten dat je via WhatsApp communiceert.

Desktop vs mobiel

Apparaat	Wat gebeurt er?
Smartphone	WhatsApp app opent direct
Desktop (WhatsApp geïnstalleerd)	WhatsApp Desktop app opent
Desktop (geen app)	WhatsApp Web opent in browser

Gebruikers op desktop moeten ingelogd zijn op WhatsApp Web of de desktop app hebben geïnstalleerd. Overweeg een QR-code te tonen zodat desktop-bezoekers kunnen scannen met hun telefoon.

WhatsApp Button: Belangrijkste Gebruiksscenario's

Waarvoor gebruik je een WhatsApp button?

Klantenservice: Directe ondersteuning bieden aan klanten met vragen over producten of bestellingen.
Offerteaanvragen: Potentiële klanten een laagdrempelige manier geven om contact op te nemen.
Reserveringen: Restaurants, kappers en andere dienstverleners kunnen boekingen ontvangen via WhatsApp.
Lead generatie: Bezoekers die nog niet klaar zijn om te bellen kunnen via WhatsApp hun interesse tonen.
E-commerce support: Snelle productadvies en hulp bij het kiezen van de juiste maat of variant.
After-sales: Follow-up berichten en klantenbinding na een aankoop.

Veelgestelde vragen over WhatsApp Buttons

Hoe maak ik een WhatsApp link?

Gebruik het formaat https://wa.me/[telefoonnummer]. Vul je telefoonnummer in internationaal formaat in zonder plus, spaties of streepjes. Voor een Nederlands nummer: https://wa.me/31612345678.

Wat is het wa.me link formaat?

Het wa.me formaat is: https://wa.me/[landcode][nummer]?text=[bericht]. Voor Nederland gebruik je landcode 31 en verwijder je de voorloop-nul. Voorbeeld: 06-12345678 wordt https://wa.me/31612345678.

Kan ik het WhatsApp icoon gebruiken op mijn website?

Ja, WhatsApp staat toe dat je hun officiële icoon gebruikt voor click-to-chat links. Download het officiële icoon van de WhatsApp Brand Resources pagina.^[7]

Hoe voeg ik een vooraf ingevuld bericht toe?

Voeg ?text= toe aan je link gevolgd door je bericht. Gebruik %20 voor spaties. Voorbeeld: https://wa.me/31612345678?text=Hallo%20ik%20heb%20een%20vraag.

Werkt een WhatsApp button ook op desktop?

Ja, op desktop opent de link WhatsApp Web of de WhatsApp Desktop app. De bezoeker moet wel ingelogd zijn met hun telefoonnummer. Overweeg een QR-code toe te voegen voor desktop-gebruikers.

Wat is de beste WordPress plugin voor WhatsApp?

Joinchat (voorheen WAme) is de populairste WhatsApp plugin met 700.000+ installaties. Het biedt een floating button, analytics, openingstijden en GTM-integratie. Click to Chat is een goed gratis alternatief.

Wat is het verschil tussen WhatsApp en WhatsApp Business?

WhatsApp Business biedt zakelijke features: een profiel met bedrijfsinfo, automatische begroeting, afwezigheidsbericht, snelle antwoorden, labels voor chats en een productcatalogus. Het is gratis en aanbevolen voor zakelijk gebruik.

Hoeveel kost een WhatsApp button op mijn website?

Een basis WhatsApp button is volledig gratis. Je hebt alleen een WhatsApp account nodig. Premium WordPress plugins kunnen extra kosten voor geavanceerde functies, maar de basisfunctionaliteit is altijd gratis.

Samenvatting

Een WhatsApp button op je website plaatsen is een effectieve manier om de drempel voor klantcontact te verlagen.

De belangrijkste punten:

Gebruik wa.me links in het juiste formaat: https://wa.me/31612345678
Voeg optioneel een standaardbericht toe met ?text=
Kies voor HTMLKeurigOnline zegtHTMLHTML is de programmeertaal voor het maken van webpagina’s./CSSKeurigOnline zegtCSSCSS (Cascading Style Sheets) is een opmaaktaal voor het vormgeven en stylen van webpagina's en documenten. code of een WordPress plugin zoals Joinchat
Gebruik WhatsApp Business voor zakelijke features
Plaats de button rechtsonder als floating element voor maximale zichtbaarheid
Test altijd op zowel mobiel als desktop

Met de code en instructies uit dit artikel kun je binnen 10 minuten WhatsApp aan je website toevoegen. Begin vandaag nog en maak het voor je bezoekers makkelijker om contact op te nemen. Wil je nog meer uit je website halen? Lees dan ook onze gids over conversie optimalisatie.

Bronnen

WhatsApp Users Statistics (2025) — DemandSage
Klik en chat gebruiken — WhatsApp Helpcentrum
How to create a WhatsApp link (wa.me) — Chatfuel
rel=noopener — MDN Web Docs
Joinchat – WhatsApp WordPress Plugin — WordPressKeurigOnline zegtWordPressWordPress is een open-source contentmanagementsysteem (CMS) geschreven in PHP, waarmee je eenvoudig websites en blogs kunt bouwen en beheren..org
The Difference Between WhatsApp and WhatsApp for Business — WhatsApp Business
WhatsApp Brand Resources — Meta
WhatsApp gebruikers Nederland — Statista

Je winkelwagen is leeg