Progress bars

Progress bars are images served in your email at the time of opening, displaying live progress based on an individual customer's status or behavior. For example, you can drive brand loyalty by displaying how close a customer is to earning their next reward!

Progress bars are located in the Personalize section of the Litmus platform. From the Personalize tab, select Progress bars on the left side. Here, you can create a new progress bar and find any you've already created.

Create a progress bar

In the Progress bars section of the Personalize tab, select New progress bar in the upper right corner.

Select a progress bar design template from the options provided. The width and height of the progress bars are included in the top right side of each template.

Customize the progress bar using the colors for the background, base color, progress fill color, and text to match your email campaign. You can optionally select a transparent background for your progress bar. Here you can also set the minimum and maximum values to be displayed. In this example, the minimum value is 0 and the maximum is 100.

When you are ready, select Next: Preview your progress bar to check the colors and functionality using the Progress value option. Enter a number to test your dynamic values. These are placeholder values and won’t affect your code!

If your progress bar is set up and ready, select Next: Save and get HTML to generate your tag! You can copy the tag using the button below the text box, and your new progress bar will appear in the Progress bars section of the Personalize tab in your account.

Make sure to include your merge tags to this code in your ESP to ensure the subscriber's unique values and progress appear!

Add a progress bar to your email

To add a progress bar to your email, simply copy the HTML tag for your progress bar and replace MERGE_YOUR_VALUE with the relevant merge tag from your ESP. You can then add the completed tag directly to your email's code.

If you've set up your ESP merge tags in your account, you can quickly add those merge tags with the Insert>Merge tag functionality in Litmus Builder. You can then preview your personalization again using the Personalization tab in Builder.

You can also add the progress bar with Visual Editor in Litmus Builder using the image link from the HTML code rather than the entire tag. Copy the image link, add your merge tag, and use Visual Editor to replace a placeholder image with your progress bar.

Impression usage

A progress bar is a single image, so any time the image is loaded by one of your subscribers this will count as one impression.