Admixer HelpCenter

English

Russian

Ukrainian

Back to Platform Overview

Glossary

Creatives

Working with creatives

Viber Format Creatives specs

Advanced Creative settings

UI template: HTML5 Mobile Float

Preview

Mobile Branding is a web page branding format for mobile devices. An HTML file is the source of the branding panel. The panel fills the whole screen behind the website content, and the page content moves down to free a branding area at the top of the screen.

Inventory Compatibility:

Local inventory (direct publisher zones) only.

Supported platforms

Desktop		Tablet		Phone
Windows	Mac	iOS	Android	iOS	Android
–	–	Safari, Chrome	Chrome	Safari, Chrome	Chrome

Format requirements

General requirements

The HTML file is the source of the branding panel. The panel is fixed to the screen and fills 100% of its width and height behind the website content. The visible branding area is the space at the top of the page created by the top padding (90 px in the template).

Design for portrait orientation and narrow screens (about 320–430 px wide). Put key elements, such as the logo and message, in the top branding area so they stay visible on all screen sizes. Take the website's background color into account where the banner meets the website.

Attention! When setting up a creative, make sure to select the "Branding" floating type. This setting is required for the creative to be displayed correctly. (see example).

Banner size

recommended size is up to 300 Kb

Download an archive with the template:

Download

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

How to work with archive (template)

Unpack an archive with a creative template.
For creative preview, use the preview page or copy all files to a folder index – banners – banner – body and open the index.html in a browser using localhost. For that, a web server has to be installed (e.g., IIS for Windows, Apache for Mac OS).
Additionally, you can check the preview of the creative by copying the link to it and viewing it from your mobile device.
Open the 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.

Edit a file body.js.
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 sources it uses (libraries, images, etc.). Required filename: body.html

Use relative paths for images, for example images/pattern.png. Use percentage or viewport-based sizes so the creative fits screens of different widths.

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: "90px"
        });
    } 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 the 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 container scrolls along with the page, ‘false’ if it doesn’t
		css	–		Object	Object with CSS properties
		css	zIndex		Number	z-index value of 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.
click(URL)	URL (optional)	String	Target URL
src(URL)	–	–	Method returns the absolute path to file
src(URL)	URL (optional)	String	Relative path to file
name()	–	–	Method returns the name of the current panel
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 October 27, 2026