Create and manage your widgets

In the Kameleoon App, click on the Configure menu and then on Widgets. On the Widgets Dashboard, click on the New widget button. You can choose between 2 options: from code or using the editor. Learn how to create a widget using code Learn how to create a widget from A to Z using the […]

Access the Widgets Dashboard To access the Widgets Dashboard from the App, use the left side menu > Configure > Widgets. Structure of the Widgets Dashboard Header: button to create a new widget Search bar: search tool; number of created widgets Cards: information on the widgets; status; Edit button; three-dot menu (on the right) to apply actions to […]

We offer a library of widgets to use into experiments. You can integrate these widgets inside your pages or above them. For more information on these predefined elements, read our documentation. You can also create your own widget templates by coding them and use them in experiments and personalizations. This way you can make sure […]

Depending on your plan (Starter or Premium), some features of the Kameleoon Widget Studio may or may not be accessible. The Starter Plan provides essential tools to create very simple widgets, including starter templates, basic elements, graphic editing & positioning, and responsive design, with a limit of two events. The Premium Plan offers everything in […]

Access the Widget Studio 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 […]

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 […]

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. TYPOGRAPHY Heading Text Link Scrolling Text MEDIA iFrame Image Video Html Slider Countdown Click-to-copy Progress bar (visually indicate how far the user is from achieving a goal) Step Progress bar […]

Access the AI widget creation pop-in On the Widget Studio homepage, you can create a custom widget using Kameleoon’s AI generator. Select the Create with AI option. Enter your prompt Important: This feature is in beta. AI-generated widgets are currently limited to a combination of only the following elements: text, text area, heading, image, button, […]

Thanks to the Kameleoon Widget Studio, your widget is adaptable to your visitors’ devices. Your widget is automatically responsive, but you can make changes, such as not displaying certain elements on mobile devices, in order to optimize the user experience. Switch between devices At the top of the Widget Studio, you can change the view […]

The translation management option enables you to set up and use multiple languages in your widget. With this feature, you can make your widget accessible to a broader audience by providing translations in various languages. Activate the translation management To activate the translation feature, click on the Translations section of the Widget Studio. Then check […]

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.

In the Events section of the side panel, you can 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 […]

Once you have edited the content of your widget, and possibly added animations and events, we recommend that you simulate your widget before activating it and associating it with one of your Kameleoon campaigns. The simulation button is located at the bottom right of the Widget Studio. By clicking on this button, the Widget Studio […]

You need to activate a widget to be able to use it in a campaign. Save Your changes are automatically saved. You can also 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. Activate When your […]

In the Widget Studio, you can build fully functional surveys (e.g. NPS, CSAT, satisfaction forms, product feedback) using a set of dedicated Survey elements. Each element comes with its own customization. The Survey element suite allows you to: Build structured, branded NPS and CSAT widgets Collect qualitative and quantitative feedback Apply detailed validation rules Export […]

You can trigger specific actions based on the values provided by your visitors when they interact with your survey. Conditional logic allows you to show or hide survey elements or screens depending on each user’s input. Show or hide an element based on a visitor’s survey response You can configure elements or screens to appear […]

In addition to customizing individual survey elements, Kameleoon also provides global settings that define how your survey behaves and how responses are handled. The Survey Settings tab appears automatically in the Widget Studio when at least one survey element is added to your widget. It allows you to configure submission behavior and choose how and […]

With the Kameleoon Widget Studio, you can create and display a fully customized form on your website. We propose you to discover how to build your form through a concrete use case.  In details, in the following chapters, you will learn how to: Design your form Set up rules on your form fields Create conditional […]

Once you have created your new widget in the Widget Studio, it is time to add elements to it to build your form. Form elements available Click on the left menu to add an element. Scroll down to find the Form section. Several types of elements are available. You can mix and match to create […]

You can trigger specific actions based on the values provided by your visitors when they fill out your form. You can show or hide form elements or screens according to each user and the way they interact with your widget. Show/hide an element based on the value filled by the visitors in the form It […]

You can set rules for an element, to make sure you capture the form data in the format you expect: is this a mandatory field? should we check the content of the field before validating it? Required option It is possible to set up mandatory fields in your form widgets. Thus, if the information has […]

If you want to send your form data to a Google Sheet, the article you are looking for is this one! On the Events page, once you have already created an Event trigger, click on Add action > Request > Send data to. On the Action configuration screen, fill the informations. Request name: will be […]

Don’t have an existing form on your site or a webservice you can call to collect your form data? You can send all the data filled in by your users to a Google Sheet. If you want to send your form data using a URL of your site or via a web service, the article […]

Once you have designed the elements of your form widget, established rules and set up the sending of the data, you can create additional screens to inform your visitors about the success or error in sending the form. Design your screens first, then set up Events to choose when they should be displayed. Design your […]

You can add sliders to your widgets to make them more dynamic. In this article, you will learn how to: Add a slider Edit your slider Position your slider Customize the transitions between your slides Add a slider Click on Add element (first item of the left menu) or on the plus icon appearing at […]

In this article, you will learn how to: Add a recommendation block Edit your recommendation block Position your recommendation block Add a recommendation block Click on Add element (first item of the left menu) or on the plus icon appearing at the right of each element listed in the element list (when Design left menu […]

The wheel of fortune widget is an element you can add to your website to encourage user participation and boost engagement. Follow these steps to insert and customize a wheel of fortune into your Kameleoon widget. Add the wheel of fortune element In the widget editor, locate the left sidebar with various elements. Scroll down […]

You can add HTML code into your widget, and insert it into a block that you can position or resize like any other element. In this article, you will learn how to: Add a HTML element Edit HTML code Position your HTML element Add a HTML element Click on Add element (first item of the […]

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. In this article, you will learn how to: Add custom CSS  Apply your CSS code to widget elements Add JS code Change code view How Custom code […]

You can export a graphic widget as a .json file from one account and import it into the Widget Studio of another account. First, on the Widgets Dashboard, open the 3-dot menu and click on Export to .json. Then, open the Widget Studio to create a new widget and choose Import a widget form .json […]

In order to associate a widget, it must be created and activated. You haven’t created a widget yet? Create a widget from A to Z in the Widget Studio, from our template library or from code. You have created a widget but it is not yet activated? To activate it, please follow these instructions. Note: […]

A new version of the Graphic Editor is currently being deployed, this documentation will be updated soon. This article is about A/B testing. If you want to create a widget from code, please read this documentation article. If you want to create a widget in the Widget Studio and associate it with a personalization, please […]

On the personalization creation page, choose a type for your personalization: in your page content or above your pages. Just click on one of these options in order to unroll the associated menu. Click on Widgets > Choose a widget. The Add a widget page will open. Please choose one of the active widgets to […]