Add More Components to HTML5 Banners

You can add multiple creative components to your HTML5 banners by using Adform's Creative Components. Also, you can use Adform's Styles Library for common banner element styles and utilities.

To make sure that your HTML5 banners are suitable for Adform FLOW, use Adform Studio, a user-friendly tool created to help you build banners.

Initialization

Creative Components are usually written JavaScript code and include coding related to the component’s functionality.

Adform.MyComponent-1.js

To use Adform Creative Components, add the needed component script URL in the <head> tags of index.html. You can initialize multiple components for your HTML5 banner.

Example code with components initialization in a cascade format

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Cascade v 1.5</title>
    <link rel="stylesheet" href="//s1.adform.net/banners/scripts/components/styles/Adform.Styles-1.css" />
    <link rel="stylesheet" href="styles/custom.css" />
    <script>
        document.write('<script src="' + (window.API_URL || 'https://s1.adform.net/Banners/scripts/rmb/Adform.DHTML.js?bv=' + Math.random()) + '"><\/script>');
    </script>
    <!-- Components -->
    <script src="//s1.adform.net/banners/scripts/components/Adform.PanelsSlide-1.js"></script>
    <script src="//s1.adform.net/banners/scripts/components/Adform.PanelFlip-1.js"></script>
    <script src="//s1.adform.net/banners/scripts/components/Adform.VideoContainer-1.js"></script>
    <script src="//s1.adform.net/banners/scripts/components/Adform.VideoPlayer-1.js"></script>
    <script src="//s1.adform.net/banners/scripts/components/Adform.SingleExpanding-1.js"></script>
    <!-- Components -->
</head>

Versioning

All Adform Creative Components include their version number, which represents the state (improvements, updates) of the component. In this example, -1 represents the component version.

Adform.MyComponent-1.js

Note

If the component version isn't specified (for example, Adform.MyComponent.js), then the newest version of the component is served.

Extended Version of the Component

Each creative component’s JavaScript file has an extended version of the component. The extended version includes the currently released version after major and minor changes.

Adform's Styles Library

Adform's Styles Library contains common banner element styles and CSS utilities in one place. All styling rules described in the library are defined according to Suit CSS specifications.

Initialization

To use Adform's Styles Library, link it inside the <head> tags in the index.html document.

 <link rel="stylesheet" href="//s1.adform.net/banners/scripts/components/styles/Adform.Styles-1.css" />

These sections define each element’s styles used in Adform's Styles Library.

Fonts

The default font for Adform banners is Source Sans Pro with Regular and Semibold variations. This font was the first Adobe Open Source typeface.

You can find additional symbols used for "close" buttons and navigation controls with this Adform font.

To include fonts in your stylesheet, import them with an @font-face-declaration:

@font-face {
    font-family: 'Source Sans Pro';
    src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url('//s1.adform.net/Banners/Scripts/assets/fonts/SourceSansPro-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Source Sans Pro';
    src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'), url('//s1.adform.net/Banners/Scripts/assets/fonts/SourceSansPro-Semibold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: "adform";
    src: url("//s1.adform.net/Banners/Scripts/assets/fonts/adform.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

Reset

Use this code to reset the default browser styles:

html,
body {
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
img {
    border: none;
}
ol,
ul {
    list-style: none;
}
a {
    text-decoration: none;
}

Utilities

According to Suit CSS, utilities classes are prefixed by u- and followed by a lower camel case notation. Adform's Styles Library sets the full size and centering utilities:

/* Full size class */
.u-sizeFull {
    width: 100%;
    height: 100%;
}
/* Horizontally centered class */
.u-hCentered {
    position: absolute;
    left: 50%;
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    -o-transform: translate(-50%);
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
}
/* Vertically centered class */
.u-vCentered {
    position: absolute;
    top: 50%;
    -moz-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
}
/* Horizontally and vertically centered class */
.u-centered {
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

Example of full size and centering utilities element

<div class="u-hCentered"><span>.u-hCentered</span></div>

<div class="u-vCentered"><span>.u-vCentered</span></div>

<div class="u-centered"><span>.u-centered</span></div>

<div class="u-sizeFull"><span>.u-sizeFull</span></div>

Containers

Adform banners have one non-removable element inserted into the source code:

<div id="adf-banner" class="adf-Banner"></div>

The main banner container and all accessory elements are inserted as children. Style instructions inherited by all other elements are defined together with its own ones.

Expandable banners have distinct containers for when they're expanded and collapsed. Video banners usually need a click area container which shouldn't interfere with video player controls.

New containers should follow Component Names specifications — all classes have an .adf- prefix followed by a upper camel case element name.

You write modifiers lower case and separate them from the component name with two hyphens.

.adf-Banner {
    position: absolute;
    overflow: hidden;
    cursor: pointer;
    font-family: 'Source Sans Pro', sans-serif;
    color: #fff;
}
.adf-ClickArea {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}
.adf-Collapsed {
    position: absolute;
}
.adf-Expanded {
    position: absolute;
    display: none; /* to invert in custom styles if initially expanded */
}te

Note

Use the .adf- prefix with all classes except utilities (which use u-).

Example of container element

<div id="adf-banner" class="adf-Banner">
    <div id="adf-collapsed" class="adf-Collapsed adf-Border">
        <div id="adf-click-area-collapsed" class="adf-ClickArea adf-Background"></div>
    </div>

    <div id="adf-expanded" class="adf-Expanded adf-Border">
        <div id="adf-click-area-expanded" class="adf-ClickArea adf-Background"></div>
    </div>
</div>

Buttons

Many banners include buttons for visitors to interact with the ad.

Use the same naming conventions for the main button classes.

.adf-Button {
    position: absolute;
    cursor: pointer;
    font-size: 14px;
    line-height: 14px;
    padding: 7px;
    color: #fff;
    display: block;
    z-index: 20000;
    background: #005F8C;
}
.adf-Button:hover {
    background: #5AAAD2;
}
.adf-Close {
    background: #fff;
    color: #005F8C;
    top: 15px;
    right: 15px;
}
.adf-Close::after {
    font-family: "adform";
    content: "\2716";
    padding-left: 5px;
    line-height: 14px;
    vertical-align: middle;
}
.adf-Round {
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}
.adf-Round::after {
    padding: 0 1px;
}

Example of button element

<div id="adf-button" class="adf-Button">Simple Button</div>

<div id="adf-close-button" class="adf-Button adf-Close">Close Button</div>

<div id="adf-close-button" class="adf-Button adf-Close adf-Round"></div>

Removable Elements

Adform banner default design includes elements that can be removed by user to create their own ads.

.adf-Logo {
    background: url('../images/logo-white.svg') no-repeat 50% 50%/100%;
    position: absolute;
    top: 15px;
    left: 15px;
    height: 28px;
    width: 94px;
    cursor: pointer;
}
.adf-Info {
    font-size: 14px;
    position: absolute;
    bottom: 15px;
    left: 15px;
    color: #fff;
    line-height: 14px;
}
.adf-Info-title {
    font-size: 18px;
    margin-bottom: 10px;
}
.adf-PanelTitle {
    font-weight: 600;
    color: #005F8C;
    position: absolute;
}

Example of removable elements

<div class="adf-PanelTitle u-vCentered">This is Panel Title</div>
<div class="adf-Info">
    <div class="adf-Info-title">This is Info Title</div>
    This is Info text
</div>
<div class="adf-Logo"></div>

Video

Though not all banners feature a video player to stream content, most Adform templates include video elements. Because of this, Adform's Style library includes generic styles with video classes.

.adf-Video {
    background: #000;
}
.adform-video-container,
.adform-video-container video,
.adform-video-container .adform-video-poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000 no-repeat 50% 50%;
}

Note

Video player elements have a different class prefix, .adform- for rendering Video Player Component code.

Elements Design

Usually, you apply recurring styles to containers and other elements. All these classes follow the standard naming convention (for example, .adf-Border).

.adf-Border {
    border: 1px solid #003C5A;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.adf-Background {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: #0A82BE;
}
.adf-Teal {
    background-color: #37A5AF;
}
.adf-Ice {
    background-color: #AAD2E6;
}
.adf-Round {
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

Example of elements design

<div class="adf-Border adf-Background">
    <span>.adf-Background</span>
</div>

<div class="adf-Border adf-Background adf-Teal">
    <span>.adf-Teal</span>
</div>

<div class="adf-Border adf-Background adf-Ice">
    <span>.adf-Ice</span>
</div>

<div class="adf-Border adf-Background adf-Round">
    <span>.adf-Round</span>
</div>

Dynamic Skin Component

The Dynamic Skin component is customizable and easy to use. Follow the guidelines below to change parameters or to add (or remove) other externally used components.

Note

The Dynamic Skin component and its format were designed for desktop browsers. On some websites it may require specific modifications.

Initialization

For a Dynamic Skin setup, load Adform.DynamicSkin.js within the <head> tags insider the banner's index.html file:

<head>
...

<script src="//s1.adform.net/banners/scripts/components/Adform.DynamicSkin.js"></script>      

...
</head>

After the script, in the index.html file initialize Video Player and Video Container components:

<head>
...
  <!-- Components -->
    <script src="//s1.adform.net/banners/scripts/components/Adform.DynamicSkin.js"></script>
    <script src="//s1.adform.net/banners/scripts/components/Adform.VideoContainer.js"></script>
    <script src="//s1.adform.net/banners/scripts/components/Adform.VideoPlayer.js"></script>
    <!-- Components -->   
 ...
 </head>

Example of initialization for Video Skin Marquee format

// 1. Create new instance
var videoskin = new Adf.DynamicSkin({
    videoPlayer: player,
    type: 'videoSkin',
    height: 'auto',
    autoClose: 1,
    transitionTime: 0.5,
    transitionEasing: 'ease-in-out',
    tabs: [{
        videoSources: [{
            file: Adform.getAsset(1)
        }],
        button: 'button1',
        clicktag: Adform.getVar('clickTAG') || '//www.adform.com',
        target: target
    }, {
        videoSources: [{
            file: Adform.getAsset(2)
        }],
        button: 'button2',
        clicktag: Adform.getVar('clickTAG2') || '//www.adform.com',
        target: target
    }, {
        videoSources: [{
            file: Adform.getAsset(3)
        }],
        button: 'button3',
        clicktag: Adform.getVar('clickTAG3') || '//www.adform.com',
        target: target
    }]
});

// 2. Initialize Dynamic Skin
videoskin.init();

Required Settings

Name	Type	Description
videoPlayer	`object`	Instance of the Video Container Component

Optional Settings

Name	Type	Default	Description
type	`string`	`videoSkin`	Type of skin to use Available values: `videoSkin`, `fadingSkin`, `dynamicSkin`
height	`string`	`auto`	Height of Dynamic Skin `auto` attempts to fit according to video dimensions; 100% covers the whole available browser area; any specific number sets a fixed height in pixels.
initialMargin	`number` \|\|`string`	`string`	Top margin set to page content If tabs are set in HTML, `auto` determines the optimal value according to tabs size.
autoClose	`boolean`	`1`	Closes the Dynamic Skin component when a video complete event occurs.
maxWidth	`string`	`1080`	Sets to the page content width if the default width is 100%. (Use a number for pixels and add % for a percentage of the page content width.)
elemToAnimate	`string`	`body`	Selector of element to animate ( `#id`, `.className`, `tagName`)
transitionTime	`number`	`0.5`	Duration of the animation in seconds
tabs	`object`	`none`	See the table for tab properties.

Tab Properties

Name	Type	Description
videoSources	`object`	Object with URLs for video source file
button	`string`	ID of a tab button
background	`object`	Object with background properties (image, color, position, size, repeat, origin, clip, attachment)
clicktag	`string`	Landing page URL
target	`string`	Landing page target

Methods

videoskin
- .collapse()
- .expand()
- .on(eventName, listener)
- .collapse()
- .off(eventName, listener)

videoskin.collapse()

Collapses the Dynamic Skin component or fades in the page content.

Example:

window.parent.addEventListener('scroll', videoskin.collapse); // collapse Dynamic Skin on page scroll

videoskin.expand()

Expands the Dynamic Skin component or fades out the page content.

Example:

document.getElementById('show-full-video').addEventListener('click', videoskin.expand); // expand Dynamic Skin on specific element click

videoskin.on(eventName, listener)

Registers an event listener for the provided event name.

Parameter	Type
eventName	`string`
listener	`function`

Example:

videoskin.on(videoskin.EXPAND_START, function () { // freezes page scroll on Dynamic Skin expand start
    var bStyle = window.parent.document.body.style;
    bStyle.width = '100%';
    bStyle.overflowY = 'scroll';
    bStyle.position = 'fixed';
});

videoskin.on(videoskin.COLLAPSE_END, function () { // reenable page scroll on Dynamic Skin collapse end
    var bStyle = window.parent.document.body.style;
    bStyle.position = 'relative';
});

Available Events

Name	Description
EXPAND_START	Fires when the Dynamic Skin component begins expanding.
EXPAND_END	Fires when the Dynamic Skin component completes its expansion.
COLLAPSE_START	Fires when the Dynamic Skin component begins collapsing.
COLLAPSE_END	Fires when the Dynamic Skin component completes collapsing.
CHANGE	Fires when a visitor clicks a different browser tab.

videoskin.off(eventName, listener)

Removes an event listener. If a listener is null or undefined, this removes all listeners associated with the provided event name.

Param	Type
eventName	`string`
listener	`function`

Responsive Leaderboard Setup

The following guidelines describe how to setup a Responsive Leaderboard Ad without and with the video player component.

Example of Responsive Leaderboard:

See an example template in Adform Studio.

Example of Responsive Leaderboard with video:

See an example template in Adform Studio.

Initialization

To make a banner responsive, implement a resize function in <script> tag inside the .html file.

<script>
...
dhtml.external.resize('100%');  // makes responsive width
...
</script>

Note

To make your ad responsive in height and width, add values.

<script>
...
dhtml.external.resize('100%', '100%'); // makes responsive width and height
...
</script>

Responsive Leaderboard with Video Initialization

After initializing the resize function, initialize the Video Player component after the <head> tag inside the .html file:

<head>
...
     <!-- Components -->
    <script src="//s1.adform.net/banners/scripts/components/Adform.VideoPlayer.js"></script>
    <!-- Components -->
 ...
 </head>

Video Player Container Setup

To work more flexibly with Video Player components, use the Video Player Container.

To implement the Video Player Container in a banner:

Load the container after the <head> tag in the .html file:

<head>

...
 <!-- Components -->
    <script src="//s1.adform.net/banners/scripts/components/Adform.VideoContainer.js"></script>
    <script src="//s1.adform.net/banners/scripts/components/Adform.VideoPlayer.js"></script>
    <!-- Components -->
...

</head>

Set up the Video Player container inside the script tag:

<script>

...
 var player = new Adf.VideoContainer({
            container: '#adf-video', // id or class of an element where the video should be rendered
            clicktag: clickTAGvalue,
            target: landingpagetarget
        });

        player.init(); // initialize video player

...
</script>

Change the Video Player Component Position

To change the video player component's position inside your template:

For the video to have a custom position, remove class .u-hCentered class from the video container element.
Add selected styles to the video container element like #adf-video { left: 0px;}; or .adf-Video { right: 0px;}.

Remove the Video Player and Video Player Container Components

To remove the video player and video player container components from your template:

Remove video assets from the Additional File tree.
Remove video styling from custom.css.

Remove Adform.VideoContainer.js and Adform.VideoContainer.js URLs from <head> tags in the .html file.

<head>

...
 <!-- Components -->
    <script src="//s1.adform.net/banners/scripts/components/Adform.VideoContainer.js"></script>
    <script src="//s1.adform.net/banners/scripts/components/Adform.VideoPlayer.js"></script>
    <!-- Components -->
...

</head>

Remove the Video Player container setup code from within the <script></script> tags.

<script>

...
 var player = new Adf.VideoContainer({
            container: '#adf-video', // id or class of an element where the video should be rendered
            clicktag: clickTAGvalue,
            target: landingpagetarget
        });

        player.init(); // initialize video player

...
</script>

Initialization

Versioning

Note

Extended Version of the Component

Adform's Styles Library

Initialization

Fonts

Reset

Utilities

Example of full size and centering utilities element

Containers

Note

Example of container element

Buttons

Example of button element

Removable Elements

Example of removable elements

Video

Note

Elements Design

Example of elements design

Dynamic Skin Component

Note

Initialization

Required Settings

Optional Settings

Tab Properties

Methods

Available Events

Responsive Leaderboard Setup

Initialization

Note

Responsive Leaderboard with Video Initialization

Video Player Container Setup

Change the Video Player Component Position

Remove the Video Player and Video Player Container Components

<%= previousTitle %>

<%= nextTitle %>

In this article

Subscribe to Our Updates

What's New

<% if (!block.description) { %> <%= block.name %> <% } else { %> <%= block.name %> <% } %>

Get in touch

<% if (!block.description) { %> <%= block.name %> <% } else { %> <%= block.name %> <% } %>

Still have questions?

Categories

Toggle navigation menu

<%= category.name %>

Categories

Categories

Get in touch

<% if (!block.description) { %> <%= block.name %> <% } else { %> <%= block.name %> <% } %>