Samenvatting
Een floating WhatsApp-knop is een groen rondje rechtsonder in beeld dat altijd zichtbaar blijft, ook als je bezoeker naar beneden scrollt. Met één klik opent de bezoeker een WhatsApp-gesprek met jou. Dit is ideaal als je WhatsApp als contactkanaal gebruikt — denk aan restaurants, consultants of kleine bedrijven.
Hoe werkt het
Je plakt een stukje HTML- en CSS-code in je website-instellingen. De code maakt een groene ronde knop met het WhatsApp-icoon die altijd rechtsonder in beeld blijft staan. Als iemand erop klikt, opent WhatsApp met jouw telefoonnummer.
- Op een telefoon: de WhatsApp-app opent direct
- Op een computer: WhatsApp Web opent in de browser
Stappenplan
- Ga naar Website-instellingen → tabblad Code → veld Body
- Plak de onderstaande code
- Vervang het telefoonnummer door jouw eigen nummer
Belangrijk: Gebruik je telefoonnummer in internationaal formaat, zonder + teken, spaties of haakjes. Voor een Nederlands nummer: begin met 31 en laat de eerste 0 weg. Bijvoorbeeld: 06-12345678 wordt 31612345678.
De code:
<style>
.whatsapp-float {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 9999;
background-color: #25D366;
border-radius: 50%;
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.25);
text-decoration: none;
transition: transform 0.2s ease;
}
.whatsapp-float:hover {
transform: scale(1.1);
}
.whatsapp-float svg {
width: 30px;
height: 30px;
fill: white;
}
</style>
<a class="whatsapp-float"
href="https://wa.me/31612345678"
target="_blank"
rel="noopener"
aria-label="Chat via WhatsApp">
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<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>
Veelgestelde vragen
Kan ik de positie aanpassen?
Ja. De knop staat standaard rechtsonder. Heb je ook een cookiebanner rechtsonder? Verander dan de waarde van "bottom" naar bijvoorbeeld 80px, zodat de knop boven de banner komt te staan.
Kan ik de knop alleen op bepaalde pagina's tonen?
Ja. Plak de code dan niet in de website-brede Body-code, maar in de pagina-specifieke Body-code van de pagina's waar je de knop wilt tonen.
Welk nummerformaat gebruik ik?
Gebruik het formaat wa.me/31612345678 — zonder plussen, spaties of haakjes. Voor een Nederlands nummer begin je met 31 en laat je de eerste 0 weg.