Pop-upsjablonen voor websites: 16 kant-en-klare ontwerpen voor elk doel

Een pop-up is maar zo goed als het moment waarop hij verschijnt. Het ontwerp telt, maar wat bepaalt of hij converteert of irriteert, is targeting, timing en of het formaat bij de boodschap past — een smalle balk voor een verzendmelding, een schermvullende overlay voor een lancering.

Hieronder vind je 16 sjablonen voor websitepop-ups voor elk gangbaar formaat: balken, modals, overlays, meldingen, gegamificeerde interacties en voortgangsindicatoren. Elk is een werkend sjabloon dat je kunt configureren — tekst, kleuren, targeting en frequentie — zonder code te schrijven. Elk sjabloon linkt door naar de volledige installatiehandleiding.

Wat maakt een goed pop-upontwerp

Eerst de criteria die een pop-up waar mensen op reageren scheiden van een die ze wegklikken:

• Eén taak. Een pop-up die om een e-mailadres vraagt, een uitverkoop promoot en een nieuwe functie aankondigt, bereikt geen van drieën.
• Formaat dat past bij het gewicht. Kleine boodschap, kleine voetafdruk. Bewaar schermvullende overlays voor momenten die de onderbreking echt verdienen.
• Zichtbare uitweg. Een pop-up die moeilijk te sluiten is, maakt van een bounce een wrok, en op mobiel riskeer je een Google-penalty.
• Frequentielimiet. De tweede keer dat dezelfde boodschap verschijnt, presteert slechter dan de eerste; de vijfde keer richt schade aan.
• Targeting boven timing. “Na 5 seconden” is een botte regel. “Terugkerende bezoeker, winkelwagen boven $50, heeft dit aanbod nog niet gezien” is een reden om te verschijnen.

Balken: blijvende boodschappen met weinig onderbreking

Balken staan boven- of onderaan de pagina zonder content te blokkeren — de juiste keuze voor alles wat zichtbaar moet blijven in plaats van om een beslissing te vragen.

Aankondigingsbalk — een smalle strook over de volle breedte voor sitebrede boodschappen: verzendaanbiedingen, uitverkoop, productnieuws of beleidsmeldingen. Boven- of onderaan, vast of statisch.

Roterende aankondigingsbalk — dezelfde strook die tot vijf boodschappen afwisselt, elk met een eigen link, op een timer met puntnavigatie en een vervagende of schuivende overgang. Handig als meerdere dingen om één plek concurreren.

Statusbalk gratis verzending — een live voortgangsbalk die een waarde uit het profiel van de bezoeker leest — “Nog $65 tot gratis verzending” — en zich vult naarmate de winkelwagen groeit.

Statusbalk met niveaus — de loyaliteitsversie: toont het huidige niveau, de voortgang naar het volgende en wat daar wordt ontgrendeld, aangestuurd door punten, besteding of bestellingen.

Pop-ups en modals: gerichte vragen

Gecentreerde modal — een gecentreerde pop-up boven een donkere overlay, met vier afbeeldingslay-outs in één sjabloon en controle over waar de afbeelding op mobiel staat. De standaardkeuze voor één helder aanbod.

Overlay op volledig scherm — een welkomstscherm dat de hele viewport vult, met een achtergrond in een kleur, een verloop of een afbeelding tot aan de randen. Voor lanceringen, seizoenscampagnes en welkomstberichten bij een eerste bezoek.

Hoekmelding — een compacte meldingskaart met een afbeelding, een kop, een korte boodschap en een call-to-action. Niet opdringerig — ideaal voor social proof, zachte promoties en duwtjes richting functies.

Kortingspop-up — een kortingscode met een keuze uit onthulstijlen: klikken om te kopiëren, klikken om te onthullen of altijd zichtbaar, plus afbeelding, kop, CTA en kleine lettertjes.

Formulier voor leadgeneratie — verzamelt bezoekersgegevens en schrijft ze naar het Personyze-profiel, zodat je kunt opvolgen, segmenteren of personaliseren wat ze daarna zien. Lay-out naast elkaar of onder elkaar.

Interactieve en gegamificeerde formaten

Deze vragen de bezoeker iets te doen. De betrokkenheid is veel hoger, en dat geldt ook voor de prijs van overmatig gebruik.

Draairad — een gegamificeerd prijzenrad met kansen die jij bepaalt, in een lay-out onder elkaar of op volledig scherm. Wat elke bezoeker wint, wordt in diens profiel opgeslagen voor latere targeting.

Aanbevelingsquiz — een paar vragen waarbij elk antwoord stemt op een resultaatgroep, eindigend in een aanbeveling op maat en een call-to-action.

Beide worden uitgebreider behandeld in de gids over gamification-marketing.

Het Draairad in detail

Van de interactieve sjablonen is het Draairad het sjabloon dat een goede uitleg verdient — het converteert goed omdat de korting verdiend voelt in plaats van weggegeven, en het levert veel meer op dan een ingewisselde kortingscode als je het goed instelt.

Je stelt vier tot acht segmenten in, elk met een label, kleur, prijsboodschap en kortingscode. De bezoeker klikt, het rad remt af en de boodschap van het winnende segment verschijnt met confetti of een gloed.

• Jij bepaalt de kansen. Elk segment heeft een relatief winkansgewicht — gewichten van 35/25/20/12/5 worden gewoon die percentages. Houd grote prijzen zeldzaam en kleine vaak voorkomend.
• Voeg een verliesvak toe voor de spanning. Geef een segment een label als Probeer opnieuw en laat de kortingscode leeg, dan telt het als vak zonder winst.
• Bepaal of er opnieuw gedraaid mag worden. Pogingsmodus is Eén keer (één draai, resultaat vast), Opnieuw (alleen opnieuw draaien bij een verliesvak tot iemand wint) of Meerdere (een vast aantal draaibeurten).
• Inline of volledig scherm. Sluit het in een pagina in of centreer het op een gedimde overlay, met in beide gevallen dezelfde kansen.
• Sla het resultaat op in het profiel. Dit is het deel dat de meeste prijzenraderen missen — de winnende prijs en code worden in het profiel van de bezoeker geschreven, zodat je mensen kunt opvolgen die gratis verzending wonnen maar nooit bestelden, of iedereen kunt uitsluiten die al een prijs claimde.

De versie met formulier, als je het e-mailadres wilt

Het standaardrad zet bewust geen formulier vóór het draaien — de beloning is het draaien zelf, wat de drempel laag houdt. Is de lead belangrijker dan het spel, dan zet het draairad met formulier er een formulier voor.

Het rad is vanaf het eerste beeld zichtbaar, maar grijs en met een hangslot, zodat de bezoeker precies ziet waarvoor hij zijn adres inruilt. Na verzenden wordt het formulier vervangen door een dankjewel, ontgrendelt het rad en draait het — en het e-mailadres en de gewonnen prijs komen in hetzelfde profiel terecht. Eén kanttekening: wie met een e-mailadres heeft “betaald”, vindt een verliesvak extra zuur, dus houd die zeldzaam of laat elk vak iets opleveren.

De volledige instructies staan in de documentatie van het sjabloon Draairad, en een uitgebreider artikel vind je in het playbook voor prijzenraderen.

Voortgang, status en urgentie

Statuskaart — de kaartvorm van het voortgangsmechanisme — hoe dicht een bezoeker bij gratis verzending of een beloning is, als gecentreerde kaart of pop-up, aangestuurd door een live profielwaarde.

Statuskaart met niveaus — dezelfde kaart met de voortgang door loyaliteitsniveaus: Brons, Zilver, Platina, met het verschil tot het volgende niveau.

Sjablonen voor afteltimers — drie varianten — kaart, balk en evenementbalk — met één gedeelde timerengine, voor een uitverkoop die afloopt, een prijs die stijgt of een evenement dat begint.

Aftelling met evenementvoortgang — een balk die zich vult naarmate de datum nadert in plaats van alleen op cijfers te vertrouwen, met een aanmeldknop. Gemaakt voor webinars, lanceringen en livesessies.

Op de pagina: de heroplek

Heroslider — een roterende herobanner met maximaal vier slides, elk met een eigen afbeelding, kop, subtekst en knop — tekst naast de afbeelding of over een achtergrond tot aan de randen.

Pop-upvoorbeelden per doel

Weet je welk resultaat je wilt, dan is dit de kortste weg naar een formaat:

• Laat je e-maillijst groeien — Formulier voor leadgeneratie, een Draairad dat na de winst om het adres vraagt, of het Draairad met formulier dat er vooraf om vraagt.
• Verhoog de gemiddelde orderwaarde — Statusbalk gratis verzending of Statuskaart.
• Breng een actie onder de aandacht — Kortingspop-up, met een afteltimer als de deadline echt is.
• Kondig iets sitebreed aan — Aankondigingsbalk, of de roterende versie voor meerdere boodschappen.
• Help bezoekers kiezen — Aanbevelingsquiz.
• Stimuleer aanmeldingen voor evenementen — Aftelling met evenementvoortgang.
• Behoud en beloon — Statusbalk of Statuskaart met niveaus.

Je hoeft helemaal geen sjabloon te kiezen

Alles hierboven gaat ervan uit dat je door een bibliotheek bladert en kiest. Er is een snellere route: beschrijf de pop-up die je wilt en laat de AI-agent hem bouwen. Dan verschuift je taak van een sjabloon kiezen en restylen naar het beoordelen van iets dat al af is.

Drie dingen maken dit meer dan een sjabloongenerator:

• Hij stijlt vanuit je echte site. Voordat hij gaat bouwen, scant de agent je pagina’s op merkkleuren, lettertypen, knopstijlen en de toon van je teksten. Wat eruit komt, ziet eruit als je eigen site in plaats van een sjabloon dat erbovenop is geplakt — en een bezoeker ziet niet dat het is gegenereerd.
• Gewone woorden worden echte targeting. Zeg “nieuwe bezoekers op mobiel die de prijzenpagina hebben bereikt” en hij zet dat om in echte targetingregels, en leest de gecompileerde regels daarna aan je voor zodat je ze kunt controleren.
• Niets bereikt live verkeer. Alles wat hij bouwt, wordt aangemaakt in staging — alleen zichtbaar voor bezoekers vanaf een staging-IP. Je bekijkt het vooraf op je echte pagina’s en publiceert zelf.

Hoe dat er in de praktijk uitziet

Je kunt aan beide kanten beginnen. “Bouw een pop-up met welkomstaanbod voor nieuwe bezoekers” levert een afgewerkte pop-up in je huisstijl op, met targeting erbij. Of kies een sjabloon uit de bibliotheek hierboven en laat de agent het restylen naar je merk, met behoud van je aanbod. Hoe dan ook stuur je bij in een gesprek — “maak er een balk van”, “probeer een andere kleur”, “target ook terugkerende bezoekers” — zonder een CSS-paneel te openen.

Het werkt ook andersom: vraag “wat moet ik deze week verbeteren?” en je krijgt gerangschikte kansen over al je pagina’s en campagnes, elk met een actie van één tik. Op een site met een paar honderd pagina’s is weten waar een pop-up de moeite waard is meestal de moeilijkste helft.

De agent draait in het Personyze-paneel — zie de AI-personalisatieagent — en dezelfde mogelijkheden zijn bereikbaar vanuit Claude of ChatGPT als je liever werkt vanuit een assistent die je al gebruikt. Meer details in de gids over de AI-marketingagent.

Werk je liever vanuit Claude? Installeer de connector vanuit de directory — Personyze in de Claude-directory.

Best practices voor pop-ups

• Houd rekening met mobiel. Google beschouwt opdringerige interstitials op mobiel als rankingprobleem. Balken en meldingen zijn daar veiliger dan overlays.
• Trigger op intentie, niet alleen op tijd. Exit intent, scrolldiepte, winkelwagenwaarde en herhaalbezoeken zijn allemaal beter dan een willekeurige vertraging.
• Onderdruk na een actie. Wie zich heeft ingeschreven, mag de inschrijfpop-up nooit meer zien.
• Test het aanbod vóór het ontwerp. Een andere prikkel verandert de conversie veel meer dan een andere knopkleur.
• Sla de uitkomst op. Een pop-up die een voorkeur vastlegt en naar het bezoekersprofiel schrijft, blijft renderen nadat de campagne is afgelopen.

Pop-upsjablonen: veelgestelde vragen

Hoeveel pop-ups is te veel?

Eén actieve vraag per bezoek is een veilige regel. Een blijvende balk en één interactieve pop-up kunnen naast elkaar bestaan, omdat de balk geen beslissing vraagt, maar twee concurrerende overlays onderdrukken elkaar.

Schaden pop-ups de SEO?

Alleen als ze op mobiel opdringerig zijn. Balken, meldingen en pop-ups die na echte betrokkenheid verschijnen, worden niet bestraft. Meer hierover in personalisatie en SEO.

Kan ik deze sjablonen bewerken?

Ja — elk sjabloon is een startpunt. Tekst, kleuren, lay-out, beeldmateriaal, triggers, targetingregels en frequentie zijn allemaal instelbaar, en de onderliggende HTML en CSS blijven bewerkbaar als je verder wilt gaan.

Wat is het verschil tussen een pop-up en een aankondigingsbalk?

Een pop-up ligt over de pagina en onderbreekt het bezoek om een beslissing te vragen. Een balk reserveert een strook aan de rand van de viewport en blijft uit de weg, waardoor hij geschikt is voor doorlopende boodschappen in plaats van eenmalige vragen.

Kan AI een pop-up voor me bouwen?

Ja. Beschrijf wat je wilt en de AI-agent van Personyze bouwt het, nadat hij eerst je site heeft gescand op merkkleuren, lettertypen, knopstijlen en toon, zodat het resultaat bij je pagina’s past. Targeting in gewone taal wordt omgezet in echte regels en aan je voorgelezen, en alles wordt in staging aangemaakt, zodat live verkeer niet wordt geraakt tot je publiceert.

Hoe bepaalt het Draairad wat iemand wint?

Elk van de vier tot acht segmenten heeft een relatief winkansgewicht, en de gewichten worden opgeteld om de werkelijke kansen te bepalen — gewichten van 35, 25, 20, 12 en 5 worden dus die percentages. Een segment met een label als Probeer opnieuw en zonder kortingscode werkt als verliesvak. De winnende prijs en code worden in het profiel van de bezoeker opgeslagen voor latere targeting.

Aan de slag

Alle 16 sjablonen zijn zonder code te configureren en te targeten. Boek een demo of bekijk de abonnementen.

Bouw er een door erom te vragen: de AI-personalisatieagent.

Verder lezen

• Gamification-marketing — de mechanismen achter de interactieve sjablonen.
• Prijzenraderen met draai-en-win — het rad uitgediept.
• Balken voor gratis verzending en loyaliteitsniveaus — de AOV-aanpak.
• Pop-ups en banners — hoe targeting en frequentie werken.