Available Widgets:

1. Timeline Pause Points Widget: Pauses the animation at specified times.
2. Pause Button Widget: Pauses the animation at its current position.
3. Play/Jump Button Widget: Starts or jumps the animation to a defined position.
4. Play/Pause Toggle Widget: Toggles between playing and pausing the animation, similar to a YouTube video player.

1. Timeline Pause Points widget

This widget will pause the timeline on the specific time points.

Navigate to Add → Widget → Timeline Pause Points

Place the widget anywhere, even outside the canvas.

In the widget settings panel, define the times (in seconds) where the animation should pause (e.g., 5s, 11s, 18s).

The animation will pause at these specified times until the user clicks the Play button widget.

2. Pause Button widget

This widget pauses the animation at its current position on the timeline.

3. Play/Jump Button widget

This widget will start playing from the defined position (leave the Play from seconds input empty to play from the current timeline position).

In the settings, specify the time (in seconds) from which the animation should start or jump. Leave this input empty to play from the current timeline position.

Play/Pause Toggle widget

This widget functions as a play/pause toggle control, similar to those found in video players.

Creating an Interactive Banner Example:

Suppose you have a banner featuring three products, each appearing at different times:

1st Product: Appears at 5s

2nd Product: Appears at 11s

3rd Product: Appears at 18s

Add the Timeline Pause Points widget.

Set pause points at 5s, 11s, and 18s to halt the animation when each product appears.

Add the Play Button widget and customize it to match your design.You can adjust icon color, size, hover color, or upload your own play icon and select the transparent layout for the Play button widget.

Place each Play Button widget over the corresponding product image.

To keep things organized, we can make a separate folder for each Play button layers.

Tip: you can use Copy and Paste Animation and Position from the uploaded Play button to the Play Button widget (Right Click on the uploaded Play image layer > Copy). Right click on the Widget Play button layer > Paste position & size, Paste animations

Configure each Play button widget to jump to the respective product’s appearance time (e.g., 0.75s for the 1st product, 7s for the 2nd, and 13.25s for the 3rd).

Recap:

We have designed a banner with 3 products.

Each product has it’s own animation on the timeline:

1st product starts to play from 0.75s, appear animation ends at 5s

2nd product starts to play at 7s, appear animation ends at 11s

3rd product starts to play at 13.25s, appear animation ends at 18s

We have added the Timeline Pause Points widget to stop the animation at 5s, 11s and 18s

Then we have added 3 Play Button widgets that are always visible with the “Start animation from” set to 0.75s, 7s and 13.25s

When the creative will load it will start playing from 0s and will pause at 5s.

Now user can click on any Play Button widget and the animation will jump accordingly (for example click on 3rd product Play Button widget will jump to 13.25s and then will pause at 18s and so on…)

Here is the final result:

Presets – is a way to create Buttons, Text and Custom Effects, which you can later save in galleries for future re-use.

You are able to add a new Text/Button item on the Stage, apply desired options to it such as font, color, width, etc and save it in the Presets Gallery.

When a new Preset is saved, you can re-use for the current banner or any new banners within the same Project/Campaign, until you remove it at some point.

Steps to create a Text Preset:

1. Add a new Text item on the Stage and apply desired properties (colors, font, …).
2. Select this Text item  on the Stage. Scroll through the properties panel on the left all the way to the end. You’ll find the Save Style option. Click it in order to save a new Button Presets.

How to find existing presets (for Text items)

Click the Add Text button.

You will see the Presets tab within the gallery only if you’ve created presets before. From here, you can add a Preset item on the Stage by clicking on it. You’re also able to remove or rename an existing preset by hovering over a preset thumbnail and clicking the 3-dot icon to access the remove/rename menu.

Button preset

Add a Button on the Stage and apply the desired properties (colors, font, etc).

Button presets can be accessed by clicking the Add Button on the left. Same as with Text Preset, you can add, remove or rename a Button Preset.

You can also create and reuse the Custom Effect Presets.

For this, select an item on the Stage and access its Custom Effect properties from layer settings on Timeline.

Configure your custom effects by adjusting opacity, scale, easing, etc… Then click on Save Preset.

Create a name for your new preset.

By doing this, a newly added preset will appear in the Presets dropdown. You can then apply this to any banner in the current project. Just select it from the dropdown menu.

Remove a preset by selecting the preset from the dropdown and clicking on Remove Preset.

In order to enhance user engagement, BannerNow banners support Button elements meant for Call to Actions. These indicate a clickable element, prompting users to interact with your banner content.

Let’s build a clickable creative! First press Add > Button.

BannerNow provides a library of custom button styles. You can choose your preferred button design from a variety of options.

Now it’s time to personalize the button.

Double-click to edit the text inside the button. Properties panel is similar to text element, but it offers two shadow options: text shadow and button shadow.

Also, you can set the hyperlink for the button element. The hyperlink should be always and absolute URL with the “https://…” . If your creative will be connected to a feed, you will also be able to connect the hyperlink to the feed data.

To save a button style, simply go to Properties panel and click “Save as Preset“. When you add a button, you will have access to a gallery of pre-made designs as well as your own presets.