Widgets

Different widgets are available for your personalizations. They can be either inside your pages or above them.

Select the widget of your choice by clicking on the “Add” button on the bottom right of each widget.

Once you have selected a widget, you can unselect it by clicking on “Widgets” in the path on the top of the window.

Countdown banner

Choose this widget to display a countdown banner on your website. 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.

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.

Banner 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 “Headband width” and “Headband height” appear to let you choose your size. Use the arrows or type in the value of your choice to resize the banner.

Banner position

If the widget is inside the content of your pages

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 the widget is above your pages

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 Kameleoon Graphic editor. For further information, please read our articles Creating a new CSS selector (A/B testing) and CSS selector examples.

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

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.

Add text or HTML on the right of the countdown

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

To do so, type in your text in the corresponding field.

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.

 

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 https://docs.google.com/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 on the personalization creation page.

Form size

Then, define the size of your form. By default, the size is set on 600 x 200 pixels.

Form position

If the widget is inside the content of your pages

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)

If the widget is above your pages

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 Kameleoon Graphic editor. For further information, please read our articles Creating a new CSS selector (A/B testing) and CSS selector examples.

Display for the following 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.

 

Options

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

iAdvize

You can add iAdvize as a web personalization widget above your pages.

iAdvize account ID

Fill in your iAdvize ID.

Plateform

Select your platform: standard or high availability.

Display for the following 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.

Social sharing panel

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 social services are available: Facebook, Twitter, Linkedin, Viadeo, Google plus, Instagral and Pinterest.

You would like to find another network? Please share it with us!

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

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 panel or on the top of a vertical panel.

Share

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

Banner orientation

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

Banner position

If the widget is inside the content of 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 the widget is above your pages

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 Kameleoon Graphic editor. For further information, please read our articles Creating a new CSS selector (A/B testing) and CSS selector examples.

Display for the following 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.

Margins

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

 

 

Have more questions? Submit a request
Powered by Zendesk