When building a Banner with Personalize, you have two options.
- The Visual Editor
- The HTML Editor
To begin creating a Banner using the Visual Editor, navigate to the Widget Library and click “Create” in the Banner Widget. Find out more about this method of creating a Smart Banner.
To begin creating a Banner using the HTML Editor, navigate to the Widget Library and click “Create” in the HTML Banner Widget. Find out more about this method of creating a Smart Banner.
Once created, you can then learn how and where you can use your Smart Banners.
Banner Overview - How to Build a Smart Banner
When building a Banner with Personalize, you have several options:
- Use a visual editor or an HTML editor for creation.
- Create a banner in either .png or .html format. Banner replication toggle activates HTML format:
If you opt for the .png format, your banner will be rendered solely as an image, regardless of whether it contains multiple product recommendations.
However, selecting the .html format allows you to incorporate multiple product recommendations with individual clickability for each item.
| Visual Editor | HTML Editor | |
|---|---|---|
| Image output version (.png) | Yes | Yes |
| HTML output version (.html) | Yes | No |
To begin creating a Banner, navigate to the Widget Library.
|| Ensure that your placement is configured beforehand. The placement serves as the banner's core and determines your product recommendations. Alternatively, you can use any existing placement. If there are multiple Target Group configurations within the placement, the banner takes the configuration associated with the first Target Group.
HTML Banners in Email: Rendering in Dark Mode Limitations
HTML banners inherit rendering behavior from the email client (Gmail, Apple Mail, Outlook, etc.).
Because email clients handle light/dark mode differently, banner appearance may vary across devices and apps. This is expected behavior and not controlled by Optimove Personalize. Transparent backgrounds may inherit client-level colors, which can affect text contrast.
Best practices to reduce issues
- Define an explicit background color
- Avoid fully transparent backgrounds
- Use dark-mode safe color combinations
How to Use Your Banners
Once you have created your Smart Banner—using either the Visual or HTML Editor—you can deploy it in several ways to showcase your content recommendations:
- Add Smart Banners to Email Visual Editor templates
- Add Smart Banners to your HTML Email template or in other ESPs
- Use Smart Banners in Digital Ads. Banners can be a key component in your Display Ad campaigns across various third-party platforms.