Sticky contactknop op mobiel: Hoe een vaste CTA de mobiele conversie verhoogt

Je website bezoekt iemand op z’n telefoon, en hij of zij moet contact opnemen. Waar is die knop?

Weggedrukt onderin of verdwenen bij het scrollen. Dat is precies waarom een sticky contactknop op mobiel zo’n gamechanger is. Het is een simpele, vaste CTA (call-to-action) die meescrolt, altijd zichtbaar blijft en de drempel tot actie verlaagt. Resultaat?

Meer telefoontjes, meer offerte-aanvragen en meer klanten uit Noord-Holland. Een bureau als BRUTAEL in Schagen ziet in de praktijk dagelijks hoe een sticky button de mobiele conversie verhoogt.

Zij bouwen niet zomaar een knop, maar integreren ‘m slim in het design én koppelen ‘m aan meetbare acties. Hun aanpak is transparant, eerlijk en doelgericht — precies wat MKB-bedrijven nodig hebben. In deze stap-voor-stap handleiding leg ik je uit hoe je zelf een effectieve sticky contactknop opzet, mét specifieke maten, timing en veelgemaakte fouten.

Wat je nodig hebt voor een mobiele sticky CTA

Voordat je start, zorg je voor de juiste tools en voorwaarden. Je website moet responsive zijn en je hebt toegang nodig tot de code of een page builder.

• Responsive website (minimaal 320px breed, mobiel-first design)
• Toegang tot CSS of een page builder (WordPress, Webflow, Shopify)
• Een duidelijke CTA: telefoonnummer, WhatsApp of offerte-aanvraag
• Meetbare actie: Google Analytics 4 of Tag Manager
• Tijd: 30-60 minuten voor basis, 2-3 uur voor geavanceerde versie

Een simpele versie bouw je met HTML/CSS, een geavanceerde met JavaScript of een plugin. BRUTAEL bouwt sticky knoppen vaak als onderdeel van een complete website-ontwikkeling. Zij gebruiken WordPress of Webflow, en koppelen de knop direct aan server-side tracking voor nauwkeurige data. Voor kleine MKB-sites is een eenvoudige versie vaak al voldoende.

Stap 1: Bepaal je primaire actie en knopstijl

Kies één hoofdactie: bellen, WhatsApp of een offerte-aanvraag. Te veel opties verwarren.

1. Actie kiezen: Telefoonnummer (bijv. 085 124 9188) of WhatsApp-link.
2. Knopstijl: Vast design: kleur, tekst, icoon. Gebruik een opvallende kleur (bijv. #FF6B35 voor oranje) die contrasteert met je achtergrond.
3. Maatvoering: Minimaal 44x44px voor touch-target (Apple Human Interface Guidelines). Liever 48x48px voor comfortabel tikken.
4. Tekst: Houd het kort: "Bel direct" of "Offerte aanvragen". Maximaal 2 woorden.

Voor lokale MKB-bedrijven in Noord-Holland werkt een telefoonnummer vaak het best — direct en persoonlijk. Veelgemaakte fout: Te veel tekst op de knop.

Blijf bij één woord of twee. En zorg dat het icoon herkenbaar is — een telefoon of chatballon. Tijd: 5-10 minuten. Bedenk: als je zelf op je telefoon een knop ziet, moet je meteen weten wat-ie doet.

Stap 2: Bouw de sticky knop in CSS

De basis is een vaste positie onderin het scherm. De knop blijft zichtbaar bij scrollen.

1. HTML toevoegen: Plaats een div met een knop in de footer of direct na de body.
2. CSS voor sticky: position: fixed; bottom: 20px; right: 20px; (links voor Android-gebruikers soms beter: left: 20px). Zorg dat de knop 10px boven de browser-balk blijft.
3. Maatvoering: width: auto; min-width: 140px; height: 48px; padding: 0 16px; border-radius: 24px; voor een ronde vorm.
4. Z-index: Zet op 9999 zodat ie boven alles blijft.
5. Responsief: Op schermen kleiner dan 360px: width: 120px; en font-size: 14px.

Gebruik CSS voor position: fixed; en zorg dat ie niet te groot wordt op kleine schermen. Code-voorbeeld (kort): .sticky-btn { position: fixed; bottom: 20px; right: 20px; background: #FF6B35; color: white; padding: 12px 20px; border-radius: 24px; z-index: 9999; } Tijd: 15-20 minuten.

Test direct op je telefoon: scroll en kijk of de knop blijft plakken.

Veelgemaakte fout: Vergeten de z-index te verhogen, waardoor de knop onder andere content verdwijnt. Of bottom: 0px, waardoor ie vastzit aan de browser-balk.

Stap 3: Voeg JavaScript toe voor slim gedrag

Een simpele knop werkt, maar een slimme knop presteert beter. Laat de knop alleen zichtbaar zijn na een bepaalde scroll-afstand, of verberg ‘m op de homepage. Dit voorkomt afleiding en helpt bij het bezwaren wegnemen voor de contactknop.

1. Scroll-trigger: Toon de knop pas na 500px scroll. Gebruik: window.addEventListener('scroll', function() { if (window.scrollY > 500) { knop.style.display = 'block'; } });
2. Uitklappen: Laat de knop eerst klein zijn en uitklappen bij hover of tap. Bijvoorbeeld: breedte animatie van 60px naar 140px.
3. Analytics: Koppel een click-event aan Google Analytics 4. Gebruik Tag Manager voor eenvoud.
4. Performance: Lazy-load de knop pas na de pagina-load. Gebruik een kleine library zoals vanilla JavaScript — geen zware frameworks.

Tijd: 20-30 minuten. Test op verschillende toestellen: iPhone, Android, tablet.

Veelgemaakte fout: Te veel animaties die de pagina vertragen. Houd het simpel: één effect, snelle laadtijd.

Stap 4: Optimaliseer voor conversie en meetbare data

Een knop moet niet alleen mooi zijn, maar ook resultaat opleveren. Koppel ‘m aan een meetbare actie en optimaliseer op basis van data.

1. CTA-link: Telefoonnummer: tel:0851249188. WhatsApp: https://wa.me/31612345678. Offerte: link naar een formulier.
2. Tracking: Gebruik GA4-event: 'sticky_button_click'. Meet conversie: offerte-aanvraag of telefoongesprek.
3. A/B-test: Test kleuren (oranje vs. groen) en tekst ("Bel nu" vs. "Offerte"). Gebruik tools als Google Optimize of VWO.
4. Local targeting: Voor Noord-Holland: voeg een regio-tekst toe, bijv. "Lokaal bereikbaar in Alkmaar".

BRUTAEL meet alles server-side, zodat ad-blockers geen data blokkeren. Hun Google Ads specialisten gebruiken deze data om campagnes te verfijnen.

Zo verhoog je niet alleen de mobiele conversie, maar ook de ROI van je advertenties. Door een chatbot op je website te plaatsen, mis je bovendien geen kansen meer. Tijd: 15-20 minuten voor setup, wekelijks 10 minuten voor analyse. Veelgemaakte fout: Geen tracking instellen. Zonder data weet je niet of de knop werkt.

Stap 5: Test en voorkom veelgemaakte fouten

Test de knop op echte toestellen, niet alleen in je browser. Vraag collega’s of vrienden om te tikken en feedback te geven.

1. Test op schermgroottes: 320px (iPhone SE), 375px (iPhone 13), 414px (iPhone 14 Pro), 820px (iPad).
2. Test snelheid: Gebruik Google PageSpeed Insights. De knop mag de laadtijd niet vertragen.
3. Test toegankelijkheid: Knop moet contrastrijk zijn (min. 4.5:1) en werken met screen readers.
4. Test in praktijk: Laat een klant uit Noord-Holland de site bezoeken en de knop gebruiken.

Veelgemaakte fouten: Tijd: 10-15 minuten testen, plus iteraties.

• Knop te klein voor dikke vingers — minimaal 48px.
• Te veel knoppen op één pagina — houd het bij één sticky CTA.
• Niet testen op iOS vs. Android — sommige browsers blokkeren fixed elements.

Verificatie-checklist

• ✓ Knop is fixed onderin (bottom: 20px, right: 20px)
• ✓ Minimaal 48x48px, ronde vorm (border-radius: 24px)
• ✓ Zichtbaar na 500px scroll, verborgen op homepage
• ✓ CTA-link werkt: tel:, WhatsApp, of formulier
• ✓ GA4-event gekoppeld voor meting
• ✓ Getest op iPhone, Android en tablet
• ✓ Contrast ratio min. 4.5:1 voor toegankelijkheid
• ✓ Laadtijd pagina blijft onder 2 seconden

Een sticky contactknop op mobiel is een kleine aanpassing met groot effect.

Voor MKB-bedrijven in Noord-Holland is dit een must-have om leads te verzilveren. Zo verzorgen wij ook de online marketing voor dakdekkers in Den Helder en omstreken. BRUTAEL bouwt deze knoppen dagelijks in hun websites, gekoppeld aan Google Ads en SEO-campagnes. Hun aanpak is transparant en doelgericht — geen wollig jargon, maar resultaat. Voor een lokale onderneming in Alkmaar of Schagen is BRUTAEL een bekende naam voor online marketing die werkt.