Skip to main content

How to build a banner using the HTML Banner Editor

Blair Matheson
  • Updated

For teams experienced in writing HTML and CSS, Opti-X offers a flexible editor that allows you to build banners for your marketing campaigns using your own code. This approach gives you complete control over the design and functionality of your Smart Banner.

Step-by-Step Guide

  1. Create your Placement. Follow the usual steps for building a new Placement, which you can learn more about here.
    placement.png
  2. Open a New Banner. Click “Create” on the HTML Banner option in the Widget Library.
    widget_lib.png
  3. Add a Banner Name. Provide a unique name that will help you find and manage your Banner later.
  4. Select the Pre-Created Placement. Choose the Placement you created in Step 1.
  5. Define Banner Dimensions. Set the width and height to suit the intended location—whether it’s a display ad or an email template.
    banner_details.png
  6. Add HTML and CSS Configuration.

    HTML: On the HTML tab, build the structure of your design. To include data from your Data Connection or Placement, insert tokens in the following format:

    {recommendation.result[INDEX].SELECTION.DATA}

    For example:

    • Gaming: {recommendation.result[0].game.name}
    • Sport: {recommendation.result[0].selection.eventName}
    • Ecommerce: {recommendation.result[0].product.name}

    Please Note: The available data and naming conventions will depend on your vertical and the data in your inventory files.

    CSS: On the CSS tab, enter the styles that will bring your HTML design to life.

    After adding your HTML and CSS, you can view the Default Sample and Preview your Banner.


    html_csss.gif

Previewing

On the right-side panel, you can preview your design by clicking the “preview” button. This renders a banner recommendation for a random customer so you can see how your tokens populate the design.

Important Notes

  • The output from an HTML Editor–built banner is a single flattened image.
  • This type of banner does not currently support wrapping with a dynamic CTA link.

Related articles