Admixer HelpCenter

English

Russian

Ukrainian

Back to Platform Overview

Glossary

Creatives

Working with creatives

Viber Format Creatives specs

Advanced Creative settings

UI template: HTML5 Float

Preview

A type of full-width ad that appears at the bottom of the screen and remains visible until the user closes it by clicking the Close button. The height of the ad for this format is 30% of the screen’s height. After clicking the banner, the user will be redirected to the target page, and the banner will be closed.

Inventory Compatibility:

Local inventory (direct publisher zones) only.

Supported platforms

Desktop		Tablet		Phone
Windows	Mac	iOS	Android	iOS	Android
+	+	ver. 7.0+	ver. 4.4+	ver. 7.0+	ver. 4.4+

Download an archive with the template:

Download

How to work with an 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 a file 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> (between the USER’S CODE START and USER’S CODE END comments).

Edit a file js/body.js.
Save and archive all banner assets in .zip (you should archive the files, not the folder that contains the files).

Format requirements

ZIP archive

The banner with all banner assets should be archived as a .zip file. Use the .zip file with the 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 connects automatically, called the following way:

Expand the globalHTML5Api code

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

globalHTML5Api objects and methods should be defined inside a called function. All used modules should be listed as function parameters. A sample of globalHTML5Api.init usage for the Halfscreen format looks the following way:

Expand the globalHTML5Api.init sample code

globalHTML5Api.on('load', function(){
  globalHTML5Api.init({
    'resize': [
      {
        'name': 'state-1',
        'fixed': {
          'vertical': 'bottom',
          'horizontal': 'center'
        },
        'width': '100%',
        'height': '30%'
      }
    ]
  });
});

A sample of the Close button and click handling (from js/body.js):

Expand the Close button and click sample code

globalHTML5Api.on('load', function(){
  function prevent(_event) {
    if (_event) {
      _event.returnValue = false;
      _event.cancelBubble = true;
      if (_event.preventDefault) { _event.preventDefault(); }
      if (_event.stopPropagation) { _event.stopPropagation(); }
    }
  }
  function $(id){
    return document.getElementById(id);
  }

  // Close button
  $('close').onclick = function(_event){
    prevent(_event);
    globalHTML5Api.close();
  };

  // Click on the banner: clickthrough and closing the banner
  $('main_content').onclick = function(_event){
    prevent(_event);
    globalHTML5Api.click('');
    globalHTML5Api.close(true);
  };
});

globalHTML5Api.init Parameters

Key	Properties	Type		Description
resize	–	Array		Array of objects
	name (required)	String		Object name. Each object presents a particular container state (resizeState)
	fixed	–		Object with properties. Describes the container position relatively to a browser window
		vertical (required)	bottom	The vertical alignment of the container
		horizontal (required)	center	The horizontal alignment of the container
	width (required)	String\|Number		Banner container width
	height (required)	String\|Number		Banner container height

globalHTML5Api Methods

Method	Arguments	Type	Description
click(URL)	–	–	Method to call the clickthrough. 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
close(preventEvent)	–	–	Method to close the banner
close(preventEvent)	preventEvent (optional)	Boolean	Prevents sending a tracking event close (banner closing). Used in the template after a click, so that closing the banner after the clickthrough is not counted as a close. Default: false
globalHTML5Api.autoClose(timeMS, preventEvent)	–	–	Method for automatic banner closing after a set amount of milliseconds
	timeMS (required)	Number	Amount of milliseconds before the banner closing
	preventEvent (optional)	Boolean	Prevents sending a tracking event close (banner closing). If the value is false, the event will be sent. Default: false

Video

To add a video to your creative, use the standard HTML5 <video> tag. You don’t need an extra player or module.

Put the video file in the archive, for example in the images folder. You can also link to a video hosted on an external server (see the note below).
Open body.html and paste the <video> tag inside <body>, between the USER’S CODE START and USER’S CODE END comments:
```
<video src="images/output.mp4" autoplay loop muted controls style="position: absolute; left: 0; top: 0;"></video>
```
In src, set the path to your video file, relative to body.html. If the video is hosted externally, put its full URL here.

Attributes used in the example:

Attribute	What it does
`autoplay`	Starts the video as soon as the banner loads.
`muted`	Starts the video with the sound off. Browsers block autoplay with sound, so keep `muted` if you use `autoplay`.
`loop`	Replays the video from the start when it ends.
`controls`	Shows the player controls (play/pause, sound, timeline). Leave it out if you don’t want controls.
`style`	Sets where the video sits inside the banner. You can change the position and size to fit your layout.

Important: for videos hosted outside the archive only.
If you link to a video hosted on an external server instead of adding the file to the archive, the link in src must start with https://. Otherwise the video won’t load on secure (HTTPS) sites. Videos stored inside the archive don’t need this.

Images

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

File size

Up to 50 Mb

Event tracking

View
Confirmed view
Click

Chrome will limit the resources a display ad can use before the user interacts with the ad by removing heavy creatives from the page. An ad is considered heavy if the user has not interacted with it (for example, has not tapped or clicked it) and it meets any of the following criteria:
– 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