Chatterbox Component Documentation

Updated: 02/04/2019. Version: 1.5.0

Example of Chatterbox Component

Template in Adform HTML STUDIO

Description

Chatterbox Component allows you to create a Chatterbox template, consisting of one main expanding stage and N expanding boxes (where N is an even number).

Initialization

The Chatterbox component is designed to be used together with the Chatterbox template. To start with the Chatterbox Component, you have to load it into your index.html document.

<head>
...

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

...
</head>

In order to setup a smooth Chatterbox component animation with expansion effect, you also need to load Single Expand component (SingleExpanding.js) it into your index.html document.

<head>
...

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

Initialization:

// 1. New setup
var cbox = new Adf.Chatterbox({
    collapsedContent: Adform.getAsset(1), // you can assign additional asset to collapsed main stage
    boxes: [{
        node: document.getElementById('adf-box-1'),
        collapsedContent: Adform.getAsset(2), // you can assign additional asset to collapsed box
        expandedContent: Adform.getAsset(3), // you can assign additional asset to expanded box
        clicktag: Adform.getVar('clickTAG') || '//www.adform.com',
        target: Adform.getVar('landingPageTarget') || '_blank'
    }, {
        node: document.getElementById('adf-box-2'),
        collapsedContent: '',
        expandedContent: '',
        clicktag: Adform.getVar('clickTAG') || '//www.adform.com',
        target: Adform.getVar('landingPageTarget') || '_blank'
    }, {
        node: document.getElementById('adf-box-3'),
        collapsedContent: '',
        expandedContent: '',
        clicktag: Adform.getVar('clickTAG') || '//www.adform.com',
        target: Adform.getVar('landingPageTarget') || '_blank'
    }, {
        node: document.getElementById('adf-box-4'),
        collapsedContent: '',
        expandedContent: '',
        clicktag: Adform.getVar('clickTAG') || '//www.adform.com',
        target: Adform.getVar('landingPageTarget') || '_blank'
    }]
});

// 2. Initialize Chatterbox
cbox.init();

Mandatory Settings

These are the properties that have to be set in order to complete the setup of Chatterbox component:

Parameter	Type	Description
`node`	string	html reference of a box node, can be defined using `document.getElementById('my-div-id')`

Optional Settings

Name	Type	Description
`collapsedContent`	string	URL of collapsed banner/collapsed box background image. It can be assigned through additional assets with `Adform.getAsset(n)`. If not defined, html content is shown
`expandedContent`	string	URL of expanded box background image. It can be assigned through additional assets with `Adform.getAsset(n)`. If not defined, html content is shown
`clicktag`	string	URL to land to on box expanded part click
`target`	string	clicktag target

Given boxes are positioned by the component into two rows and their dimensions are calculated according to the banner dimensions. All the methods for component’s functionality are set up automatically.