Table of Contents

Microsoft Entra ID (ex Azure Active Directory) can serve as the identity provider to provide single-sign-on (SSO) user login to Bannernow.

Bannernow supports SSO via SAML, a standard in wide use by enterprises and companies to provide authentication services to products that otherwise require separate accounts and logins.

Setting up Microsoft Entra ID to use SSO for Bannernow takes about 10 minutes. There are two main steps involving the Azure and Bannernow web interfaces.

Set Up the Identity Provider “IdP” Side (Microsoft Entra ID)

As an admin, log into your Azure Portal, browse to Microsoft Entra ID, then follow the following steps:

Step 1

Go to Enterprise applications in the sidebar.

Step 2

Create a New Application

Step 3

Give your application a name and select Integrate any other application you don’t find in the gallery (Non-gallery). Then click Create.

Step 4

First assign users that will have access to Bannernow through SSO then click on Set up single sign on

Step 5

Select SAML option

Step 6

Click Edit for the first Step then add Identifier and Reply URL and open Bannernow in a separate tab to get those values.

Step 7

Go to Organization Settings in Bannernow then go to Settings tab as shown below. Then choose SAML/SSO Settings. (keep in mind that these settings are available only for the Organization owner)

Step 8

Click Enable SAML

Step 9

Then copy all related fields to Azure SAML settings as shown below. Then click Save in Azure dashboard and Continue in Bannernow.

Step 10

Finally in the last step copy urls from Azure SAML settings Step 4 to Bannernow SAML settings. Download Certificate from Azure SAML settings Step 3 in Base64 format and upload it to Bannernow SAML settings as shown below.

Check Enforce SSO so all users in your organization will be forced to log in into Bannernow only through Microsoft Entra ID. (keep in mind that you would need to have 2FA enabled in your account first).

Click Submit in Bannernow and that should be it. You can test SSO from Bannernow login page.

Using SSO, an employee logs into Bannernow using your identity provider’s interface instead of the Bannernow login page. The employee’s browser redirects to Bannernow to authenticate. With SSO enabled, Bannernow’s own login mechanism is disabled, meaning that authentication security shifts to your IdP, and coordinated with your other service providers.

Identity Providers with Built-in SSO support for Bannernow

The following major IdPs provide built-in support for Bannernow. To set up SSO for these IdPs, follow the instructions on the vendor’s site.

• Azure / Microsoft Entra ID

SSO Setup for Other SAML 2.0-Compliant IdPs

Most SAML 2.0-compliant identity providers require the same information about a service provider to set up SSO. In the case of Bannernow, relevant values are available in the Settings tab of the Bannernow Organization you want to enable SSO for:

You must be organization owner to see this information and to enable SSO.

After configuring SSO on your IdP, fill Entity ID, Idp SSO login url and copy base64 x509 certificate or upload it on the next step.

If you want organization members to access Bannernow only through SSO please check Enforce SSO before submitting (keep in mind that you need 2FA enabled for your account to enforce SSO).

When setup is successful you can test SSO from Bannernow SSO login page https://bannernow.com/auth/login/sso

Here is the step-by-step tutorial about enabling SAML with Microsoft Entra Id/Azure that can be used with any other SSO provider: Set Up Microsoft Entra ID SSO with Bannernow

Open the desired banner set, click the three-dot menu next to the banner and select Restore Version

A dialog will display all saved versions of the banner, along with their respective creation dates and times.

The current version is marked with a blue Current version label.

To revert to an earlier version, click Restore next to the desired version.

The selected version will now be restored as the current version. It’s a straightforward process to manage and revert to previous designs.

2. If you need to work with a specific banner size it is possible to use a filter to show/hide specific bannerset sizes.

You can create and save custom color palettes that match your brand’s specific color scheme.

Let’s open the Colors page from the top dashboard menu. Click Add Color Palette.

To add color palettes to your projects, simply input the Hex Color codes separated by commas in the Hex Colors field. Then, click on Create.

Your new color palette will automatically appear on the Colors page, ready to be used when building your creatives.

To use this palette, click on any color picker button. You’ll notice that your color palette is available on the bottom side of the color picker panel.

This feature ensures that your ads are always on-brand, using your brand’s specific color scheme for maximum consistency and recognition.

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);
}

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.

Follow these steps to duplicate any Bannerset:

1. Click on the 3-dot icon beside the Bannerset’s title to view the dropdown menu.

2. Click Duplicate button.

Our advanced permission settings allow you to customize user access, granting or restricting specific actions based on individual roles and responsibilities. In addition, you can create workspaces for different projects, departments, or clients, ensuring efficient organization and streamlined collaboration.

In this video tutorial, we will guide you through the process of effectively managing organizations, teams, and workspaces within BannerNow. Let’s get started!

First, got to your dashboard and open My Workspace drop down and click Manage Teams.

On organization page, you can view a list of all your existing teams. Click on any team to see detailed information, including the number of members, integrations, and associated workspaces. This overview provides you with a comprehensive understanding of each team’s composition and functionality.