Add a widget from the library

portrait de l'auteur Julie Trenque

Written by Julie Trenque

Updated on 22/09/2020

5 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 on 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 best suits you to then 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, don’t forget to click on “Save” to validate the creation of your widget!

Cookie information banner

This widget uses a banner to inform your visitors about the use of cookies.

Text of message

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

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

If you don’t want these conditions, then disable the option by switching the toggle to “NO”.

Position

The information banner may appear at the bottom (footer) or the top (header) of your page. Either way, it will be “sticky”: i.e. 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.

Don’t forget to click on “Save” to validate the creation of your widget!

Countdown banner

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

Date and time

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

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

Click on “Choose a time” to set the time your countdown will end. Use the arrows to change the hours and minutes, then click on “OK” to validate.

Clickable banner

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

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

Text

If you want, you can add text to your banner.

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

Background color

The background is black by default, but you can choose any background color.

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

Alternatively, 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 choose a custom size.

To do this, select “Custom size”.

The “Banner width” and “Banner height” fields will appear, enabling you to choose the size required. 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 in a precise position.

If you choose “In 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 horizontal or vertical alignment, check the corresponding box.

  • Horizontal alignment: you can align your content to the left, to the center or to the right.
  • Vertical alignment: you can align your content to the top, to the center or to 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.

Don’t forget to click on “Save” to validate the creation of your widget!

Visits counter

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

This can be particularly useful on a product page, to let the customer know how popular the product is and encourage them to purchase it.

Description text

The text entered here is what will appear on your page and be seen by your visitors. 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 specific 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

Here, you can specify the minimum number of visits from which the counter will be displayed on the page.

In our example, 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 set the minimum number of visits relatively high; otherwise, the counter is likely to be counter-productive!

Number of visits data recovery

Code integration

To integrate the “Visit counter” widget into an experiment or personalization, you first need to integrate the registerProductPage API into your website.

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

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

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:

  • Either by the application of custom data;
  • Or 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.

Don’t 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 into 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 at 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 arrows on the diagram. You can also choose the position more precisely on the X axis (horizontal) and the Y axis (vertical) by 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, in 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.

Don’t forget to click on “Save” to validate the creation of your widget!

Tooltip

Adding a tooltip to an element of your website enables you to provide visitors with additional information 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

Here, you can select the type of tooltip that suits you best: with or without an 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:

  • By hovering over an existing element;
  • By clicking 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 appearance 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) after 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 has been added to your experiment, you can of course associate the tooltip with a specific element and directly use the editor to modify the text it contains.

Don’t 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

Enter your iAdvize ID.

Platform

Select your platform: this can be 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.

Don’t forget to click on “Save” to validate the creation of your widget!

Social sharing bar

You can add a social sharing bar, 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, no network is selected. You will find the available social media in the “Inactive services” column.

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

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

Once you have selected your media, you can set their order of appearance by dragging and dropping them. The first on the list will appear on the left of a horizontal bar or on the top of a vertical bar.

Share

By default, the links are already defined; however, if you wish, you can 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 a horizontal bar (with the 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 in 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 in 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 web page.

Don’t 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 them 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 the action to record 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 will suggest content 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 text. If you don’t 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 axes.

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, in the background, will be darkened to make the pop-in more obvious;
  • Record information: check to measure and memorize the number 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.

Don’t forget to click on “Save” to validate the creation of your widget!

Newsletter subscription

Invite your visitors to give you their email address and subscribe to your newsletter! To do this, add our specific widget to your campaign.

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.

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 and switch it from “NO” to “YES”.

Background

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

Data collection

Indicate here how the email addresses entered by your visitors should be retrieved and stored. Then enter the information 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 with 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, in 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.

Don’t forget to click on “Save” to validate the creation of your widget!

Video pop-in

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

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

Don’t forget to click on “Save” to validate the creation of your widget!

Redirection banner

This adds a static banner to the web page of your choice to warn users that a redirect is in progress. This widget is ideal to reassure your customers when you apply a redirect to a page on your website. 

Content

You can add text or an image to your banner.

To do this, 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 time).

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). Either way, it will be “sticky”: i.e. it will be displayed over the content of the page, whether or not the user scrolls on 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.

Don’t forget to click on “Save” to validate the creation of your widget!

  • In this article :