The Tools Panel contains tools for creating, editing stay effects and save presets.

Select the effect type.

Loop duration refers to the time of one transition (in seconds).

Repeat refers to how many times the transition needs to be repeated (for unlimited looping set it at -1).

Delay between transitions.

Each “stay” effect type has it’s own custom settings that can be also adjusted.

Bannernow includes a few standard/public Widgets that are ready to use within your banners. If you’re looking to create a new Widget, this is very simple:

Create a new Widget by switching to the WIDGETS Tab in the dashboard header. Then, select ADD A NEW WIDGET.

The Create New widget modal will show up. You will need to insert your custom HTML, CSS and JavaScript, as well add Dynamic Settings (if any), and metadata such as Widget name and Thumbnail.

Once the Widget is created, it will be visible in the Add Widget gallery in the Bannernow Editor. From this point, you can then add it on stage, change its properties (Dynamic Settings that were specified during Widget creation), and use as a normal item.

Dynamic Settings

Think of Dynamic Settings as a sort of variables used in the JS code of your widget. These variables will be available in the editor, therefore, you can customize certain properties of a widget.

Example: Imagine you’re creating a widget in which you need to be able to customize the background color. You will then add a Color setting, assign a unique name to it, and finally a label. After this, it can be customized from an editor.

Once a Widget is created, it can be used straight from the editor. To do this, select Add Widget, and select the widget you need. Once added on stage, you can customize its dynamic settings from the left-side panel.

JavaScript API

The Widgets API is an interface that enables interaction between a Widget and other parts of a Banner. 

All Widgets are loaded in a separate IFrame. Once the widget is loaded in the API library it becomes globally accessible (in the JavaScript code of your widget) from the window. 

BannernowLib. BannernowLib comes with several event processing hooks as well as a few helper functions.

Every widget has a 3 steps lifecycle: Init, Start, Stop

• Init – stands for Initialize – essentially, during this stage, a Widget is being set up/created. Normally, during this stage, the widget will read dynamic settings (that are coming in as config from Editor).
• Start – This function is triggered each time the widget restarts (new loop).
• Stop – This function is triggered each time the widget finishes (end of the loop).

In order to plug into these 3 lifecycles you will need to create 3 custom event listeners: 

window.BannernowLib.addEventListener(window.BannernowLib.Events.INIT, init);
window.BannernowLib.addEventListener(window.BannernowLib.Events.START, start);
window.BannernowLib.addEventListener(window.BannernowLib.Events.STOP, stop);

Once all three event handlers are set up, the widget will call the appropriate function at the right time of the life cycle.

Init will be triggered when the widget has finished loading its resources and is ready to be initialized:

function init(id, cfg) {
	var propMap = window.BannernowLib.helper.configMap(cfg),
	
	//where settingName is the name of dynamic property
	settingValue = propMap.settingName;
	
	var widgetId = id;
	
	//Init widget here
}

Init will receive two parameters: widget Id (id), and Config Object (cfg):

• cfg – contains all the values from the Dynamic Settings. In order to use it, we recommend you convert it first into a key-value map by using window.BannernowLib.helper.configMap(cfg) key – matches name of dynamic settings and value represents the value of the dynamic setting.
• id – represents the widget’s unique ID. Save/cache it into a global variable so that it can be used later in widget code.

The Start function is triggered each time the banner animation starts playing (including each loop iteration).

function start() {
	myObject.startMyCustomAnimation();
}

The Stop function is triggered each time the banner’s animation finishes an iteration loop (animations for all individual items are completed).

function stop() {
	myObject.stopMyCustomAnimation();
}

Custom Widget Complete Handler

Every Widget is supposed to notify the parent Banner once it has finished loading and initializing. In many cases, you won’t need to think about this as it is done automatically right after the Init function is executed. However, in some cases, you will need to explicitly handle this. For instance, you will need to do this when performing operations such as image loading. In this case, your Widget will have to hold for the images to load prior to start. It needs to notify the parent banner only when it’s done fetching all the images.

In order to do this, you first need to add the INITIALIZED event handler:

window.BannernowLib.addEventListener(window.BannernowLib.Events.INITIALIZED, initializeComplete);

When the Widget includes the INITIALIZED handler it will hold for an explicit notification of initialization completion. In order to notify this Initialization completion, use the following API call:

window.BannernowLib.initialized();

Here’s an example of initializeComplete code:

function initializeComplete(e) {
    var data = {
        cmd: window.BannernowLib.Events.INIT_COMPLETE
    };
    window.BannernowLib.broadcast(data);
}

window.BannernowLib.broadcast – sends a notification to a parent banner. data object should have
cmd: window.BannernowLib.Events.INIT_COMPLETE command

Feed

In order to receive a Feed from a parent banner, add an event handler. This handles will be invoked each time a new feed is received from the server.

window.BannernowLib.addEventListener(window.BannernowLib.Events.FEED, feedReceived);
function feedReceived(data) { 
    console.log(data.feed); 
    console.log(data.update_interval); 
}

Custom Click Handler

If looking to stop a default behavior such as the CLICK event (for example, only looking to execute custom logic) then you will need to set an Option that allows you to ignore default click behavior:

window.BannernowLib.addOption(window.BannernowLib.Options.IGNORE_PARENT_CLICK, true);

Pre-Ad Widget

Pre-Ad Widget – is a special type of widget that runs prior to your banner being displayed. A typical use case for a Pre-Ad Widget is to showcase specific details, such as legal age restriction, for instance, prior to serving the banner. To create a Pre-Ad Widget, start by marking your widget as Pre-Ad Widget within the Global Settings section of Widget Creation modal.

Use:

window.BannernowLib.Events.INITIALIZED handler to ensure that all resources (like images) of a widget are loaded.

After this, create an InitComplete function, you would invoke this to notify the Pre-Ad Widget that it’s ready. As well as pass on specific additional data for it (such as duration, whether it should appear on each loop iteration, etc)

window.BannernowLib.addEventListener(window.BannernowLib.Events.INITIALIZED, initComplete);

function initComplete() {
	var data = { 
		cmd: window.BannernowLib.Events.INIT_COMPLETE,
		opts: { // default locale: en
			loop: legalData.loop,
			duration: legalData.duration, //duration of pre-ad
			disappear_duration: legalData.disappear_duration
		}
	};

	// …
	window.BannernowLib.broadcast(data);
}

Once all elements are initialized and loaded, invoke initialization complete by using:

window.BannernowLib.initialized();

Helper Methods 

window.BannernowLib.helper.getConfig() - returns global Banner Config - an Array of all items (text, image, rect, widget, button, video) and a stage.

[
{type: "scene", bgColor:"#555555", border:false, feedUrl: "https://....", height: 300, width: 400, ...},
{type: "text", value: "text value", top: 20, left: 40, ...},
{type: "widget", id: "...", controls: [{…}, {…}], src: "https://...", thumbSrc: "https://...", wname: "...", ...}
]

window.BannernowLib.helper.configMap(cfg) - convert array of custom configs into a Map of custom setting name to its value

window.BannernowLib.helper.setGlobalUrl(url, target); - sets the main banner global hyperlink. (call it after widget initialization)

window.BannernowLib.helper.getGlobalUrl(); - returns the main banner global hyperlink. (call it after widget initialization)

window.BannernowLib.helper.setText(itemId, text); - update text or button item label by id

window.BannernowLib.helper.openUrl(url, target, event); - calls window.open in main banner. All tracking variables will be automatically added to the url. event - mouse event object (needed to track x,y mouse position for click heatmap).

document.getElementById('btn1').addEventListener("click", myFunction);

function myFunction(event) {
  window.BannernowLib.helper.openUrl('https://bannernow.com', '_blank', event);
}

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 this quick tutorial, we’ll cover the basics of uploading and using custom fonts in BannerNow. Custom fonts are a great way to personalize your designs and give them a unique touch.

Note: Bannernow supports multi-lingual custom fonts (Latin, Asian, etc…).

To upload a font, first, click on Library and then on the Fonts tab. Below, you will see a list of your previously uploaded fonts. Next, click the Add Font button. To upload, simply name your font and select a .ttf or .otf file from your computer. It will appear automatically in your custom font list.

Now, let’s go back to the Banner page and open the editor. Select any text element. Open font selection drop down and you’ll see the font we’ve just uploaded.

Great news! When you export your creatives as HTML5, BannerNow will automatically subset your font to optimize the final size of your creative.

On the bottom of the screen, there is a Timeline area with the following:

• Left-side menu: Layers
• Right-side menu: Transitions.

The corresponding layer and transition of the selected element are highlighted in the Timeline.

Custom Effect – A way to customize your animation if you are unable to find the desired behavior from default transitions. Custom effects can be applied only to appear and disappear effects:

Custom effects can be set up from the Custom Modal, which can be accessed by selecting the appear or disappear section in the transition slider and selecting the Custom option.

The Custom Modal includes a small preview window above the modal ( this allows you to view how your custom animation will look – it’s an approximate preview).  The four sections (1-4) represent Look Options – opacity, scale & rotation; Scene & Rotation point options – this point will be used as a pivot when animation an element; Positioning options – position type and position coordinates; Animation Style Animation Easing and Duration. 

Position type defines whether custom animation will use absolute positions/coordinates, offset positions or a pre-defined set of positions.

Animation easing specifies the speed curve of an animation.

You can also save the custom effect as a preset and reuse it in different banners.

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.