# Chatterbox Component Documentation

#### 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>
...

...
</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>
...

...
</head>

Initialization:

// 1. New setup
collapsedContent: Adform.getAsset(1), // you can assign additional asset to collapsed main stage
boxes: [{
}, {
collapsedContent: '',
expandedContent: '',
}, {
collapsedContent: '',
expandedContent: '',
}, {
collapsedContent: '',
expandedContent: '',
}]
});

// 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.