The Kameleoon widget editor is composed of a header, a sidebar with 5 tabs, and a central area where you can preview the customization of your widget.
Add a screen
You can add as much screens as needed.
- 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 in or out in the widget content.
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.
Simulates the widget in real condition (useful if events have been added).
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 the widget to be able to use it in a campaign and it will appear on the Widgets Dashboard with the status Activated.
The left bar has 5 distinct sections:
- Add element
- Content (displayed by default)
- Events and actions
- Custom code
Here you can add an element to your widget.
To learn how to add an element to a widget, please read this article.
Here you can edit the content of your widget.
To learn how to edit the content of a widget, please read this article.
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.
Here you can create custom CSS or JS code in our widget editor, 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.