Progress bars guide

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!

Create a progress bar

Start in the Personalized content top menu tab, then build a new progress bar from the Overview to select a template or from the Progress bars section in the left menu. Then select the green New timer button to choose an available template.

The width and height of each progress bar is included in the top right of the template.

Your progress bar's default name is the template name but you can edit it to whatever you prefer by selecting the name on the top left.

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 Personalized content 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.

You can get the HTML and name your progress bar from your Personalized content library any time!

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.