Please note:
To unlock this capability, you will need to add DynamicMail to your Optimove package. If you can’t see this feature in your Optimove instance, contact your CSM to find out more.
The progress bar component gives you the ability to include a personalized bar or donut chart within your email campaigns. Using this component, you can add a level of gamification to your emails by showing subscribers how close/far they are from achieving a milestone.
Set up progress bars with gradients (think from red to green), with loading bars, or with a semi-circle visualization.
Use the creator UI to:
- Set the "Bar Value Personalization Tag"
- This is used to determine the percentage value for each subscriber
- It could be something like VIP points, number of spins played, dollars to spend until the next VIP level
- The formatting/syntax for the tag is determined by your ESP. For example, in OptiMail you might have a tag like [%TAG_VALUE%]
- Set the "Bar Scale Maximum"
- By default, this is 100 to create a progress bar out of 100%. If you require the maximum value to be higher than 100, you may change this value and the progress bar will calculate the percentage of progress. For example, if you set it to 2,000 and a user has a value of 1,000 then the progress bar would display 50%.
- Set the component's click-through URL
- This is where the customer will be directed to after clicking on the progress bar
- All DynamicMail components are supporting standard http and https URLs. For example, http://www.google.com is a supported URL format. They are also supporting a few deep link URL types for top apps. The validation supports the following app deep links:
- fb://
- instagram://
- snapchat://
- pinterest://
- twitter://
- linkedin://
- vnd.youtube://
- If you have an application that you would like to have supported, please reach out to our team for assistance
- Alternate Text
- In the case that a subscriber has images turned off or uses a screen reader, this text would be displayed in place of the content
- Responsive Settings
- Fixed - If you would like the component to remain at a fixed size regardless of the screen size it is viewed on, select this option
- Fluid - If you would like the component to adjust its size depending on the size of the screen it is viewed on, select this option
- Component Alignment
- Optionally, select how you would like the component to align itself within your template
- Tracking Parameters
- For components needing dynamic tracking parameters (using an ESP-specific merge tag/personalization string) that are populated at the time of email send use the "Tracking Parameters" field. The Creator appends these additional tracking parameters to the Click-through URL and will pass them through to the destination URL. The tracking should follow a "key=value" format, where "key" is the name of the parameter and "value" is value of the parameter. The value parameter usually contains the merge tag. Multiple key/value pairs should be strung together with the "&" character. For example promo=${LinkDescription}&email=${EmailDescription}
- Configure the progress bars design
- Bar Type - Line or Circle
- Bar Stroke
- Control how thick the bar will be
- Bar Ends (only relevant to the line type)
- Set the ends of the bars to be either square or rounded to customize your design
- Circle Size (only relevant to the circle type)
- Control the size of the circle progress bar
- Note that the circle must be smaller than the component width and height
- Bar Color
- Set the color of the progress bar
- This can be done by selecting a color using the picker or by entering a HEX code
- Bar Background Color
- Set the background color of the progress bar track
- This can be done by selecting a color using the picker or by entering a HEX code
- Component Width and Height
- Set the width and height of the canvas - the full size of the component including empty spaces around the progress bar and optional percentage text
- Component Background
- Set the color of the canvas - the space around the progress bar and behind the optional percentage text
- This can be done by selecting a color using the picker or by entering a HEX code
- Text Appearance and Settings
- Show/hide the text
- Font Family
- Font size
- Text Color
- Text Placement - set where in retaliation to the progress bar you want the text to appear
- Text Alignment - set the alignment of the text so it can be left, right, or center aligned to the bar
The content in the preview section will update when you click on the "Update Preview" button.
Click "Generate Code" to generate the embed code for your component.
Embed Code
Click "Copy to clipboard" to take the generated code and insert it into your HTML email template.
Send Email Test
You can enter your email address to send yourself an email with the component and check its appearance in your own inbox.
Recommendations
-
We recommend a maximum image size of 350x200 pixels to minimize image weight in the email.
-
For best results, ensure the data file the personalized text is being pulled from is accurate and complete. If the file is corrupt or incomplete, the data in the email will be as well.