Personyze Wiki Personyze Wiki docs
Open Personyze
Popup & Bar Templates

Tiered Status Bar Template

The Tiered Status Bar shows a visitor how close they are to their next loyalty tier — Bronze, Silver, Platinum — using a live value from their Personyze…

Updated 7 hours ago 4 min read
A
by Admin

The Tiered Status Bar shows a visitor how close they are to their next loyalty tier — Bronze, Silver, Platinum — using a live value from their Personyze profile. It reads a number (points, spend, orders), shows the progress toward the next tier they haven’t reached yet, lights up the tiers they’ve already passed, and celebrates when they reach the top. It’s the multi-milestone version of the Free Shipping Status Bar. Placement is set in the action’s Location step.

Tiered Status Bar showing Bronze and Silver reached, with progress toward Platinum

When to use it

  • Loyalty tiers — show progress across Bronze / Silver / Platinum (or your own tier names) as points accumulate.
  • Spend milestones — unlock perks at several spend levels, not just one.
  • Gamified goals — any journey with more than one milestone a visitor climbs through.

Add it to an action

In a Popup action, choose Tiered Status Bar. Set the value to read, the three tier values and labels, and the message. The settings are grouped as Style, Value, Tiers, Message, and Close.

Setting the value it reads

This is the most important step. The bar needs a live number from the visitor’s profile.

  1. Open the Value section and use the Current Value Field dropdown to pick the profile field that holds the number — for example a points or lifetime-spend field. The bar reads that field’s live value at display time.
  2. Set a Test Value (a plain number) so the bar previews correctly in the editor, where the live field may be empty. To see the tier chips light up in the preview, set the Test Value at or above one of your tier values.
  3. Pick the Unit Prefix (currency symbol) and optional Unit Suffix (e.g. pts).

The Test Value is used only inside the editor. On the live site the bar reads the real profile value; an empty value counts as 0, so the bar shows from the start of the journey unless you raise Show From. For how these profile variables resolve, see Inserting CRM Variables (tags) for Dynamic Content.

Getting the value into the profile

The bar only reflects a value that already exists on the visitor’s profile, so that field has to be populated with up-to-date data — the widget displays and reacts to it, it doesn’t calculate points or spend itself.

  • Captured from your own site — scrape the value from the page, a cookie, or a URL parameter. Personyze already knows which visitor it is, so the value lands on their profile immediately, with no key required.
  • Imported or synced — brought in from a file, feed, or your CRM, matched to the visitor by a key such as email or CRM ID.

Full instructions for creating profile fields and populating them are in User Profile Data Setup and Synchronizing in Personyze. Choose the field’s type as number so the bar can do the math.

Setting the tiers

In the Tiers section, enter the three Tier Values and their Labels — for example 50 / Bronze, 150 / Silver, 300 / Platinum. The bar figures out which tier the visitor is heading toward next, fills the bar between the previous milestone and the next one, and lights up every tier they’ve already reached. Each tier chip can have its own color, icon, and image. Tier colors show once the tier is reached — if nothing lights up in the preview, raise the Test Value above a tier value. The All Tiers Reached Message is shown once the visitor passes the highest tier.

Settings

  • Preset — dark, navy, brand, light, or success.
  • Bar Width — full width, or contained (a centered, rounded bar).
  • Animate Fill — the bar animates to its position on load.
  • Completion Effect — confetti, a checkmark, a glow pulse, or none, played when the top tier is reached.
  • Show From — hide the bar until the value reaches this minimum (leave at 0 to always show).
  • Message Before / After Amount — the wording around the number, e.g. “You are $70 to the next tier.”
  • Completed Message CSS — style the success message independently; it also centers itself once all tiers are reached.
  • Close Button and its visibility (always, or on hover).

Tiered Status Bar in the brand preset

Completion celebration

When the visitor passes the highest tier, the bar hides the track and tier chips, shows your “all tiers reached” message, and plays the chosen effect — confetti falling across the bar, a checkmark pop, or a glow pulse. The message centers itself, and you can style it separately with Completed Message CSS.

Tiered Status Bar showing all tiers reached with a confetti celebration

Tips

  • Set the Test Value at or above a tier value to preview the tier chips lighting up.
  • Set the profile field’s type to number — text values can’t be compared to the tier thresholds.
  • Order the tier values low to high; the bar sorts them and always points at the next unreached one.
  • For a single goal (like free shipping), use the Free Shipping Status Bar instead.