Progress Bars

Progress Bars Overview

You can add progress bars to your personalizations and tests to visually show customers their progress toward rewards, such as discounts or free shipping. This update introduces richer text editing options, enhanced customization features, and greater flexibility for styling and integrations.

---

Key Features

• Rich Text Editor for Reward Messages You can now use a rich text editor to customize reward messages, including Cart Text: Amount Remaining Text and Cart Text: Amount Reached Text. This allows for greater control over formatting and style when creating tests or personalizations.

  
• Icon Support for Breakpoints Icons for breakpoints are editable during test creation. This ensures a streamlined process when setting up visual indicators for rewards.

• Three New Progress Bar Styles Choose from three additional progress bar styles to better match your brand and goals.

  
• Enhanced Styling Options Customize:

  • Colors (active, inactive, background, etc.)

    
  • Sizing for Bar Styles (thickness, corner radius) and Breakpoint Styles.

    
• Dynamic Updates to Linked Tests and Personalizations Any changes made to a progress bar will push to all tests and personalizations using that progress bar, ensuring consistency across your campaigns.

  

---

Example Use Cases

Here are some scenarios where progress bars can drive customer engagement and enhance their experience:

1. Free Shipping Thresholds Display a progress bar to show customers how much more they need to spend to unlock free shipping. For example:

   • Cart Text: Amount Remaining Text: "Spend $10 more to get free shipping!"

   • Cart Text: Amount Reached Text: "You've unlocked free shipping!"

2. Volume Discounts Encourage larger purchases by showing customers how many additional items they need to buy to receive a discount. For example:

   • Breakpoint Icons: Use a checkmark to indicate when a discount has been unlocked.

   • Cart Text: Amount Remaining Text: "Buy 2 more items to unlock 15% off!"

3. Gift with Purchase (GWP) Show customers their progress toward earning a free gift when they meet a certain spend threshold. For example:

   • Cart Text: Amount Remaining Text: "Spend $20 more to get a free tote bag!"

   • Rich Text Editor: Highlight the gift details with bold text for additional emphasis.

4. Promotion Personalizations Offer personalized discounts based on spending habits or loyalty. For example:

   • Create a personalized progress bar for a VIP segment offering a 20% discount after a $100 purchase.

   • Use Breakpoint Styles to visually emphasize higher-tier rewards.

5. Seasonal Sales Campaigns Add progress bars to encourage customers to unlock rewards during seasonal promotions (e.g., Black Friday, Holiday Sales). For example:

   • Use festive icons like snowflakes or gift boxes for breakpoints.

   • Style the progress bar to match your seasonal branding.

---

How It Works

1. Create a Progress Bar Widget In Offer Widgets, click “Create Progress Bar” and configure its general and styling settings.

   
2. Customize Styling Use the Desktop and Mobile tabs to adjust styles for each platform:

   • Customize Bar Styles (colors, thickness, corner radius, and sizes).

   • Adjust Breakpoint Styles, including colors and sizes for each reward threshold.

     
3. Add to Tests or Personalizations Once the widget is created, assign it to:

   • Volume Discount Personalizations

   • Promotion Personalizations

   • GWP (Gift with Purchase) Personalizations

   • Shipping Tests (only for Free Shipping progress bars).

     
4. Input Progress Bar Text After assigning the progress bar widget to a test, input the progress bar text:

   • Cart Text: Amount Remaining Text: This shows what the customer needs to do to unlock the next reward.

   • Cart Text: Amount Reached Text: This confirms the reward they’ve unlocked. Both fields can be styled using the new rich text editor.

     
5. Toggle Breakpoint Text and Icons During test creation, you can toggle on or off the Breakpoint Text and Breakpoint Icon for each threshold. This gives you more control over what visual and textual elements appear on the progress bar.

1. Preview and Save Use the dynamic preview to see how the progress bar looks on desktop and mobile. Save your changes when satisfied.

If you have an existing progress bar created before this update, it will remain functional and retain its original style options. However, some style settings may be limited as legacy options are gradually phased out. We recommend updating to the new progress bar framework to take advantage of the latest customization features and ensure future compatibility​.

The Interface Style Preview will not show the user's custom font styles; it defaults to the Intelligems app's font. To see how the progress bar will look with your actual font styles, use the Preview Tab during test creation.

---

What’s New

Features

• Rich Text Editor: Format reward messages with bold text, hyperlinks, and more.

• New Progress Bar Styles: Three additional styles for added variety and branding.

• Breakpoint Icons: Icons are editable only during test creation for clearer progress visualization.

• Enhanced Customization: Adjust breakpoint and bar sizing for a more tailored experience.

• Dynamic Updates: Changes made to a progress bar will push to all linked tests and personalizations.

Tips

• Use the Duplicate/Copy Styles feature to save time when styling desktop and mobile progress bars.

• Plan ahead for breakpoint icons since they are only editable during test creation.

• If a progress bar is already in use, changes to the progress bar will push to all tests and personalizations using it.

---

Troubleshooting

• If the preview isn’t displaying updates, save your changes and refresh the editor.

• Ensure breakpoint and bar sizes align with your design standards for consistent results.