The Kameleoon Widget Studio is composed of a header, a sidebar with 5 tabs, and a central area where you can preview the customization of your widget.
Header
Screen dropdown
Add a screen
You can add as much screens as needed.
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 one created (at the top of the dropdown list) is automatically designated as the default screen. This means that if a visitor is exposed to the widget, the default screen will be the one displayed first.
You can change the default screen by opening the secondary actions menu and checking the option.
Delete a screen
To delete a screen, simply click on the secondary actions menu and choose Delete a screen.
Duplicate a screen
You can duplicate a screen. To do this, simply click on the duplicate icon.
The design, animations and associated events will also be duplicated.
Zoom
Zoom in or out in the widget content.
Device selection
Select the desired device for the creation of the widget: smartphone, tablet or desktop.
Undo / Redo
Undo (left arrow) or redo (right arrow) the edition action that has been done on the widget.
Simulate
Simulates the widget in real condition (useful if events have been added).
Save
Save the widget without activating it. It will then appear on the Widgets Dashboard with the status Disabled and cannot be used in a campaign yet. This allows you to make changes before associating it with a campaign.
Activate
Activate the widget to be able to use it in a campaign and it will appear on the Widgets Dashboard with the status Activated.
Sidebar
The left bar has 5 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, please read this article.
Content
Here you can edit the content of your widget.
To learn how to edit the content of a widget, please read this article.
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, please read this article.
Events and actions
Here you can associate events and actions to your widget.
To learn how to associate events and actions to your widget, please read this article.
Custom code
Here you can create custom CSS or JS code in our Widget Studio, and apply your custom styles to any widget element or run your custom scripts on demand.
To understand our custom code editor, please read this article.
