Create a new widget
In the Kameleoon App, click on the “Configure” menu and then on “Widgets”. On the Widgets Dashboard, click on the “New widget” button.
Then select the “Using the editor” option. If you prefer to create a widget from code, this documentation is at your disposal.
In the pop-in, fill in the necessary information: name your widget and associate it with a site. Confirm to access the widget editor.
On the widget editor homepage, select a template to start your creation. You can select by content type or by use case.
- Popin: Add a popin to your page(s).
- Banner: Add a banner to your page(s).
- Cookies policy: Let your visitors choose their cookie preferences easily.
- Emailing/Newsletter: Improve return rates by incentivizing visitors using a pop-in.
- Countdown/Timer: Create some urgency for better conversions.
Note: Both the timer and the countdown create a sense of urgency, but the first is in hours while the second is in days. Use the timer for free shipping for a very limited time, for example, and the countdown for a week of sales.
- Urgency: Let visitors know how long they have before your offer expires.
- Product push: Give center stage to your newest and hottest products with this pop-in.
- Discount offers: Make your visitors feel lucky with discount offers.
- Feedback/Survey: Curious about your customers’ opinion? Ask them directly.
- Social networks: Grow your business’ social media following.
Structure of the widget editor
The Kameleoon widget editor is composed of a header, a sidebar with 4 tabs, and a central area where you can preview the customization of your widget.
You can add as much templates as needed.
Each template corresponds to a screen. For example:
- Screen 1 : Newsletter pop-in
- Screen 2 : Thank-you pop-in
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 4 distinct sections:
- Add element
- Content (displayed by default)
- Events and actions
Add an element to your widget.
Edit the content of your widget.
Add animation to your widget.
Events and actions
Associate events and actions to your widget.
Add an element
In the “Add element” section, click on an element type to add it to your widget.
Several elements are at your disposal:
- Close cross
The added element appears in the list of the Content section. You can then edit its characteristics.
Design an element
In the “Content” section, design the elements of your widget.
Select an element
Click on an element in the center preview area to select it, or click on its name in the hierarchy panel on the left (it will highlight the linked element).
Hover over an element
On hover on an element in the left panel, secondary actions buttons are displayed. Click on the + icon to add an element below the selected one. Click on the 3 dots to edit, rename, duplicate, hide or delete the element.
Note: If an event is associated to one of your elements, you can’t delete this element. You will need to delete the event first.
Click on an element
On click on an element in, you access its settings. Depending on its type, some characteristics can be edited.
In the case of a child element, the container settings are also available.
Note: To modify the URL associated with a text, you will need to create a click event, and then associate a “URL” action with it.
When you create a group with columns, there are different location and distribution options available to you.
This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns.
This defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.
This defines the default behavior for how flex items are laid out along the cross axis on the current line.
Add an animation
In the “Animations” section, add entrance and/or exit animation(s) to your widget.
About 50 different effects are available, classified into major categories:
- Attention seekers
- Back entrances/exits
- Bouncing entrances/exits
- Fading entrances/exits
- Flip entrances/exits
- Rotating entrances/exits
- Special entrances/exits
- Zooming entrances/exits
- Sliding entrances/exits
Click the “Previsualize” button to see a preview of the animation effect.
Associate events and actions
In the last section of the side panel, associate events and actions to your widget.
For example, you can create two popins, corresponding to a subscription phase and a subscription validation phase. Create a “Request” > “Success” event and associate it with the sending of an email address by the visitor.
Associate the action of displaying the second popin : the display will then be conditioned to the sending of the email address.
Click on “+ Add event” to associate a new event.
To edit an event, simply double-click on it.
To delete an event, right-click and choose the “Remove event” option.
Define if the action will trigger before or after the display.
Define if the action will trigger on clicked element. You have to select the elements from the list.
Define if the action will trigger if the request is on Success or Error.
Define if the action will trigger if the URL contain or match regex.
Define if the action will trigger when the countdown is over.
Note: If you want the countdown to disappear once it is over, associate a “hide element” action to this event. Otherwise, the countdown will remain displayed even after reaching 00:00:00.
Click on “Add action” inside an event to associate it with a new event.
To edit an action, simply double-click on it.
To delete an action, right click and choose the “Remove action” option.
Show or hide an element.
- Goal > Process conversion: this method allows you to trigger a conversion. You have to specify the goal ID.
- Goal > Cancel conversion: this method allows you to cancel a conversion that was previously triggered during the same visit. It cannot cancel conversions registered in previous visits. You have to specify the goal ID.
- Data > Set custom data: this method allows you to set a custom data value. You have to specify the name and the value of the custom data.
- Event > Trigger event: this method allows you to trigger a custom event. Custom events are used in targeting segments.
- Send data to: this method allows you to send inputs data to a specific URL. You have to specify a method (GET/POST), a URL and a tag.
URL (Redirection URL)
- Go to URL: this method allows you to open the specified URL. You have to specify the URL and indicates if it will open in a new tab or not.
By clicking on the simulation button, the editor switches to navigation mode and you can test your widget in real condition.
You can check the changes made to your widget, and verify its settings (if events have been set up, for example).
Save / Activate
Click on “Save” to keep any recent changes done in the editor. Once saved, you can leave the editor whenever you want and resume where you left off.
When your widgets are ready, you’ll need to click “Activate” to use them in your campaigns. Unactivated widgets are considered unfinished and cannot be associated with a campaign. If your widget is already activated, the button indicates it.