Add a widget from the library

portrait de l'auteur Julie Trenque

Written by Julie Trenque

Updated on 22/09/2020

11 min

Beginner

Was this content useful?

Different widgets are available for your experiments and personalizations. They can be inside the content of your pages or above them.

Each widget is accompanied by a short explanatory text that introduces you to its function.

To select a widget, click the “Add” button at the bottom right of the widget you want to select.

For some widgets, a small menu will ask you to choose between a display over the page or in the content of the page. Click on the view that suits you best to access the widget settings.

Several pre-formatted widgets are then available:

  • Cookie information banner
  • Countdown banner
  • Visits counter
  • Google form
  • Tooltip
  • iAdvize
  • Social sharing bar
  • Adblocker
  • Newsletter subscription
  • Pop-in video
  • Redirection banner

You can also create your own widget template.

Once the widget is set, do not forget to click on “Save” to validate the creation of your widget!

Cookie information banner

Via a banner, this widget informs your visitors about the use of cookies.

Text message

Fill in the text you want to appear in the banner.

Redirection to terms and conditions

You can include a link to the general terms and conditions related to the use of cookies on your site.

Indicate the text that will be clickable (“Further information”, “Read terms and conditions” …) and the URL to which redirect your visitors.

If you do not want these conditions, disable the option by switching the toggle to “NO”.

Position

The information banner may appear at the bottom or top of your page. In any case, it will be “sticky”: it will remain on the screen even if the user scrolls the page.

Display for devices

With a few simple clicks, you can decide on which devices you want to display your widget: computers, smartphones or tablets. By default, all devices are selected. Click on the icon of your choice to unselect this device.

Note: You can also include or exclude devices when you create your segment.

Do not forget to click on “Save” to validate the creation of your widget!

Countdown banner

This widget allows you to display a countdown on your site. You can choose to display it above your page or inside the content of your page; in both cases the settings to be made are the same, only the choice of position will be different.

Date and time

Start with setting up date and time to define the end of your countdown.

Click on “Choose a date” to see the calendar and define your date. Note that you cannot choose a past date.

Click on “Choose a time” to define the ending time of your countdown. Use the arrows to set up hours and minutes, then click on “OK” to validate.

Clickable banner

You get to choose if the banner will be clickable or not, in other words if the visitor is redirected to an URL when clicking on your banner.

If you select “Yes”, a new field appear allowing you to fill in the URL of your choice.

Text

You can, if you want to, add a text to your banner.

To do so, type in your text in the corresponding field. Some formatting tools are available.

Background color

By default, the background is black, but you can choose any background color.

If you already know it, you can fill in the hexadecimal code of your color, starting with “#”.

Otherwise, click on the colored square to use the color chart and select the color of your choice.

Size

By default, the banner will fill your page width. However, you can chose a custom size.

To do so, select “Custom size”.

The fields “Banner width” and “Banner height” appear to let you choose your size. Use the arrows or type in the value of your choice to resize the banner.

Position

If your widget is above your page:

The banner can be located at the top of your page (header), at the bottom (footer) or at a precise position.

If you choose “At a precise position”, fill in the fields “Position on X” and “Position on Y”.

  • Position on X is the distance, in pixels, between the left border of your website and the beginning of the banner
  • Position on Y is the distance, in pixels, between the top border of your website and the beginning of the banner

If your widget is inside the content your page:

You must indicate a CSS selector to determine the position of the banner.

To create a CSS selector, you can ask your developer for help or use the Kameleoon graphic editor. For further information, please read our article about CSS selector creation.

Alignment

By default, your content will be at the center of your banner. To set up the horizontal or vertical alignment, check the corresponding box.

  • Horizontal alignment: you can align your content on the left, on the center or on the right
  • Vertical alignment: you can align your content on the top, on the center or on the bottom

Display for devices

With a few simple clicks, you can decide on which devices you want to display your widget: computers, smartphones or tablets. By default, all devices are selected. Click on the icon of your choice to unselect this device.

Note: You can also include or exclude devices when you create your segment.

Do not forget to click on “Save” to validate the creation of your widget!

Visits counter

The visit counter widget allows you to display the number of people who have visited the page in a page.

This can be particularly useful on a particular product page, to let the customer know the popularity of the product and push it to purchase.

Description text

The text entered here is the one that will appear on your page and that your visitors will see. In this sentence, [n] is the variable instead of which the number of visits will be displayed. It must therefore appear in the text box.

Counting from

The number of visits that the widget will display will be the number of visits counted since the period you entered here. The counted visits can be those of the past day, the past week or the past fortnight. You can also set a precise date from which visits will be counted.

Counting format

Kameleoon allows you to choose the display format of the number of visits (French, English, German) so that it matches your audience. You can also choose the short format. The number displayed is then rounded to the nearest hundred.

Minimum amount of visits

Specify here the minimum number of visits from which the counter will be displayed on the page.

In our exemple, we want to display the number of visits to show the popularity of items and push the visitor to purchase. It is therefore wise to put a minimum number of visits relatively high, we would otherwise risk having a counter-productive counter!

Number of visits data recovery

Code integration

Integrating the “Visits counter” widget into an experiment or personalization first requires the integration of the registerProductPage API into your website.

The call to the registerProductPage API must be made at each visit, on the pages on which you want to set up a visits counter. Specifically, this is an extra piece of code inserted on the corresponding pages of your website, in the section <head> (it is not visible). The role of this API is to transmit to Kameleoon the information relating to the product sheet: the product ID, its name, its price …

To integrate the API with your website, go to the configuration page: click on “Sites” in the “Administrate” menu of the back-office left side menu.

On the card of your website, click “Configuration”.

In the “General” tab, add the JavaScript code of the registerProductPage API in the “Global custom script” block.

To be valid, the call to registerProductPage API must pass 4 parameters:

  • The product identifier or EAN (required);
  • Its name (required);
  • Its category (optional);
  • Its price (optional).

There are two ways to communicate these settings to Kameleoon:

  • By the application of custom data;
  • Either through a tag management system.

After that, you can call the API completed by the variables you just specified.

Code sample with custom data

  if (location.href.indexOf ("/ r /")! = -1) {/ * Enter here the URLs on which the API must be called * /
 var product_code = Kameleoon.API.CurrentVisit.customData ["productCode"];
 var product_name = Kameleoon.API.CurrentVisit.customData ["productName"];
 var product_category = Kameleoon.API.CurrentVisit.customData ["productcategory"];
 var product_pricing = Kameleoon.API.CurrentVisit.customData ["productPrice"];
 Kameleoon.API.Products.trackProductViewKameleoon(productId, {
 "name": productName,
 "category": productCategory,
 "price": productPrice
});

Code sample with tag management system

  Kameleoon.API.runWhenConditionTrue (function () {
 return typeof tc_vars! = "undefined" && tc_vars ["product_id"]! = "";
 }, function () {
 var productId = tc_vars ["product_id"];
 var productName = tc_vars ["product_name"];
 var productCategory = tc_vars ["product_category"];
 var productPrice = tc_vars ["product_price"];
 window.href = location.href;
 Kameleoon.API.Products.trackProductViewKameleoon(productId, {
 "name": productName,
 "category": productCategory,
 "price": productPrice
});

Then you can validate.

Display for devices

With a few simple clicks, you can decide on which devices you want to display your web personalization: computers, smartphones or tablets. By default, all devices are selected. Click on the icon of your choice to unselect this device.

Note: You can also include or exclude devices when you create your segment.

Do not forget to click on “Save” to validate the creation of your widget!

Google form

You can insert forms in your web personalizations via Google forms. You can either display it inside the content of your page or above it. In both cases, the settings will be the same, only its position will change.

To create your form, go to Google forms and follow the instructions.

Google form URL

Once you have created your form, Google forms gives you a URL to share.

Copy and paste this URL in the “Google form URL” field.

Width and height

Then define the size of your form: its width and height. By default, the size is set on 600 x 200 pixels.

Position

If your widget is above your page

By default, the pop-in is located at the center of the page, but you can choose its location by clicking on one of the arrow on the diagram. You can also choose the position more precisely on the X axis (horizontal) and the Y axis (vertical) when clicking on “Advanced”.

If your widget is inside the content of your page

You must indicate a CSS selector to determine the position of the form.

To create a CSS selector, you can ask your developer for help or use the Kameleoon graphic editor. For further information, please read our article CSS selector creation.

Display for devices

With a few simple clicks, you can decide on which devices you want to display your widget: computers, smartphones or tablets. By default, all devices are selected. Click on the icon of your choice to unselect this device.

Note : You can also include or exclude devices when you create your segment.

Options

Two options are available:

  • Apply a semi-transparent background: your website on the background will be darkened to make the pop-in more obvious.
  • Close the pop-in if the user clicks outside: the user will be able to close the pop-in with the close icon or simply by clicking anywhere outside the pop-in.

Do not forget to click on “Save” to validate the creation of your widget!

Tooltip

Adding a tooltip on an element of your website allows to provide additional information to visitors without overloading the page.

Preview

The preview box at the top of the configuration page is used to verify that the display meets your needs. It is updated in real time according to your modifications.

Type

Select here the type of tooltip that suits you best: with or without arrow. This concerns the shape of the bubble. Test both possibilities and observe the impact in the preview box.

Layout

You can modify the formatting of the tooltip: the background color, the text color and the font size.

Finally, a toggle allows you to optionally set a maximum width: if the text is longer than the width of the bubble, it will be automatically returned to the line. By default, this option is disabled, but you can make it active by moving the button to “YES”.

Display

Several types of tooltip display are available:

  • On hover on an existing element;
  • At the click on an existing element;
  • When the page has loaded;
  • When the item appears on the screen.

Apparition time

This toggle button gives you the possibility to limit the apparition time of the tooltip. By default, it is disabled but one click is enough to make it active. You can then specify the time (in seconds) beyond which the tooltip will disappear.

Display for devices

With a few simple clicks, you can decide on which devices you want to display your widget: computers, smartphones or tablets. By default, all devices are selected. Click on the icon of your choice to unselect this device.

Note: You can also include or exclude devices when you create your segment.

Once the widget is added to your experiment, you can of course associate the tooltip with a specific element and modify the text it contains directly via the editor.

Do not forget to click on “Save” to validate the creation of your widget!

iAdvize

The iAdvize widget can be added above your page.

iAdvize account ID

Fill in your iAdvize ID.

Platform

Select your platform: standard or high availability.

Display for devices

With a few simple clicks, you can decide on which devices you want to display your widget: computers, smartphones or tablets. By default, all devices are selected. Click on the icon of your choice to unselect this device.

Note: You can also include or exclude devices when you create your segment.

Do not forget to click on “Save” to validate the creation of your widget!

Social sharing bar

You can add a social sharing panel, inside the content of your pages or above your pages. In both cases, the settings will be the same, only its position will change.

Seven services are available: Facebook, Twitter, Linkedin, Viadeo, Google Plus, Instagram and Pinterest.

Would you like to add another social network? Please let us know!

Choice of services

By default, there is no network selected. You will find the social network available on the “Inactive services”.

To select a social network, Drag and drop it from the “Inactive services” column to the “Active services” column.

Only the networks located in the “Active services” column will appear in your social sharing bar.

Once your network selected, you can define their order of appearance by drag and drop.  The first on the list will appear on the left of an horizontal bar or on the top of a vertical bar.

Share

By default, the links are already defined, but you can, if you want to, use the same URL for every icon.

Orientation

By default, the bar is vertical and on the left of your screen. You can also create an horizontal bar (icons side by side).

Position

If your widget is above your pages

If your panel is vertical, you can position it on the left, on the right or at a precise position that you will define in pixels, on the X axis (horizontal) and the Y axis (vertical).

If your panel is horizontal, you can position it on the top, on the bottom or at a precise position that you will define in pixels, on the X axis (horizontal) and the Y axis (vertical).

If your widget is inside the content of your page

You must indicate a CSS selector to determine the position of the form.

To create a CSS selector, you can ask your developer for help or use the Kameleoon graphic editor. For further information, please read our article CSS selector creation.

Display for devices

With a few simple clicks, you can decide on which devices you want to display your widget: computers, smartphones or tablets. By default, all devices are selected. Click on the icon of your choice to unselect this device.

Note: You can also include or exclude devices when you create your segment.

Margins

Define your panel margins, in pixels. The margin is the space between your panel and the border of your webpages border.

Do not forget to click on “Save” to validate the creation of your widget!

Adblocker

When an ad blocker is detected on a visitor’s browser, you can display a message to invite him to disable that extension.

Type of action

First, choose a type of action. When Adblock is detected, you can;

  • display a message;
  • or block/disrupt the browsing;
  • or just track down the action to keep the information.

Message type

Your message may appear as a pop-in or a sticky block. Select the one that seems best for you. The examples available on the right of the configuration page can help you.

Title and content of the message

Fill in these fields to add a title and a content to the message. Kameleoon suggests you texts by default but you can also write a custom message.

Formatting the text

You can then format the message text by adjusting its size, color and background color.

Vignette

A vignette can be added to the left of the test. If you do not want to display it, click on “No image associated”. If you want to use the preset Adblock logo, select “Image by default”. To add a customized image instead, click on “Customized Image” and load it in the insert that appears.

Position

The pop-in should be placed on your page: use the arrows to select the center, a side area or a corner.

To indicate a specific position, click on “Advanced” and enter the coordinates on both X and Y axis.

Options

Three options are available:

  • Close pop-in if visitor clicks outside: the user will be able to close the pop-in with the close icon or simply by clicking anywhere outside the pop-in;
  • Apply a semi-translucent background: your website on the background will be darkened to make the pop-in more obvious;
  • Record information: check to measure and memorize the amount of visitors in this situation; you can filter the results of your experiment with this criteria.

Preview

A preview command is available at the bottom of the page. Click on “Preview” to display your message as it will appear on your site.

You can then validate or make changes until you get the perfect widget.

Do not forget to click on “Save” to validate the creation of your widget!

Newsletter subscription

Invite your visitors to send their email address and subscribe to your newsletter! To do so, add our specific widget to your experience.

Preview

The preview box at the top of the configuration page is used to verify that the display fits your desires. It is updated in real time according to your modifications.

Optional content

In addition to the text, the email field and the pop-in button, you can also add a title and/or legal notices with the URL of your choice. You can then modify the details of these elements in the editor.

To add this content, click on the corresponding toggle button to switch it from “NO” to “YES”.

Background

The background of your pop-in can be either a solid color or an downloaded image. Click either of these two options to configure your background.

Data collection

Indicate here how the email addresses entered by your visitors must be retrieved and stored. Then fill in the informations needed.

Via a form on your site

Indicate the URL of the page containing the form and the name of the variable that transfers the email in the form. You can also add some variables to be sent.

Via an external web service

Indicate the URL of the solution that collects the emails, and the name of the variable associated to the email field of your web service. For example, this variable name can be: “email”.

Kameleoon will transmit the information to the chosen service.

Confirmation message

If you activate this option, a confirmation message will be displayed to validate the visitor’s registration to your newsletter.

Display for devices

With a few simple clicks, you can decide on which devices you want to display your widget: computers, smartphones or tablets. By default, all devices are selected. Click on the icon of your choice to unselect this device.

Note: You can also include or exclude devices when you create your segment.

Display options

Two options are available:

  • Apply a semi-transparent background: your website on the background will be darkened to make the pop-in more obvious.
  • Close pop-in if user clicks outside: the visitor will be able to close the pop-in with the close icon or simply by clicking anywhere outside the pop-in.

Do not forget to click on “Save” to validate the creation of your widget!

Video pop-in

With Kameleoon, you can add to a page of your site a pop-in containing a video.

Video URL

First, indicate the URL of your video.

Note: On the main video hosting platforms, you will find this link in the “Share” section under the video.

Size

Here you can adjust the size of your video pop-in.

Select “Adjust the pop-in size automatically” to make the pop-in size automatically adjust to the user’s window and device.

Or select “Define a specific size” if you want to adjust the size of the pop-in yourself.

Display for devices

With a few simple clicks, you can decide on which devices you want to display your widget: computers, smartphones or tablets. By default, all devices are selected. Click on the icon of your choice to unselect this device.

Note: You can also include or exclude devices when you create your segment.

Display options

Three options are available:

  • Add a semi-translucent background: your website on the background will be darkened to make the pop-in more obvious.
  • Close pop-in if visitor clicks outside: the user will be able to close the pop-in with the close icon or simply by clicking anywhere outside the pop-in;
  • Automatically play the video when the pop-in opens.

Do not forget to click on “Save” to validate the creation of your widget!

Redirection banner

Adds a static banner on the webpage of your choice to warn user that a redirect is in progress. This widget is ideal to reassure your customers when you apply a redirect to a page on your site. 

Content

You can add text or an image to your banner.

To do so, type your text in the “Custom content” field:

Or add an image by selecting “Import an image”:

Redirection management

Two scenarios are possible:

  • either the redirection is already managed on the page;
  • or you have to configure it (indicate the URL onto which you want to redirect your visitors, as well as the redirection delay).

Display time

You can choose to remove the banner automatically after the duration of your choice (in seconds).

Position

You can locate the banner at the top of your page (header) or at the bottom of your page (footer). In all cases, it will be “sticky”, that is to say it will be displayed over the content of the page, whether the user scrolls on the page or not.

Display for devices

With a few simple clicks, you can decide on which devices you want to display your widget: computers, smartphones or tablets. By default, all devices are selected. Click on the icon of your choice to unselect this device.

Note: You can also include or exclude devices when you create your segment.

Do not forget to click on “Save” to validate the creation of your widget!

  • In this article :