Back to Platform Overview
Glossary
Creatives
Working with creatives
Creative technical specs
Viber Format Creatives specs
Advanced Creative settings
Creative billing

UI template: HTML5 Banner


Preview

An ad format is a web page branding with HTML files as branding panels’ sources.

Supported platforms

Desktop Tablet Phone
Windows Mac iOS Android iOS Android
Chrome, Firefox, Edge, IE10+ Safari8+, Chrome, Firefox; – – – –

Format requirements

General requirements

HTML files are used as branding panels.
Width, height, and positioning of HTML panels depend on a web page layout. Make sure that the banner content (top, left and right sides) is aligned as close to the website as possible, so it is visible on most screen resolutions. The website background color should be considered on the borders of the banner-to-website background transition.

Banner size

  • recommended size is up to 300 Kb

Download an archive with the template:

Download

Present file structure corresponds to the default template only and can be changed by you. The required file in .zip archive is body.html. All parameters such as dimensions, events, click tracking, etc. can be defined in body.html.

How to work with .zip archive (template)

  1. Unpack an archive with the creative template.
  2. For creative preview use the preview page.
  3. Open file body.html with the text editor and edit the code snippet inside tags <body> </body>.
Provide banner sizes, scripts, etc. within <body> </body> tags. Otherwise, the ad won’t show.
  1. Edit JS files.
  2. Save and archive all banner assets in .zip (you should archive the files, not the folder that contains the files).

Assets requirements

ZIP archive

Banner with all banner assets should be archived as a .zip file. It is recommended to use a .zip file with a template.

HTML file

The HTML file must define all used sources (libraries, images, etc). A recommended file name is body.html.

API connection and usage

globalHTML5Api is connected automatically, called with the method shown below.

Expand the globalHTML5Api code
globalHTML5Api.on('load', function(){
  /*
    YOUR CODE IS HERE
  */
});

All used modules should be listed as function parameters. Two and more modules should be comma-separated. Module bodycss is described below.

An example of the globalHTML5Api.init usage for the Branding format.

Expand the globalHTML5Api.init example code
globalHTML5Api.on("load", function (bodycss) {
    var bgName = "background";
    if (globalHTML5Api.name() === bgName) {
        globalHTML5Api.init({
            'resize': [
                {
                    'name': 'state-1',
                    'width': '100%',
                    'height': '100%',
                    'fixed': {
                        'vertical': "center",
                        'horizontal': 'center',
                        'scroll': false 
                    },
					css:{
						zIndex: 0
					}
                }
            ]
        });
		bodycss.set({
			paddingTop: "100px",
			backgroundColor: "green"
		});
    } else {
        globalHTML5Api.panels.add(bgName, {
            body: true,
            first: true,
            visible: true,
            src: globalHTML5Api.src()
        });
    }
	document.body.onclick = function () {
		globalHTML5Api.click();
	}
})

Parameters of globalHTML5Api.init

Key Parameters Properties Type Description
resize(options) – – – globalHTML5Api.resize initialization
options – Array Array of objects with properties. Each object presents the container state (resizeState)
name (required) String Object (state) name
width (required) String|Number Banner container width
height (required) String|Number Banner container height
fixed – Object Object with properties. Describes the container position relatively to browser window
vertical (required) center String The vertical alignment of the container
horizontal (required) center String The horizontal alignment of the container
scroll (required) – Boolean ‘true’ if the image scrolls along with the page, ‘false’ if it doesn’t
css – Object Object with CSS properties
zIndex Number z-index value for the banner container

globalHTML5Api methods

Method Arguments Type Description
click(URL) – – Method to call the clickthrough. The target URL may be set as a parameter or from the user interface. The URL set in the code has a higher priority than the URL set from the UI, which can lead to a conflict. Therefore, it is mandatory to use only one of the available methods_.
URL (optional) String Target URL
src(URL) – – Method returns the absolute path to file
URL (optional) String Relative path to file
on(‘positionChange’, callback); ‘positionChange’, callback – Callback function call upon page’s XY coordinates change event

Module bodycss

This plugin sets CSS properties for the body element on a page.

Properties of bodycss plugin

Method Parameters Properties Type Description
set(options) – – – Initialization of bodycss plugin
options – Object Object with properties
paddingTop String CSS property that sets the top padding of an element
backgroundColor String CSS property that sets the background color of an element

Module Panels

This module adds banner’s panels to the web page.

Properties of module Panels

Method Parameters Properties Type Description
add(name, options) – – – Method to add the panel
name – String Name of the added panel
options body Boolean default=“false”; If the value is “true”, the panel will be placed in ‘body’ element,

if the value is “false”, the panel will be placed in the banner placeholder
first Boolean default=“false”; If the value is “true”, the panel will be placed at the beginning of the tag – ‘body’ or placeholder
visible Boolean default=“false”; Panel will be rendered as visible on the page
src String Path to the file used as a panel; globalHTML5Api.src() when empty returns the path of a current file

Images

Supported file types: .jpg, .png, .gif, .svg

Important! To serve ads on secure sites (sites that are served over the HTTPS protocol), make sure that external references to files support only secure HTTPS scenarios.

Event tracking

  • View
  • Confirmed view
  • Click
  • Uses the main thread for more than 60 seconds in total
  • Uses the main thread for more than 15 seconds in any 30-second window
  • Uses more than 4 megabytes of network bandwidth

For any questions regarding ad manuals please contact the support manager of your account.

Updated on April 11, 2024