Table of Contents


This is a highly customizable and very easy to use 3D Box Leader Expandable Ad template.

User experience

The first interactive panel of the ad is loaded on the initial visit. The user can directly interact with a panel by clicking on predefined areas on the right and left, which allows the user to move to the next or previous panels. While spinning panel expands to 1200x620 size. The ad accommodates a link to predefined landing pages.

Creative assets

The following items are to be delivered by a creative agency:

  • One PNG/JPEG image per each 3D panel. (The Template can contain less than 4 walls (panels) or more than that).
  • In case the browser is very old and doesn't support HTML5, the backup image (PNG/JPEG) is required.
  • Banner assets containing manifest.json file and HTML file zipped together with images, scripts and other material.

NOTE: manifest.json file and HTML file should be in the root directory of the .zip file.

How to change default settings

The file “index.html” can be adjusted to customize the banner components. These are the values that can be changed:

  • "direction" - cube rotation direction;
  • "cubeWidth" - cube width, or banner width by default;
  • "cubeHeight" - cube height, or banner height by default;
  • "fallbackImage" - fallback image used when image is not defined;
  • "fallbackUrl" - fallback clickTAG url;
  • "bannerShowDelay" - banner shown delay time in ms;
  • "autoSlideEnabled" - auto slide;
  • "autoSlideDelay" - autoslide interval;
  • "autoSlideDirection" - slide direction: left or right;
  • "panels" - each panel should have wallpaper, clicktag and target.

Changing the number of 3D panels

You can customize panel array you pass to AdformCube.setup method in order to have a 3D Box that contains less than 4 walls (panels) or that contains more than 4 walls, or you can simply use autoConfig(slides); function to generate panels array itself.

Note: there should be from 2 to 20 slides.

Note: changing the number of panels means that you have to assign more images in Additional assets settings and your backup image slot will change from no. 4 to something like no. 7 (if you have 6 slides/panels).

Note: adding more panels requires to add more clickTags. To do that, open Banner settings - settings icon in the left top corner of the screen. Click Tag name has to follow this convention: clickTAG1, clickTAG2, clickTAG3, etc. for panel 1, panel 2, panel 3, etc. Click Save button at the top of the screen or hit Ctrl + S.

Manifest.json file

  • Manifest.json file should define the ad dimensions and the HTML file which is used as a banner source.
  • HTML file should include Adform HTML library which enables the banner to receive a clickTAG variable:
    <script src="https://s1.adform.net/banners/scripts/rmb/Adform.DHTML.js"></script>


By clicking on the banner user navigates to a predefined landing page.

HTML5 Studio

Compatible components/features for Expandable Ad(Single File)

Component/feature Technical Documentation Template in STUDIO
Auto Close Contact RM Support
Chatterbox Component Documentation Template
Countdown Component Documentation Template
Panel Flip Component Documentation Template
Video Component Documentation Template
HTML Animations Any HTML content animation

Compatible components/features for Expandable Ad(Two Files)

Component/feature Technical Documentation Template in STUDIO
Auto Close Contact RM Support
Countdown Component Documentation Template
Video Component Documentation Template
HTML Animations Any HTML content animation

How to setup

  1. In the Initial Settings step, name your banner, select Category as “Expandable” and Format as “Expandable (single file)”. Select a Banner Batch from the drop-down menu.
  2. When it's done, click the Next button.
  3. In the next step, you are asked to select or upload assets. If you have previously uploaded the assets to the system, click the Select button and choose Banner source, i.e. select HTML File named HTML_Expandable. Make sure that the clickTAG is present.
  4. Click the Next button and adjust the Settings.
  5. When done, click the Save button in order to see the preview. If everything is fine, click the Submit button.
  6. Additional info

    The format requires an additional script to be loaded before the tag. In order to do that, navigate to the Tags section in the Adform system. Select the needed tag and click the “JavaScript URLS” button. Paste in the following custom script URL and tick the “Load before banner” check-box.

    Custom Script URL: http://test.adform.com/banners/certifications/extensions/fi/KSF%20Media/3dBoxLeaderFix.js;

    In order to deliver HTML5 banners fully compliant with the specs, follow the instructions on Producing HTML5 banners in Adform Test and Support Center.

    Supported Browsers

    Desktop browser version
    Internet Explorer 10 & 11 fully supported
    Firefox (newest version) fully supported
    Edge fully supported
    Chrome (newest version) fully supported
    Safari (newest version) fully supported