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

UI template: HTML5 Float


Preview

The format in its initial state is attached to the screen’s corner and has a shape of a square with a turned corner. On click or mouseover, the web page content curls up expanding the banner to a full screen. Each state of the banner can be animated. Clicking the Close button, the banner returns to the initial state.

This ad format may be subject to restrictions imposed by Google in cooperation with the Coalition for Better Ads on delivery of ads in Chrome. A list of ad experiences that should be avoided in this ad format according to Initial Better Ads Standards:
· autoplaying video ad with sound.
· main panel (corner) that takes up more than 30% of the screen’s real estate.

Supported platforms

Desktop Tablet Phone
Windows Mac iOS Android iOS Android
Chrome, Firefox, Edge, IE10+ Safari5.1+, Chrome, Firefox – – – –

Format requirements

Initial panel (corner)

  • The default template’s corner is white. In case the page content has another color, the custom image for the corner should be used.
  • The initial panel is a square divided into two triangles by a diagonal that extends from the top left corner to the bottom right one. The left triangle has a transparent background while the right one should have the same color as the web page content (commonly, white). The transparent triangle’s background reveals a part of a banner. It may be part of the fullscreen banner as well as a separate banner.
  • Standard dimensions, WxH, px: 100×100, 150×150, 200×200. Image’s aspect ratio is 1:1
  • File size: recommended up to 8KB
  • File type: .png, .jpg

Expanded panel

Standard dimensions: 100%x100%

Video

  • Video player container can be of any size within the expanded panel’s borders
  • File type: .mp4
  • Duration: 30 sec
  • Frame rate: 24 fps
  • File size: recommended 2.2MB

Audio

User-initiated (off by default)

Buttons

“X Close” button in the upper right corner of the expanded panel (allows user to collapse the expanded stage)

How to work with the .zip archive (template):

Download

  1. Unpack an archive with a creative template.
  2. 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).
  3. 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.
  1. Edit a file body.js.
  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

The banner with all banner assets should be archived as a .zip file. It is recommended to 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, requested the following way:

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 separated by commas. In this format, the Player and Corner modules are used.
An example of the globalHTML5Api.init usage for the Page Corner format:

Expand the globalHTML5Api.init example code
var width = 100;
var height = 100;
var vertical = "bottom";
var horizontal = "left";
globalHTML5Api.init({              
  resize: [
    {
      name: "state-1",
      width: width,
      height: height,
      fixed: {
        vertical: vertical,
        horizontal: horizontal
      },
      onComplete: function () {
        //function();
              },
      onStart: function () {
        //function();
              }
    },
    {
      name: "state-2",
      width: "100%",
      height: "100%",
      fixed: {
        vertical: vertical,
        horizontal: horizontal
      },
      onComplete: function(){
        document.getElementById("expand").style.display = "";
        C.expand({
          onCollapse: function(){
            globalHTML5Api.resize.to("state-1",0);
            player.pause(null, true);
          }
        });
      }
    }   
  ]                                                 
});
globalHTML5Api.init Parameters
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 in regard to a browser window
vertical (required) center String The vertical alignment of the container
horizontal (required) center String The horizontal alignment of the container
onComplete Function Callback function running upon completion of globalHTML5Api.init.resize.to(this.name)
onStart Function Callback function running upon starting of globalHTML5Api.init.resize.to(this.name)
globalHTML5Api.resize Methods

 

Method Parameters Type Description
to(resizeStateName, time, eventName) – – Changing of the current container state to indicated one
resizeStateName (required) String Container state to which the current one should be switched to
time (required) Number Time for the container state changing animation
eventName  (required) String Events for tracking:

  • adExpand – container expanding;
  • adCollapse – container collapsing;
  • adExpandAuto – container auto expanding;
  • adCollapseAuto – container auto collapsing.
currentState() – – Method returns the string:
resizeState.name – current container state name
interactive to resizeState.name – changing the container state to the indicated one

The JS code sample for the Page Corner module can be seen below (click to exand).

Expand the JavaScript sample code
var C = Corner.create({
 content: document.getElementById("content"),
 horizontal: horizontal,
 vertical: vertical,
 width: width,
 height: height,
 time: 1.8
});

Corner Parameters

Method Parameters Properties Type Description
create(options) – – – Corner initialization
options – Object An object with properties
content (required) String HTML Element with the banner layout
horizontal (required) left, right String Horizontal alignment of the corner
vertical (required) top, bottom String Vertical alignment of the corner
width (required) String|Number Corner’s width
height (required) String|Number Corner’s height
time (optional) Number Time for the corner animation
cornerImage String A path to the file. This parameter may be used for changing the default corner image
expand(options) – – – Method starts the Corner animation (corner expansion)
options – Object An object with properties
onExpand Function Function call upon Corner animation completion (corner expansion)
onCollapse Function Function call upon Corner animation completion (corner collapse)
collapse(options) – – – Method starts the Corner animation (corner collapse)
options – Object An object with properties
onExpand Function Function call upon Corner animation completion (corner expansion)
onCollapse Function Function call upon Corner animation completion (corner collapse)

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.
URL (optional) String Target URL
src(URL) – – Method returns the absolute path to file
URL (optional) String Relative path to file

Video

In case the creative contains video, follow the  Video player module  page.

Images

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

Event tracking

  • View
  • Confirmed view
  • Click
  • Expand by user
  • Auto-expand
  • Collapse by user
  • Auto-collapse
  • Play
  • Pause
  • Resume
  • Sound on
  • Sound off
  • Progress (firstQuartile, midpoint, thirdQuartile, complete)
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 December 18, 2023