Custom Widgets allow you to create elements in banners based on any custom HTML, CSS and JavaScript code. When dragged onto the banner scene, the widget’s code is wrapped and displayed through an IFRAME within the banner. The IFRAME’s size corresponds to the width and height of the element placed on the banner’s canvas. The widget's code is inserted into the IFRAME’s BODY tag in which conventional HTML, CSS and JavaScript can be placed.

Creating a widget

1. In the Banner Builder, select the Widget tab in the Media Library.

2. Click ✚ -sign to create a new Widget, this will add a new Custom Widget asset to your Media Library. 

Modifying the widget

To access the Widget asset configuration, either right-­click the asset in the library and click Edit or hover the asset then click the green tab with the wrench icon. Here, you can change the name, icon, accessibility and other settings that are common to all types of assets. By clicking Edit code, you can access the code and settings that are exclusive for Custom widget assets.

Edit code

In the Edit code view you can modify the HTML, CSS and JavaScript code of your widget. To make it more clean and maintainable, we highly recommend to separate HTML, CSS (Style), and JavaScript in each their own tab.

The Settings tab lets you access the settings definitions for your widget. The settings you define will create an easily customizable parameter for your widget, visible and easily changed in the Banner Builder style panel when using the widget on the Banner Builder Canvas. The values chosen for the parameters can then be accessed in your JavaScript code by using the BannerFlow.settings object.
For each setting there are five parameters; key, label, type, default value and icon.

  • Key is a unique value identifier which you use to access your setting in the code. 
  • Label is the name which will be visible in the style panel. It's recommended to set the label to one or two words that makes it easy to identify the setting as a user.
  • Type
    Text allows the user to input data via a text­input.
    · URL allows the user to input a text which will be treated as an URL.
    · Color will use a color picker.
    · Number will use a -/+ step counter and number input.
    · Boolean grants a On / Off selection.
    · Select allows the user to select from a list of predefined items. The items are created by entering a value and then pressing enter in the Default value.
    · Images allows the user to select from the images in the image gallery.
  • Default value can be used to set a default value for the setting.
  • Icon (using FontAwesome icons) can be used to set a describing icon for the setting.

Did this answer your question?