help.kameleoon.com Open in urlscan Pro
95.216.36.100  Public Scan

Form analysis
1 forms found in the DOM

GET https://help.kameleoon.com

<form method="get" action="https://help.kameleoon.com" id="form" type="small">
  <div class="input-container hidden" style="border-box: 1px solid pink">
    <input onclick="this.select()" name="s" id="input-header" class="input is-small input-transparent" placeholder="Search an article">
    <input type="hidden" name="search-type" value="simple">
    <div class="search-icon">
      <svg class="hide-icon" id="s-icon-active" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M7.95094 7L14 13.0491L13.0491 14L7 7.95094L0.950943 14L0 13.0491L6.04906 7L0 0.950943L0.950943 0L7 6.04906L13.0491 0L14 0.950943L7.95094 7Z" fill="#474747"></path>
      </svg>
      <svg id="s-icon" width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M20.6231 18.2157L15.6902 13.2667C16.9585 11.8109 17.6542 9.98041 17.6542 8.07455C17.6542 3.62285 13.9 0 9.28256 0C4.66822 0 0.914062 3.62184 0.914062 8.07455C0.914062 12.5283 4.66822 16.1501 9.28256 16.1501C11.0154 16.1501 12.6681 15.6468 14.0781 14.6883L19.0496 19.6765C19.2579 19.8855 19.536 20 19.8369 20C20.1191 20 20.3878 19.8955 20.5919 19.7056C21.0282 19.3028 21.0407 18.6357 20.6231 18.2157ZM9.28256 2.1068C12.6941 2.1068 15.4704 4.78425 15.4704 8.07455C15.4704 11.3659 12.6952 14.0433 9.28256 14.0433C5.8731 14.0433 3.09783 11.3659 3.09783 8.07455C3.09783 4.78525 5.8731 2.1068 9.28256 2.1068Z"
          fill="#4C4CA8"></path>
      </svg>
      <a class="hide-icon" id="launch-query">
                  <svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M5.17422 10L0 4.88796L1.29355 3.60976L5.17344 7.4436L12.7064 0L14 1.2782L5.17422 10Z" fill="#2EE5AC"></path>
                  </svg>
                </a>
    </div>
  </div>
</form>

Text Content

User manualDevelopersFAQAcademy

User Manual

 * User manual
 * Developers
 * FAQ
 * Academy


CREATE A WIDGET FROM A TO Z IN THE WIDGET EDITOR

WRITTEN BY JULIE TRENQUE

Updated on 01/27/2022

5 min

Intermediate




CREATE AND MANAGE YOUR WIDGETS

CREATE A WIDGET FROM A TO Z IN THE WIDGET EDITOR

CREATE A WIDGET FROM A TEMPLATE IN THE GRAPHIC EDITOR

CREATE A WIDGET FROM CODE

ASSOCIATE A WIDGET WITH A CAMPAIGN

MANAGE YOUR WIDGETS

WAS THIS CONTENT USEFUL?

Yes No
 * User manual
 * Create and manage your widgets
 * Create a widget from A to Z in the Widget editor

 * Create a new widget
 * Structure of the widget editor
   * Header
   * Sidebar
 * Add an element
 * Design an element
   * Select an element
   * Hover over an element
   * Click on an element
 * Add an animation
 * Associate events and actions
   * Events
   * Actions
 * Simulate
 * Save / Activate


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:

 * Blank popin
 * Blank banner bottom
 * Banner top
 * Simple emailing popin
 * One column emailing popin
 * Two columns emailing popin
 * Simple banner




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

TEMPLATE DROPDOWN

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

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

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


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/or 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.


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.


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.





SHARE




IN THIS ARTICLE :

* Create a new widget
* Structure of the widget editor
  * Header
  * Sidebar
* Add an element
* Design an element
  * Select an element
  * Hover over an element
  * Click on an element
* Add an animation
* Associate events and actions
  * Events
  * Actions
* Simulate
* Save / Activate


RELATED ARTICLES

Create and manage your widgets


CREATE A WIDGET FROM A TEMPLATE IN THE GRAPHIC EDITOR

This article is about A/B testing. If you want to create a widget from code,
please read this documentation article. If (...)
Create and manage your widgets


CREATE A WIDGET FROM CODE

We offer a library of widgets to use into experiments. You can integrate these
widgets inside your pages or above them. (...)
Create and manage your widgets


ASSOCIATE A WIDGET WITH A CAMPAIGN

In order to associate a widget, it must be created and activated. You haven’t
created a widget yet? Create a (...)

✓
Thanks for sharing!
AddToAny
More…



PLATFORM

 * A/B testing Client-side
 * Full Stack Experimentation
 * Personalization


KAMELEOON

 * Company
 * Clients
 * Contact us


RESOURCES

 * Developer documentation
 * Blog
 * Release notes

Subscribe to our newsletter