HTML Banners in the Visual Builder

In Shaman, marketers can easily create compliant visual banners (static or animated) with a (scrollable) text overlay, eg for mandatory Important Safety Information (ISI). After approval, the banner can be exported as ready-to-use HTML, aligned with IAB banner guidelines. This package is used to publish the banner across ad networks, like Google Ads.

An html banner usually has the dimensions of a common banner type like sky scraper, leaderboard or rectangle.

The visual you create or select will represent those size dimensions. When you create a new banner and select the banner subtype, Shaman will propose the official sizes.

The text overlay will be placed on top of this visual. You can set the position. Usually it will be placed at the bottom or on the right side (landscape format).

Please note that this means the visual part of the visual is smaller than the full visual!
​

In the text overlay you can set:

To get started, open the Visual Builder, select the HTML Banner tab and click "New" like so:

A window will appear prompting you to enter the required details such as brand, name, and language. Once these are completed, you can continue in the Overview tab to finalise the visual component details. Next you can create and edit the visual (Design), manage the text and position of the overlay (Overlay) and start the MLR process (MLR). Once done, the banner is ready to be exported (Export) and published in an Ad network.

The creation and design of a html banner is similar to a visual. For a more detailed overview of creating a new visual component, setting the details in the Overview page, and designing the visuals in the Design stage, please refer to this article.

From the Design tab, you will be presented with a dropdown list of the different visual component types, ensure to select the type HTML Banner.

In the Start Designing dropdown, you can choose how you want to start:

If you wish to make the image elements of your HTML Banner animated, ensure to enable the toggle Animated before proceeding to the next step.

Good to know!

This means that existing visuals in Shaman, both static and animated, can be reused as HTML banner. You have 2 options to reuse:

The overlay is an HTML layer containing text, links, and images, managed directly in Shaman. Once created, an overlay is saved in a reusable library (brand-specific if selected), allowing teams to quickly apply it across multiple banners. This not only saves time but also ensures consistency and compliance.

In the Text overlay card, you can either create a new text overlay or select an existing one:

Create a new text overlay

When creating a new overlay, add:

Header section

This section is non-scrollable, it will stick at the top of the scrollable text. So make sure to keep the text short. You can use rich text editor options to add hyperlinks, change color, add superscript.

Body section

This section is scrollable, it will auto scroll and scrollable by viewer. You can add full ISI text (limit 5000 chars). You can use rich text editor options to add hyperlinks, add bullets, change color, add superscript. You can also add images (from the visual library) in line in the text. Once added, you can resize images in the text.

NB: Size limits (300kb or even 200kb) is a big challenge when creating banners. If you want to insert images, you should resize those images before uploading (or change file size in the Shaman image editor) and only use images as small as possible. Ideally, they are so small you don't need to resize them in the Body.

When you make changes to the overlay, you can immediately preview the results below in the Preview card.

Once done, you can save the Text overlay and reuse in other banners.

When you create the MLR document (PDF), the Text overlay will be added for review.

When the text is brand specific, you should restrict the use of the overlay for a specific brand by enabling the "Brand related" toggle. In that case, the Text Overlay will only appear in the list of Text Overlays when working on HTML banners of the same brand.

Good to know!

When you change a Text Overlay, these changes will apply for all banners where the Text overlay is used (see column 'Where Used' to find these banners). To apply this change, these other banners need to be re-exported.

Once the Text overlay is set, you return to the banner overlay. Below in the Configure Overlay section, you can set the following configurations:

From the Preview section, you can view your HTML banner exactly as it will appear once published. Any changes you make in the design or overlay configuration will be reflected here in real time, allowing you to check that the layout, text, and visuals appear as intended.