Loyalty and Rewards campaigns are a powerful way to celebrate your customers’ achievements and keep them engaged. By using Dynamic Widgets, you can showcase each customer’s loyalty status, progress toward their next reward, and personalized visuals that make every email feel unique and motivating.
What You’ll Learn
In this guide, you’ll learn how to:
Add personalized images that display individual customer details or loyalty tiers.
Include progress bars to visualize how close each customer is to their next goal or reward.
Before you begin
-
Prerequisites
Access to Email by Optimove
Access to Dynamic Widgets from Optimove
-
Required information
Email template design that you want to use for this use case
Setup Process
Step 1: Prepare the email template
To get started, head over to Email by Optimove in your Optimove instance.
Build your email template as you would normally by pulling in text and graphics onto the email template builder.
Leave spaces for where you would like to include the Personalized Image and Progress Bar components.
Make sure to include headers around these components for clarity.
Step 2: Create and Add the Personalized Image component
Within your template, drag the “DynamicMail” content block into your template where you want the personalized image to appear.
Click the “Start DynamicMail” button.
Select “Personalized Image” from the available components.
Give your Personalized Image a unique and descriptive name (e.g., “Personalized Loyalty Card”).
Choose your Background Image — either upload a new image or select one from previously uploaded content.
-
Configure your personalization settings:
-
Personalization Tag: Enter a relevant personalization tag (e.g.,
[%FIRST_NAME%]) to make the image unique to each customer.This must match exactly as it appears in your Optimove Personalization Tags.
Default Text: Define fallback text for when no value is returned from the personalization tag.
Text Overflow: Control how long text behaves (hide, cut off, or end with an ellipsis).
Text Placement: Drag and size the text box to determine where and how much space the tag text should occupy.
Text Styling: Adjust font color, font family, size, and alignment.
Additional Text: Add up to five personalization tags per image, configuring placement and style for each.
-
-
(Optional) Add a Click-Through URL to link the personalized image to a landing page.
You can also include tracking parameters such as template IDs, campaign identifiers, or customer identifiers by entering them in the “Tracking Parameters” field.
Responsive Settings: Set the image to “Responsive” for optimal display across desktop and mobile.
When you’ve completed the setup, click Update Preview to see your changes in the right-hand preview panel.
Once satisfied, click Generate Code, then Insert in Email Template to place the image.
For more details, see the full article on Personalized Image.
Step 3: Create and Add the Progress Bar component
Within your template, drag the “DynamicMail” content block into your template where you want the progress bar to appear.
Click the “Start DynamicMail” button.
Select “Progress Bar” from the available components.
Give your Progress Bar component a unique and descriptive name (e.g., “Loyalty Progress Bar”).
-
Configure your settings:
Bar Value Personalization Tag: Enter a numeric personalization tag that indicates customer progress toward a goal.
Bar Scale Maximum: Define the maximum goal value (e.g., “100” for $100 spend).
-
Click-Through URL: Add a link customers can visit when clicking the progress bar.
Optionally include tracking parameters like template IDs or campaign identifiers.
Responsive Settings: Enable “Responsive” mode for optimal rendering across devices.
When setup is complete, click the “Update Preview” button to review changes in the preview panel.
If satisfied, click Generate Code, then Insert in Email Template to place your progress bar.
For more details, see the full article on Progress Bar.
Testing and Previewing
Before deploying your campaign, use the built-in tools in Optimail to preview your template as different customers. Use the instant preview option to see how your email will render across multiple inboxes, or send yourself a test email to see it live in your inbox.
Related Articles: