Widget Studio structure

The Kameleoon Widget Studio is composed of a header, a sidebar with six sections, and a central area where you can preview your widget’s customization.

​

Screen dropdown

​

Add a screen

You can add as many screens as you need. To add a screen, click Add in the Screens section. For example:

• Screen 1: Newsletter pop-in
• Screen 2: Thank-you pop-in

​

Set a screen by default

When you have created several screens, the first screen created (at the top of the dropdown list) is automatically designated as the default screen. The default screen is the first screen that a visitor views when exposed to your widget. You can change the default screen by clicking the three-dots menu and checking Define as default screen.

​

Delete a screen

To delete a screen, click the three-dots menu > Delete a screen.

​

Duplicate a screen

To duplicate a screen, click the duplicate icon. Kameleoon also duplicates the design, animations, and associated events.

​

Zoom

Zoom the widget content in or out.

​

Device selection

Select the devices where your widget displays.

​

Undo/Redo

Undo (left arrow) or redo (right arrow) the last action you performed on the widget.

​

Simulate

Simulate the widget in real conditions, which is useful when you add events.

​

Save

Save the widget without activating it. The widget appears on the Widgets dashboard with the status Inactive and can’t be used in a campaign.

​

Activate

Activate the widget to use it in a campaign. The widget appears on the Widgets dashboard with the status Active.

​

Sidebar

The left sidebar has six distinct sections:

• Add element
• Content (displayed by default)
• Translations
• Animations
• Events and actions
• Custom code

​

Add element

Here, you can add an element to your widget. To learn how to add an element to a widget, see Add an element.

​

Content

Here, you can edit your widget’s content. To learn how to edit a widget’s content, see Design an element.

​

Translations

Here, you can configure the widget in multiple languages.

​

Animations

Here, you can add entrance and/or exit animations to your widget. To learn how to add an animation to your widget, see Animate your widgets.

​

Events and actions

Here, you can associate events and actions to your widget. To learn how to associate events and actions with your widget, see Associate events and actions with your widget.

​

Custom code

Here, you can create custom CSS or JS code in the Widget Studio, apply custom styles to any widget element, and run your custom scripts on demand.