HTML5 expanding build guide

Set up main, collapsed, and expanded panels

Position an ad on the page and set the expanding direction

Two of the basic functions of an expanding creative are to help the website identify the object in your file that represents the collapsed panel and to determine the expanding direction. Since the main object of your file is larger than the area of the collapsed panel, and expansion can be set in any direction, it’s important to define the collapsed area so the page knows how to render your ad.

When your ad serves on a site page, the page positions the creative based on the left and top pixel offset that you set and matches the size of your creative to the ad slot. It then determines the expanding direction. To do this, set up your files accordingly:

In the HTML, create three panels:
- Main panel: Contains both collapsed and expanded panels
- Collapsed panel: Contains collapsed panel contents
- Expanded panel: Contains expanded panel contents
In the CSS, style the three objects to reflect ad position and expanding direction.
In the JavaScript, use the setExpandingPixelOffsets Enabler method to align the collapsed panel to the ad's placement. In the example below, the left offset is 200 pixels.

2-part expanding ad in a web page. Collapsed portion is a 300x250 inpage colored purple and exanded is a 500X300 expanding left and down over content colored blue

300x250 = collapsed
500x300 = expanded

To make sure your ad expands properly when serving inside an app, you must design your creative to either expand down or expand to fullscreen. Learn how to enable fullscreen expansion

Create objects

Create three objects in your HTML file using <div> tags, then assign proper IDs.

Code snippet

<body>
  <div id="main-panel">
    <div id="collapsed-panel">
      <!-- Add collapsed content here. -->
    </div>
    <div id="expanded-panel">
      <!-- Add expanded content here. -->
    </div>
  </div>
</body>

Style the objects

Style the objects you created in the CSS using the IDs you assigned them.

The main panel must have the same dimensions as your expanded panel and must always be positioned at 0,0.
The position of the collapsed panel depends on the expanding direction:
- Expand right or right/down
  - left = 0px
  - top = 0px
- Expand left or left/down
  - left = Expanded panel width [minus] Collapsed panel width (for example, 500px - 300px = 200px)
  - top = 0px
- Expand right/up
  - left = 0px
  - top = Expanded panel height [minus] Collapsed panel height (for example, 300px - 250px = 50px)
- Expanding left/up
  - left = Expanded panel width [minus] Collapsed panel width (for example, 500px - 300px = 200px)
  - top = Expanded panel height [minus] Collapsed panel height (for example, 300px - 250px = 50px)
Always position the expanded panel at 0,0.

Code snippet

#main-panel {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 500px;
  height: 300px;
}
      
#collapsed-panel {
  position: absolute;
  left: 200px;
  top: 0px;
  width: 300px;
  height: 250px;
}

#expanded-panel {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 500px;
  height: 300px;
}

Set positioning offsets

Set pixel offsets for the collapsed panel of the ad and set size dimensions for the expanded panel. This helps Studio identify both the position of the ad on the site page it’s serving on and its expanding direction. To do this, use the setExpandingPixelOffsets method.

Enabler.setExpandingPixelOffsets(left, top, opt_expandedWidth, opt_expandedHeight);

As with collapsed-panel styling, the values you set for the left and top parameters depend on the expanding direction:
- Expanding right or right/down
  - left = 0px
  - top = 0px
- Expanding left or left/down
  - left = Expanded panel width [minus] Collapsed panel width (for example, 500px - 300px = 200px)
  - top = 0px
- Expanding right/up
  - left = 0px
  - top = Expanded panel height [minus] Collapsed panel height (for example, 300px - 250px = 50px)
- Expanding left/up
  - left = Expanded panel width [minus] Collapsed panel width (for example, 500px - 300px = 200px)
  - top = Expanded panel height [minus] Collapsed panel height (for example, 300px - 250px = 50px)
Set opt_expandedWidth and opt_expandedHeight to match the dimensions of the expanded panel.

Code snippet

// Can be called before the Enabler's INIT event.
Enabler.setExpandingPixelOffsets(
  200, // left offset of expanded ad
  100, // top offset of expanded ad
  700, // expanded width of ad
  450); // expanded height of ad

You can also set these parameters in the Studio Web UI after uploading your assets. See also Expanding creative preview properties.

Was this helpful?

How can we improve it?

HTML5 expanding build guide

Set up main, collapsed, and expanded panels

Position an ad on the page and set the expanding direction

Was this helpful?

Need more help?

Try these next steps: