Skip to content
English
  • There are no suggestions because the search field is empty.

Loyalty Widget Templates

Building a loyalty program experience doesn't require custom development. Ambassador's Loyalty Widgets give you five ready-to-configure components — badges, tiers, tasks, a progress bar, and a steps guide — that you can mix, match, and style to create a branded loyalty experience directly within the widget editor. 🏅

Where to Find Them

All loyalty widgets are configured through the widget editor in Pages & Widgets > Widgets in your Ambassador admin. Add them to your program pages alongside other widgets like sharing widgets and rewards widgets.

The Five Loyalty Widgets

Loyalty Badges Widget

Showcases achievement badges that ambassadors can earn by completing specific actions or milestones. Supports carousel, grid, and vertical list layouts. An optional badge count (e.g., "6 / 15") shows ambassadors how many they've earned and how many remain — a strong motivational tool.

Loyalty Tiers Widget

Displays your program's tier levels with images, descriptions, point thresholds, and a benefits checklist. Best for programs with Silver/Gold/Platinum-style levels. Each tier card automatically renders the tier's configured benefits with checkmark icons.

Loyalty Tasks Widget

Shows actionable tasks ambassadors can complete to earn points or rewards, with completion status tracking. Each task card displays the task icon, name, reward info, and whether the ambassador has already completed it. Supports an optional Signup Link for non-logged-in visitors to convert them to members.

Loyalty Progress Bar Widget

Shows the ambassador's current tier, progress toward the next tier, and a motivational message (e.g., "Earn 192 points to unlock VIP"). Supports Points, Revenue, and Purchase Count metrics. When not logged in, the widget shows a blurred placeholder with sample data rather than hiding — preserving page layout and encouraging sign-in.

Loyalty Steps Widget

A static, fully configurable step-by-step guide — like a "How to earn rewards" or "How to join the program" walkthrough. Supports 1–10 steps. Step numbers can be replaced with letters or icons. This widget does not pull any live data; all content is configured directly in the editor.

Layout Options

Most loyalty widgets support three layout options:

Layout Best for
Carousel Programs with many items; horizontal scroll with navigation arrows
Grid When all items should be visible at once; responsive multi-column
Vertical List Detailed descriptions; single column with icon on left

How to Configure Each Widget

Badges Widget

  1. Go to the widget editor and open the page where you want to add the Badges widget.
  2. Choose your layout: Carousel (default), Grid, or Vertical List.
  3. Choose a card style: Default (image + title + description) or Image (badge image only — best when images are self-explanatory).
  4. Set the card size (80px–250px).
  5. Optionally toggle on the badge count display.
  6. Click Edit Badges to select which badges appear in the widget.
  7. Style using the editor's CSS tools.

Tiers Widget

  1. Go to the widget editor and open the target page.
  2. Choose your layout: Carousel (fixed 280px cards), Grid (max 320px), or Vertical List (max 600px, centered).
  3. Click Edit Tiers to select which tiers to display.
  4. Each tier card automatically shows: image, name, description, points threshold, and benefits checklist.
  5. Style using the editor's CSS tools.

Tasks Widget

  1. Go to the widget editor and open the target page.
  2. Choose your layout: Carousel (default), Grid, or Vertical List.
  3. Optionally configure a Signup Link URL and Signup Text for non-logged-in visitors.
  4. Click Edit Tasks to select which tasks to display.
  5. Style using the editor's CSS tools.

Progress Bar Widget

  1. Go to the widget editor and open the target page.
  2. Edit the text labels for current tier, next tier, points earned, points remaining, and congratulations message.
  3. The metric type (Points, Revenue, or Purchase Count) is determined by your loyalty program configuration — it cannot be changed in the widget editor itself.
  4. Style using the editor's CSS tools.

Steps Widget

  1. Go to the widget editor and open the target page.
  2. Set the number of steps (1–10, default 3).
  3. Click each step to edit the step number/icon, title, and description.
  4. Style using the editor's CSS tools.

Good to Know

  • If badges, tiers, or tasks appear missing in a widget, check that the items were selected via the Edit Badges / Edit Tiers / Edit Tasks button — that selector controls what's visible.
  • The Progress Bar metric type is inherited from the loyalty program setup, not the widget. To change from Points to Revenue, that's a program configuration change.
  • The Steps widget is static content only — it does not pull any live data. Direct advocates to the Tasks widget if they need to see actual task completion.
  • Tiers (program level) and Badges (individual achievements) are two separate systems with separate widgets — don't confuse them.
  • All widgets are responsive — always preview at multiple container widths before going live.
  • Related articles: Loyalty & Advocacy Overview, Rewards Widgets, Pages & Widgets Overview