De Free Shipping Status Bar laat een bezoeker zien hoe dicht die bij een doel is — “Nog €65 tot gratis verzending” — met een live voortgangsbalk die zich vult naarmate de waarde groeit. Hij leest een getal uit het Personyze-profiel van de bezoeker (winkelwagentotaal, punten, aantal bestellingen), vergelijkt dat met een doel dat je instelt, en werkt het bericht, de balk en het percentage automatisch bij. Als het doel is bereikt, wisselt hij naar een succesbericht met een feestelijke animatie. De plaatsing stel je in bij de stap Locatie van de actie.
Wanneer je hem gebruikt
- Drempel voor gratis verzending — duw bezoekers om meer in de winkelwagen te leggen en zo gratis verzending te ontgrendelen.
- Beloningen / loyaliteitsdoelen — “Nog 120 punten tot je volgende beloning.”
- Mijlpalen voor besteding of bestellingen — elk enkelvoudig numeriek doel waar een bezoeker naartoe werkt.
Aan een actie toevoegen
Kies in een pop-upactie Free Shipping Status Bar. Stel de waarde in die wordt gelezen, het doel en het bericht. De instellingen zijn gegroepeerd als Style, Value, Goal, Message en Close.
De waarde instellen die hij leest
Dit is de belangrijkste stap. De balk heeft een live getal uit het profiel van de bezoeker nodig.
- Open de sectie Value en kies met de keuzelijst Current Value Field het profielveld dat het getal bevat — bijvoorbeeld een veld voor het winkelwagentotaal of voor punten. De balk leest de live waarde van dat veld op het moment van weergeven.
- Stel een Test Value in (een gewoon getal), zodat de balk ook in de editor goed wordt weergegeven, waar het live veld leeg kan zijn. De Test Value wordt alleen in de editor gebruikt — echte bezoekers zien altijd hun eigen waarde.
- Kies de Unit Prefix (valutasymbool) en optioneel een Unit Suffix (bijv. pts).
Op de live site leest de balk de echte profielwaarde; een lege waarde telt als 0, dus de balk verschijnt vanaf het begin, tenzij je Show From verhoogt. Zie voor hoe deze profielvariabelen worden ingevuld CRM-variabelen (tags) invoegen voor dynamische content.
De waarde in het profiel krijgen
De balk toont alleen een waarde die al op het profiel van de bezoeker staat, dus dat veld moet met actuele data worden gevuld — de widget toont de waarde en reageert erop, maar berekent de winkelwagen niet zelf.
- Vastgelegd op je eigen site — haal het winkelwagentotaal (of punten, bestellingen) van de pagina, uit een cookie of uit een URL-parameter. Personyze weet al welke bezoeker het is, dus de waarde komt direct op het profiel terecht, zonder dat er een sleutel nodig is.
- Geïmporteerd of gesynchroniseerd — binnengehaald uit een bestand, een feed of je CRM, en aan de bezoeker gekoppeld via een sleutel zoals het e-mailadres of de CRM-ID.
Volledige instructies voor het aanmaken en vullen van profielvelden staan in Gebruikersprofieldata instellen en synchroniseren in Personyze. Kies als type van het veld getal, zodat de balk kan rekenen.
Het doel instellen
Vul in de sectie Goal het Goal Amount in (bijvoorbeeld 100). De balk berekent het resterende bedrag en het percentage uit de huidige waarde ten opzichte van dit doel. Gebruik Show From om de balk te verbergen totdat de waarde een minimum bereikt (laat het op 0 staan om hem altijd te tonen). Het Completed Message wordt getoond zodra de waarde het doel bereikt of overschrijdt.
Instellingen
- Preset — dark, navy, brand, light of success.
- Bar Width — volle breedte, of ingesloten (een gecentreerde, afgeronde balk).
- Animate Fill — de balk animeert bij het laden naar zijn positie.
- Completion Effect — confetti, een vinkje, een gloeiende puls of niets, afgespeeld als het doel is bereikt.
- Message Before / After Amount — de tekst rond het getal; het deel “after” accepteert eenvoudige HTML, zodat je de beloning kunt opmaken.
- Show From — verberg de balk totdat de waarde dit minimum bereikt (0 = altijd tonen).
- Completed Message CSS — geef het succesbericht een eigen stijl; het centreert zich ook zodra het doel is bereikt.
- Close Button en de zichtbaarheid daarvan (altijd, of bij hover).
Feestelijke afronding
Als de waarde het doel bereikt, verbergt de balk de baan en het percentage, toont hij je afrondingsbericht en speelt hij het gekozen effect af. Een paar seconden valt er confetti over de balk, het vinkje springt in beeld, of de balk pulseert met een gloed. Het bericht centreert zich ook zodra de balk en het percentage verdwijnen, en je kunt het apart opmaken met Completed Message CSS.
Handige tips
- Test eerst met de Test Value om de tekst en kleuren te controleren, en kies daarna het live veld in Current Value Field.
- Stel het type van het profielveld in op getal — tekstwaarden kunnen niet met het doel worden vergeleken.
- Toont de balk altijd 0, dan is het profielveld nog niet gevuld — controleer of Current Value Field is ingesteld en of het veld voor de bezoeker echt een getal bevat (zie de twee links hierboven).
- Gebruik voor getrapte mijlpalen (Bronze / Silver / Platinum) in plaats daarvan de template Tiered Status Bar.
Verder lezen
- Balken voor gratis verzending & getrapte loyaliteit — inzetten op een hogere gemiddelde orderwaarde.
- Gamificationmarketing — de mechanismen achter interactieve templates en waar ze passen.
- Pop-uptemplates voor websites — alle 16 templates, en hoe je het juiste formaat kiest.