Handleiding: de actie Popup, Banner & HTML Builder

De Popup, Banner & HTML Builder is de werkpaardactie om content te tonen: promoties, aankondigingen, couponpopups, rad-van-fortuinspellen, heroslider, zwevende chatknoppen, voortgangsindicatoren — alles wat uit een template of je eigen HTML is gebouwd en wordt getoond als popup, balk, schermvullende overname of inline in de pagina.

Er een toevoegen

Open in een campagne Targeting & personalisatie de stap Content en klik op Actie toevoegen.
Kies Popup, Banner & HTML Builder. De templategalerie gaat open. Je kunt ook Leeg beginnen en je eigen HTML plakken, of kopiëren van een actie die je al hebt gebouwd.

De families in de galerie (elk met een link naar een eigen uitgebreid artikel):

Coupon Popup — promocode met klik-om-te-kopiëren of onthullen door te vervagen.
Spin Wheel (gestapeld en naast elkaar/schermvullend) — gegamificeerd prijzenrad.
Hero Slider — tot vier roterende slides.
Announcement Bar en Rotating Announcement Bar — stroken boven of onder.
Status Tracker en voortgangsbalken per niveau — live voortgang naar een doel of loyaliteitsniveau op basis van profielwaarden.
Hover Bubble CTA — zwevende knop in de hoek die een berichtenbubbel opent (een chat starten, een gesprek plannen).
Center Modal, Full-Screen Overlay, Corner Toast, System Message, verticale drawers en banners.
Multi-Step Quiz — vragenlijst voor begeleid verkopen.

De editor

Stap 1 — Je banner of popup ontwerpen. Klik direct op een element in het live voorbeeld, of klap de groep ervan open in de zijbalk. Elke instelling heeft een knop ⚡ Variaties — cases op basis van de doelgroep (taal, land, terugkerende bezoeker, CRM-veld…) met een standaardwaarde als terugval, precies zoals beschreven in de handleiding voor de countdown.

Wat de groepen bevatten (hier voor de Coupon Popup; andere templates verschillen):

Style — kleurpreset, lay-out van de afbeelding, hoeken, entreeanimatie (pop…), schaduw van de kaart, geavanceerde CSS voor de kaart.
Coupon Code — de code zelf en de Reveal Style: copy (klik om naar het klembord te kopiëren), reveal (vervaagd tot erop wordt geklikt), display (altijd zichtbaar).
Text — bovenkop, titel, hoofdtekst, kleine lettertjes; elk met een schakelaar om te tonen of te verbergen, een eigen CSS-hook en Variaties.
Button — tekst, en dan Open link (hetzelfde of een nieuw venster) of Run JavaScript; Count clicks here (click target) markeert de knop als klikdoel voor de CTR; optionele animatie.
Close — houd het ingebouwde ×, of kies uit de iconenbibliotheek (24 iconen) of een eigen afbeelding. Don’t show again for N sessions: nadat een bezoeker de actie heeft gesloten, blijft die zoveel sessies verborgen — met 0 komt ze het volgende bezoek terug, met 999 wordt ze in feite nooit meer getoond.
HTML-bron (geavanceerd) — de volledige markup, voor developers.

Werkbalk: Voorbeeld weergeven als op telefoon / tablet / desktop, Template wijzigen, Toevoegen aan je templates (bewaart je aangepaste versie voor hergebruik) en Actie bewerken met AI — beschrijf de wijziging in gewone taal en de AI geeft de actie een nieuwe stijl of herschrijft die.

Weergaveregels & plaatsing

Stap 2 — Weergaveregels & plaatsing instellen:

Inline-element — wordt weergegeven in een of meer placeholders; staat tussen je paginacontent.
Zwevende popup — kies een schermpositie; daarna entreeanimatie, optionele gedimde modale achtergrond, scrollgedrag, sluitknop, automatisch sluiten. Instellingen die alleen voor popups gelden, worden bij inline uitgeschakeld weergegeven — het scherm houdt zijn vorm.
Zolang je geen plaatsing kiest, kan de actie nergens worden weergegeven — de stap zegt dat expliciet, zodat een onzichtbare actie nooit een raadsel is.
Triggers — wanneer de actie opent. Er zijn er elf, gegroepeerd naar wat de bezoeker doet — zie Triggers hieronder.
Frequentielimieten — stoppen na sluiten / klikken / N impressies, burstmodus, afstand tot andere popups — elke regel wordt in gewone taal herhaald met jouw getallen.

Triggers — wanneer de popup opent

Een trigger bepaalt het moment waarop een actie verschijnt, nadat de doelgroepregels van de campagne al hebben bepaald wie die ziet. Vink er zoveel aan als je wilt: wat het eerst gebeurt, opent de actie.

Bij binnenkomst

Bij pagina betreden — zodra de pagina laadt. Dit is ook de terugval: als niets anders is aangevinkt, opent de actie bij het laden.
Tonen na vertraging — een aantal seconden, geteld vanaf het laden van de pagina, wat de bezoeker ook doet.
Bij inactiviteit gedurende — geen muisbeweging, geen klik, geen toetsaanslag. Elk van de drie start de telling opnieuw, zodat dit afgaat na een echte pauze in plaats van op een vast moment.

Bij betrokkenheid

Na scrollen tot — een percentage van de totale paginahoogte.
Bij terugscrollen naar boven — ze gingen naar beneden en kwamen weer terug.
Bij kopiëren van tekst — ze gebruikten Cmd/Ctrl+C.
Wanneer tekst wordt geselecteerd — een zin markeren, voordat ze die kopiëren. De trigger wacht ongeveer een halve seconde nadat de selectie niet meer verandert, zodat een sleepbeweging eerst klaar is, en heeft tien tekens of meer nodig — een losse dubbeltik op één woord telt niet.
Wanneer hij stopt met scrollen gedurende — halverwege de pagina geparkeerd, lezend in plaats van scannend. Alleen echt scrollen start de klok, dus op een pagina waar niemand scrolt, gaat dit nooit af; elke volgende scroll start hem opnieuw.

Bij exit intent — nu ook op telefoons

Exit intent bestaat uit twee onafhankelijke detectoren, omdat vertrekken er met een muis heel anders uitziet dan op een touchscreen. Vink er een of beide aan.

Desktop — cursor vertrekt. Gaat af als de aanwijzer de bovenrand van het venster passeert, waar de sluitknop, de tabbladen en de adresbalk zitten. Vertrekken via de zijkanten of de onderkant telt niet, want dat zijn geen uitgangen.
Mobiel — tik op Terug. Ze tikken op Terug op een touchapparaat. De detector wordt pas actief nadat de bezoeker iets doet — een scroll, een tik of een toetsaanslag — nooit bij alleen het laden van de pagina, zodat wie meteen weggaat de Terug-knop gewoon kan gebruiken. Eenmaal actief opent één druk op Terug de actie in plaats van te vertrekken, en blijft de pagina staan; de druk daarna vertrekt normaal. Opnieuw laden maakt de detector weer actief.

De desktopdetector kan op een telefoon niet afgaan — die let op een cursor, en die is er niet. Als exit intent je hele campagne is, sla je door alleen de desktopoptie aan te vinken ongemerkt elke mobiele bezoeker over. Zet Mobiel — tik op Terug aan om die te bereiken.

De detector voor tikken op Terug wordt alleen geïnstalleerd op apparaten zonder aanwijzer, zodat een laptop met een touchscreen gewoon de desktoptrigger krijgt en niet allebei. Zo test je hem: open de pagina, scrol een beetje en druk dan op Terug — zonder die eerste scroll is hij nog niet actief.

Vanuit je eigen code

Bij een gebeurtenis van je site — roep _S_T.trigger("add_to_cart") aan vanaf elke plek op je pagina op het moment dat het gebeurt, of push {event: "add_to_cart"} naar je datalaag en gebruik de naam die je al in je tagmanager hebt. Namen worden exact gematcht, inclusief hoofdletters. Het event afvuren voordat de actie is geladen, is veilig — de actie opent zodra die binnenkomt.

Openen vanuit iets op de pagina

Los van de triggers hierboven kan een actie door de bezoeker worden gestart: bij een klik op of hover over een element dat je aanwijst, via een element dat Personyze voor je toevoegt, of als minimaliseerbare popup die ingeklapt als tabblad klaarstaat tot die wordt geopend.

Als je 0 in de waarde van een trigger typt, wordt die gewist en de tegel uitgeschakeld — er bestaat geen status “aan, met een vertraging van nul” waarin je vast kunt komen te zitten.

Meten

De knop die als click target is gemarkeerd, voedt de CTR van de actie; impressies, kliks en sluitingen worden gerapporteerd in de stap Prestaties van de campagne en, als dat is ingeschakeld, in Google Analytics. Om ontwerpen tegen elkaar te testen, activeer je A/B-testen in de stap Content.

Tabblad Algemeen van de campagneprestaties — Het tabblad Algemeen van de stap Prestaties: bezoeken, impressies, kliks, conversies en omzet van de doelgroep, met een tabel waarin de acties naast elkaar staan. Klik om te vergroten.