De afteltemplates zetten een live timer voor je bezoekers om urgentie te creëren rond een deadline — een uitverkoop die eindigt, een prijs die stijgt of een evenement dat begint. Er zijn er drie. Ze delen dezelfde timerengine en bijna alle instellingen, dus als je er één kent, ken je ze alle drie; kies de vorm die past bij de plek waar je hem wilt tonen.
De drie templates
- Countdown Timer Card — een kaart met de kop, timer en knop. Gebruik hem inline in een pagina, combineer hem met de modale achtergrond van de actie om er een pop-up van te maken, of zet hem op overname van het volledige scherm. Hij kan gestapeld zijn (alles gecentreerd) of naast elkaar (tekst aan de ene kant, timer aan de andere).
- Countdown Timer Bar — een strook over de volle breedte, vastgezet aan de boven- of onderkant van het scherm, zoals een aankondigingsbalk met een live timer. Hij kan ook inline in de pagina staan.
- Event Countdown Bar — dezelfde strook, ingericht voor webinars, lanceringen en live-evenementen. Hij voegt een evenementicoon toe, iconen op de knoppen, en een tweede link voor “Aan agenda toevoegen”.
Alles hieronder geldt voor alle drie, tenzij anders vermeld.
Het aftellen instellen
Open de sectie Timer en gebruik Countdown logic. Je kunt op twee manieren aftellen:
- Een vaste datum en tijd — iedereen ziet dezelfde deadline. Gebruik dit voor een echt evenement of een uitverkoop die echt op een vast moment eindigt.
- Aftellen per bezoeker — elke bezoeker krijgt een eigen periode (bijvoorbeeld een uur vanaf de eerste weergave), opgeslagen in de browser. Gebruik dit voor doorlopende aanbiedingen. Je kunt het ook na een gekozen periode opnieuw laten starten.
Standaard staan de templates op aftellen per bezoeker van een uur, zodat er een timer loopt zodra je de template plaatst. Verander dit in je echte deadline voordat je live gaat.
Kiezen welke eenheden je toont
De timer toont dagen, uren, minuten en seconden. Wil je een eenheid verbergen, maak dan het label leeg in de sectie Timer — als je “Days Label” leegmaakt, verdwijnt het hele vakje voor dagen, niet alleen het onderschrift. Zo toon je bijvoorbeeld alleen uren en minuten.
Je kunt de labels ook in je eigen woorden zetten, en de Separator Between Boxes instellen (het teken : ) of die leegmaken voor helemaal geen scheidingsteken.
De timer opmaken
Elk onderdeel van de timer heeft een eigen stijlinstelling: het vakje achter elk getal, het getal zelf, het onderschrift eronder, het scheidingsteken en de container rond het geheel. Standaard krijg je witte vakjes met donkere cijfers en een gekleurd scheidingsteken.
Goed om te weten: de stijl van de vakjes geldt ook voor de scheidingstekens, dus als je de vakjes een achtergrond geeft, verschijnt die ook achter het scheidingsteken, tenzij de stijl van het scheidingsteken dat overschrijft. De meegeleverde standaardwaarden regelen dit al.
Tekst rond de timer
Naast het bovenlabel, de titel en de subtekst kun je een korte regel boven en onder de timer aanzetten — bijvoorbeeld “Aanbieding eindigt over” erboven en “Beperkt aantal plaatsen” eronder. Beide staan standaard uit; zet ze aan in de sectie Timer en stel je eigen tekst in. Ze gaan mee met de timer, waar je die ook plaatst.
Als de timer nul bereikt
In de sectie Timer kun je een bericht instellen dat verschijnt als het aftellen klaar is. When Timer Ends bepaalt wat er met de rest van de inhoud gebeurt:
- Yes (standaard) — het bericht vervangt alles, zodat de bezoeker één duidelijke mededeling ziet, zoals “Deze aanbieding is afgelopen”.
- No — alleen de timer zelf wordt vervangen; de kop en de knoppen blijven staan.
Waar hij verschijnt
Kaart: inline plaatst hem in de pagina waar de actie is geplaatst — combineer dit met de instelling voor de modale achtergrond van de actie als je een klassieke pop-up wilt. fullscreen maakt van het hele scherm de achtergrond, in een effen kleur of je eigen afbeelding, met de inhoud in het midden.
Balken: top of bottom zet de strook vast aan die rand van het scherm, zodat hij zichtbaar blijft terwijl de bezoeker scrolt; inline laat hem in de pagina meelopen.
Uiterlijk
- Preset — kleuren dark, light of brand.
- Size — compact, default of spacious.
- Corner Radius en Shadow — van vierkant en plat tot rond en sterk. Op een vastgezette balk blijven de hoeken vierkant, zodat hij strak tegen de rand ligt.
- Background Image — standaard uit. Zet het aan, kies een afbeelding, en gebruik Background Overlay om die donkerder te maken, zodat je tekst leesbaar blijft.
- Decorative Shapes — optionele subtiele cirkels, hoeken of ringen op de achtergrond. Ze nemen automatisch de kleur van de preset over.
- Logo — standaard uit; zet het aan en kies je afbeelding.
- Button Animation — een zachte puls, een zachte gloed of niets.
- Timer Urgency Pulse — een subtiele terugkerende puls op de timer zelf.
Knoppen
Alle drie hebben een hoofd-call-to-action met je eigen tekst en link, plus een optionele knop “No thanks” die hem gewoon wegklikt.
De Event Countdown Bar voegt een tweede link toe naast de hoofdknop, standaard ingericht als “Aan agenda toevoegen”. Laat die wijzen naar je Google Agenda-link, je Outlook-link of een .ics -bestand. Je kunt er ook een icoon in elke knop mee zetten, en een evenementicoon naast de tekst — een agenda, videocamera, microfoon, ticket enzovoort.
Sluiten, en een belangrijke opmerking over testen
De sectie Close regelt de X-knop: of die verschijnt, hoe die eruitziet, en of die altijd zichtbaar is of alleen bij hover. De sluitknop zorgt er ook voor dat de actie een tijdje niet opnieuw wordt getoond.
Lees dit voordat je test: zodra de actie is weggeklikt, verschijnt die ook voor jou niet meer, voor het aantal sessies dat op de actie is ingesteld. Dat kan er gemakkelijk uitzien alsof de template kapot is, terwijl hij precies werkt zoals ingesteld. Dus:
- Rond je tests en QA eerst af, en zet het verbergen daarna pas aan.
- Verschijnt hij al niet meer en wil je hem opnieuw zien, wis dan de cookies en sitegegevens voor je site, of open hem in een incognito- / privévenster.
- Hoeveel sessies hij verborgen blijft, stel je in bij de actie zelf, onder Placement / Trigger, niet in de template.
Een opmerking over het voorbeeld in de editor
Twee dingen gebeuren alleen op je echte site, niet in het editorpaneel:
- De timer telt alleen in het live voorbeeld en op je site. In de editor wordt hij weergegeven als een statische set vakjes.
- Balken op het volledige scherm en vastgezette balken zweven niet in de editor. Ze worden bewust als gewoon blok weergegeven, zodat ze de werkbalk van de editor niet kunnen bedekken. Gebruik het live voorbeeld om ze goed te zien.
Dit is verwacht gedrag, geen fout.
Technische opmerkingen
- Wie het aftellen ziet, waar en hoe vaak, stel je in bij de actie, niet in de template. De template bepaalt alleen het uiterlijk en gedrag.
- Alle drie de templates gebruiken de ingebouwde aftelengine van Personyze, dus tijdzones en de logica met de cookie per bezoeker worden voor je geregeld.
- De timer blijft op elk formaat op één regel, ook op telefoons, waar de vakjes krimpen in plaats van naar een nieuwe regel te gaan.
- Op smalle schermen stapelen de balken hun inhoud automatisch in een kolom.
Verder lezen
- Pop-uptemplates voor websites — alle 16 templates, en hoe je het juiste formaat kiest.
- Gamificationmarketing — de mechanismen achter interactieve templates en waar ze passen.