Create a widget from A to Z in the Widget editor

portrait de l'auteur Julie Trenque

Written by Julie Trenque

Updated on 07/27/2022

5 min

Intermediate

Was this content useful?

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

Content types

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

Use cases

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

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.

Simulation

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 4 distinct sections:

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

Add element

Add an element to your widget.

Content

Edit the content of your widget.

Animations

Add animation(s) 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:

  • Heading
  • Text
  • Link
  • Image
  • Close cross
  • Layout
  • Button
  • Input

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.

To be able to add a link, you need to highlight a word, a group of words or the whole part of the text.

Note: To modify the URL associated with a text, you can also create a click event, and then associate a “URL” action with it.

Group

When you create a group with columns, there are different location and distribution options available to you.

Flex direction

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.

Justify content

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.

Align items

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.

Events

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.

Core

Define if the action will trigger before or after the display.

Mouse

Define if the action will trigger on clicked element. You have to select the elements from the list.

Request

Define if the action will trigger if the request is on Success or Error.

URL

Define if the action will trigger if the URL contain or match regex.

Countdown

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.

Actions

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.

Elements

Show or hide an element.

Kameleoon

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

Request

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

JavaScript

  • JavaScript code to run: this method allows you to run custom JavaScript code if the visitor exposed to the widget triggers the event associated to this action. With this action, you can for example send data to an external tool. A code syntax checking tool is integrated in our Widget editor.

Simulate

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.

  • In this article :