How to Build a Smart Banner Using the Visual Banner Editor

To start building your Smart Banners using the built-in Visual Editor, navigate to the “Smart Content Widget Library” and select the “Banner” widget. This editor allows you to simply drag and drop components onto a WYSIWYG canvas. If your team is already working with Optimail, this will be a familiar editing experience.

1. Create your Placement. Follow the usual steps for building a new Placement, which you can learn more about here.
   
2. Open a new Banner. Click “Create” on the Banner option in the Widget Library to open a new Banner.
   

Banner Settings

Before designing your banner, configure the following settings.

Banner Name

This should be a unique, identifiable name for each Banner you create. This name:

• Appears in your Widget Manager (so you can easily find it later).
• Appears in the Optimail Banner Selection component, when you place a Banner within email templates.
• Should be descriptive and memorable.

Tip: It’s best to name your Banner as soon as you create it, so you don’t forget.

Data Type and Data Source / Placement

The power of Banners comes from the ability to create recommendation content blocks in other campaigns. To create a dynamic content block that pulls content from a recommendation model, connect each Banner to a pre-defined Placement. For more details on creating Placements, see here.

CTA URL

To drive engagement, you can include a Click-Through URL. This will wrap your Banner content in a clickable link. The CTA URL can be:

• A fixed URL (e.g. https://www.optimove.com/product_123).
• A merge tag (e.g. {product_url}).
• A combination of fixed text and merge tags (e.g. https://www.optimove.com/{product_id}).

Banner Replication

You can choose whether your Banner is a single graphic or a grid of recommended items.

Replication Off (Default)

• When off, you can still include multiple product recommendations, but the output will be a single flattened PNG image.
• Because it’s flattened, only one CTA URL can be used (everything is grouped together).

Replication On

• If you want a grid of recommended items (each with its own link), toggle “Banner Replication” on.
• Select how many rows and columns of items you’d like (e.g. 2x2 for four products).
• Anything you place on the canvas will be repeated for each item in the grid. For example, in a 2x2 grid, you design one block, and that layout repeats in the other three blocks.

Width and Height (px)

Define how wide and tall your Banner should be. If you enable Banner Replication, the total width and height are divided by the number of rows and columns you set.

For example, if you’re placing a Banner in an email template or designing a display ad, choose dimensions that match your intended location.

Using the Editor

Once you have selected a Data Type and Data Source for your Banner, the WYSIWYG editor will load. You can use the built-in components (listed below) to design your Banner. Simply drag and drop components onto the canvas.

If you want columns, for example an image beside text, select a row layout and drag it onto the canvas. Then drag individual content blocks (e.g. Image, Paragraph) into that row.

1. Add a Banner Name (from above) to help you find your Banner later.
2. Select the Placement you created in Step 1 (or select “Data Connection” if you’re using uploaded data).
3. Define Banner Dimensions to suit the intended location (e.g. recommended display ad sizes or your email template dimensions).
4. Drag and drop components you’d like to add to your Banner, including dynamically populated Banner Images. See the breakdown of each component below.
   

Merge Tags

If your Banner is connected to a “Placement,” the editor provides merge tags so you can include dynamic data (e.g. Product Name or Event Name). Insert a text content block onto the template, click the “Merge Tags” button, and choose from the available fields for that Placement.

You can also use additional product metadata from the “Extra” inventory field to enrich your banners. This data is optional and may be included when sending your inventory to Optimove. It is not used for personalisation, but it can help you add more context and detail to your Banners.

Previewing

While building your Banner, click the “Preview” button above the editor to see a live preview using a random customer’s data. This helps verify that recommendations are populating correctly.

Overview of Available Banner Components

Below are the main components you can drag and drop onto your Banner in the editor:

1. Title: When designing a Banner, you may want headings to establish a content hierarchy. Use the Title content block to add a heading (H1/H2/H3), then edit properties like Font Family, Font Size, Line Height, Alignment, etc.
2. Paragraph: This block is a quick way to add text to your Banner. Click the block to edit its properties (Font Family, Font Size, Text/Link Color, Alignment, etc.).
3. List: Add bulleted or numbered lists to your Banner. You can configure the list type, bullet design, “Start list from” (for numbered lists), and more.
4. Image: This block lets you add static images. After dragging it onto the canvas, click Browse to select/upload an image or search for free images online.
5. Divider: Easily add line separators to your Banner. Edit properties like Transparency, Width, Line Type, and Color.
6. Spacer: Add white space or breaks in your Banner content. You can edit the Spacer height, and it will match your template’s background color.
7. Icons: Add icons to your Banner. Click the content block to choose from a collection of icons, and edit properties like Visual Effects, URLs, Alt Text, and more.
8. Text: Another quick way to add text. After dragging the block onto the canvas, click it to edit properties like Text/Link Color, Line Height, and Spacing.
9. Banner Image: A dynamic image that populates based on the content recommendation for the Banner. The image displayed will always match the recommendation given.