Skip to main content

Set up and launch a personalization

To launch your personalization, you must log in to the Kameleoon app.

Access the personalization creation page​

You can create a new personalization in the Personalization dashboard.

Click Experiences > Personalization

Click New Personalization.

A pop-in opens. The pop-in lets you specify your new personalization's name and the website on which you want to configure the personalization (if your account has multiple websites).

Name your personalization​

The top of the personalization creation pop-in displays your personalization's name. You can also add a description and tags.

Define an exposed segment​

You must know which segment will be exposed to your personalization during its creation.

Click Select an existing segment to display the list of available segments. If you have not created a segment, click Add a new segment to open the segment builder.

Once you have selected a segment, the bottom of the pop-in displays its conditions.

For more information about creating segments, refer to this article.

Choose a personalization type​

You have three options:

  • Create a personalization in your page's content.
  • Create a personalization above your page's content.
  • Create a personalization via email.

Click on one of these options to unroll the associated menu.

In your page content​

To display your personalization directly in your pages' content, several options are available:

  • via an image
  • via the graphic editor
  • via HTML
  • via CSS/JavaScript
  • using a widget

Via an image​

Kameleoon allows you to import an image from your computer or the internet.

Image selection​

To select an image, type its URL into the corresponding field, or import a file from your computer.

To delete a selected image, hover over the image and click Delete.

Image size​

If the selected image is exactly the size you want, check the box next to Conform to source image. The image will not be resized.

If you want to resize the image, check the box Resize the source image. The Image width and Image height fields appear, allowing you to adjust the image format.

note

The two fields are independent. To resize an image symmetrically, you must fill both fields correctly.

note

If you check the Resize source image box without changing dimensions, the personalization won't be activated.

CSS selector​

To define your image's position on the page, you must specify a CSS selector.

To create a CSS selector, you can ask your developer for help, or use Kameleoon's Graphic editor.

Position relative to the selector​

You can also choose your image's position:

  • as a replacement of the element (selected by default)
  • before the element
  • after the element

Redirection URL after click​

To add a link to your image, indicate the URL in the corresponding field.

The URL you enter will open in a new window if the visitor clicks anywhere on the image.

Via the graphic editor​

If you are using Kameleoon for A/B testing, you can use variations created in your A/B experiments in your personalizations. Select the variation you want to use from the drop-down list.

If you are not performing A/B experiments, you can still access the Graphic editor to create variations for your personalizations.

Via HTML​

Your HTML code​

To make advanced changes to your page, you can add HTML code.

CSS selector​

To set your item's location on the page, you must specify a CSS selector.

To create a CSS selector, you can ask your developer for help, or use Kameleoon's Graphic editor.

Position relative to the selector​

You can also choose your personalization's position relative to the selector:

  • replacing the selected element (selected by default)
  • before the element
  • after the element

Redirection URL after click​

You can add a link to your element. Indicate the URL in the corresponding field.

The URL you enter will open in a new window if the visitor clicks your element.

Via CSS/JavaScript​

If you want to create a complex personalization, you might have to make in-depth modifications to your website's pages.

You can add CSS or JavaScript code directly in you page's HTML code to create your personalization.

CSS​

Kameleoon might load before your CSS style sheet, which may cause an existing CSS rule to crush a new CSS rule. To avoid this issue, add an !important attribute to the CSS rules of your choice to ensure it will load before the existing CSS rule.

For example: div#button{background-color : red !important;}

JavaScript​

Kameleoon provides an API and other features that we strongly recommend using when writing your JavaScript code. Note that Kameleoon does not include jQuery. Kameleoon may load before jQuery; however, jQuery must load before running your variation's JavaScript code. To ensure jQuery loads, use this code:

  Kameleoon.API.Core.runWhenConditionTrue(function(){
 return typeof jQuery != "undefined"; 
 //allows to check that jQuery is loaded. Returns True if it is, or False otherwise. Kameleoon will execute this condition again every 200ms.

}, function(){
 //Enter here the code you want to execute in your variation. For example if you want to change the text of a block and this block has the id "block-2345", you can use the following Kameleoon API function

 Kameleoon.API.Core.runWhenElementPresent("#bloc-2345", function(){

 //Enter here your JavaScript code
 jQuery("#bloc-2345").text("My new text");

 });

}, 200);

If you want more information about Kameleoon.API.Core, you can read our documentation for developers:

Above your pages​

This type of personalization lets you add a pop-in, sticky block, or widget.

Pop-in​

A pop-in is a window opening in your webpage above its content. It can appear when the page loads or after an event (for example, a click on the Add to basket button).

Choose which method to use in the drop-down menu:

  • From an image
  • From a blank template
  • From HTML code
  • From Target2sell

From an image​
Image selection​

You can use an image as a pop-in on your website. To do so, click From an image.

To select an image, enter its URL or select a file on your computer.

To delete an image you selected, place your cursor above the image and click Delete.

Pop-in location on the page​

By default, the pop-in is located in the page's center, but you can choose its location by clicking an arrow in the diagram. You can also choose the position on the x-axis and y-axis.

Image size​

To keep the dimensions of your file, check Identical to source image. However, if you want to resize the image, check Resize source image. The fields Image width and Image height will appear, letting you resize the image.

note

These fields are separate. To resize an image symmetrically, ensure you fill in the fields correctly.

Display for the following devices​

You can decide the devices on which you'd like to display your personalization. By default, all devices (computer, smartphone, and tablet) are selected. Click any device's icon to deselect it.

Once a device is deselected, a new line appears letting you select a specific image for this device. If you do not add an image, your personalization will not display on this device.

note

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

Animation effects for your pop-in​

You can add several animation effects to your pop-in: fade, slider, zoom in, zoom out, and shaker. You can also choose when the animation triggers: when the pop-in opens, when it closes, or both. If you select Slider as an animation, you also need to choose its starting point.

Redirection URL after click​

You can redirect users to a URL. Users clicking anywhere on your pop-in will be redirected to your specified URL. To enable URL redirection, enter a URL in the corresponding field.

Options​

Two options are available:

  • Add a semi-translucent background: The background is darkened to make the pop-in more visible.
  • Close pop-in if visitor clicks outside: The user can close the pop-in with the close icon or by clicking anywhere outside the pop-in.

From a blank template​

Two basic templates are available, both consisting of an image and text. Click the template of your choice to select it.

Image selection​

To select an image, enter its URL or import it from your computer.

To delete an image that is selected, hover your cursor over the image and click Delete.

Pop-in text​

Place your text in the text field. You can choose your text's size and color. You can also choose the background color.

Pop-in location on the page​

By default, the pop-in is located in the page's center, but you can choose its location by clicking an arrow in the diagram. You can also choose its position using the x-axis and y-axis.

Image size​

To keep your file's dimensions, check Identical to source image. However, if you want to resize the image, check Resize source image. The fields Image width and Image height will appear, letting you resize the image.

note

These fields are independent. To resize an image homothetically, ensure you fill in the fields correctly.

Display for the following devices​

You choose the devices on which your personalization displays. Click a device's icon to deselect it. By default, all devices are selected.

Once a device is deselected, a new line appears allowing you to select a specific image for the device. If you do not add an image, your personalization will not display on that device.

note

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

Pop-in animation effects​

You can add several animation effects to your pop-in: fade, slider, zoom in, zoom out, and shaker. You can configure when the animation triggers: when the pop-in opens, when it closes, or both. You can also choose the slider animation's starting point.

Redirection URL after click​

You can choose a redirection URL. Users clicking anywhere on your pop-in will be redirected to this URL. To set up URL redirection, enter a URL in the corresponding field.

Options​

Two options are available:

  • Add a semi-translucent background: Your website's background will be darkened, emphasizing the pop-in
  • Close pop-in if visitor clicks outside: The user can close the pop-in with the close icon or clicking anywhere outside the pop-in.

From HTML code​
Your HTML code​

Enter your pop-in's HTML code.

Pop-in location on the page​

By default, the pop-in is located in the page's center, but you can choose its location by clicking an arrow in the diagram. You can also choose its position using the x-axis and y-axis.

Animation effects for your pop-in​

You can add several animation effects to your pop-in: fade, slider, zoom in, zoom out, and shaker. You can configure when the animation triggers: when the pop-in opens, when it closes, or both. You can also choose the slider animation's starting point.

Redirection URL after click​

You can choose a redirection URL. Users clicking anywhere on your pop-in will be redirected to this URL. To set up URL redirection, enter a URL in the corresponding field.

Options​

Two options are available:

  • Add a semi-translucent background: Your website's background will be darkened, emphasizing the pop-in
  • Close pop-in if visitor clicks outside: The user can close the pop-in with the close icon or clicking anywhere outside the pop-in.
From Target2Sell​

If you want to use Target2Sell, fill in your identifier. Target2Sell then highlights a product.

Pop-in location on the page​

By default, the pop-in is located in the page's center, but you can choose its location by clicking an arrow in the diagram. You can also choose its position using the x-axis and y-axis.

Pop-in animation effects​

You can add several animation effects to your pop-in: fade, slider, zoom in, zoom out, and shaker. You can configure when the animation triggers: when the pop-in opens, when it closes, or both. You can also choose the slider animation's starting point.

note

If you want to use an animation effect, you must check the Allow the injection of jQuery box in your configuration options, accessible through the Preferences page. To do so, go to the Personalization module in Configuration.

Redirection URL after click​

You can choose a redirection URL. Users clicking anywhere on your pop-in will be redirected to this URL. To set up URL redirection, enter a URL in the corresponding field.

Options​

Two options are available:

  • Add a semi-translucent background: Your website's background will be darkened, emphasizing the pop-in
  • Close pop-in if visitor clicks outside: The user can close the pop-in with the close icon or clicking anywhere outside the pop-in.

Sticky block​

A sticky block is a banner on your entire page width, usually located in or above the header or footer.

Choose which method to use in the drop-down menu:

  • From an image
  • From HTML code
  • From Target2Sell

From an image​
Image selection​

To use an image as a sticky block, select From an image.

To select your image, enter its URL or import a file from your computer.

The image will take the entire page width: if your image's height is too high, it will take up too much space on your webpage.

To delete a selected image, hover your cursor over the image and click Delete.

Sticky block position​

Three options are available:

  • In the header
  • In the footer
  • At a precise position

Display for the following devices​

You can hide your personalization on certain devices. By default, all device types are selected. Click a device's icon to deselect it.

Once a device is deselected, a new line appears, letting you select a specific image for the device. If you do not add an image, your personalization will not display on that device.

note

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

Redirection URL after click​

You can choose a redirection URL. Users clicking anywhere on your pop-in will be redirected to this URL. To set up URL redirection, enter a URL in the corresponding field.

The link will open in a new window if the visitor clicks anywhere on your pop-in.

Options​

Two options are available:

  • Add a semi-translucent background: Your website's background will be darkened, emphasizing the pop-in
  • Close pop-in if visitor clicks outside: The user can close the pop-in by clicking the close icon or anywhere outside the pop-in.

From HTML code​
Your HTML code​

Enter your pop-in's HTML code into the field.

Redirection URL after click​

You can choose a redirection URL. Users clicking anywhere on your pop-in will be redirected to this URL. To set up URL redirection, enter a URL in the corresponding field.

Options​

Two options are available:

  • Show the sticky block on scroll: The sticky block will appear only when the user scrolls on the page.
  • Shift the content to avoid overlay: The sticky block will not be positioned above your content. For example, if you use a sticky block in the header, the top of your page will be offset so the sticky block does not hide your page.

From Target2Sell​

If you want to use Target2Sell, enter your identifier. Target2Sell then highlights a product.

Redirection URL after click​

You can choose a redirection URL. Users clicking anywhere on your pop-in will be redirected to this URL. To set up URL redirection, enter a URL in the corresponding field.

Options​

Two options are available:

  • Show the sticky block on scroll: The sticky block will appear only when the user scrolls on the page.
  • Shift the content to avoid overlay: The sticky block will not be positioned above your content. For example, if you use a sticky block in the header, the top of your page will be offset so the sticky block does not hide your page.

Widgets​

You can use widgets for your web personalizations.

Click Add to select a widget.

After selecting a widget, you can deselect it by clicking Widgets in the path at the top of the window.

For more information about widgets, please read the relevant documentation.

Via email​

This type of personalization lets you email your visitors if they fulfill specific targeting conditions.

note

You can only create one personalization at a time. For example, it is not possible to add a pop-in and a sticky block at the same time.

Set up conversion goals​

You can either create a new goal and associate it with your personalization, or associate an existing goal.

Create a new goal​

To create a new Kameleoon goal, click Settings > Goals.

By default, the Engagement goal is created. To add a goal, click New Goal.

In the pop-in that opens, several goals are available:

  • Engagement: This goal is achieved if the visitor visits other pages after the landing page.
  • Click tracking: This goal is achieved if the visitor clicks on a specific element you defined.
  • Scroll tracking: This goal is achieved if the visitor scrolls beyond a specific part of your page.
  • Access to a page: This goal is achieved if the visitor reaches a specific page.
  • Number of page viewed: This goal is achieved if the visitor visits a certain number of pages
  • Time elapsed: This goal is achieved if the visitor spends a predefined amount of time on your website.
  • Custom goal: For more complex goals, you can create custom goals via a Kameleoon API call.

For more information about Kameleoon goals, read this article.

Select the website for which you want to create a goal, then the type of goal you want to create. Enter your goal's name and click Create. Once you create your goal, select it when creating or activating your personalization.

Associate an existing goal​

You can choose the goal for a segment using the drop-down list.

You can associate one or more goals with your personalization. If you select multiple goals, you must set one as the primary goal.

If you have not created your personalization's goal, click Create a new goal. This action will open a pop-in and let you create a new goal.

For more information on goal creation, see Setting a goal in a personalization.

Set up reporting tools​

Select the reporting tools which you want to display your personalization's results.

By default, Kameleoon is set up as a reporting tool and cannot be deleted.

Define display settings​

Several advanced settings to set your personalization's exposure are available.

Five parameters are available:

  • Capping
  • Scheduling
  • Micro targeting
  • Prioritization
  • Add a scenario

If you do not set up these parameters, Kameleoon will use their default settings.

Capping​

Capping allows you to limit your personalization's display to manage marketing pressure on visitors.

Overall capping​

Here, you can choose the percentage of your segment exposed to your personalization. By default, 100% of the segment is exposed.

You can also decide to stop your personalization when it has been exposed to a certain number of visitors.

To do so, select The total number of visitors is above, then define:

  • The number of visitors
  • If all visitors, define those who completed a certain goal and those who didn't.

Capping by visitor​

You can also set up capping by visitor by clicking + Add capping options per visitors.

By default, there is no capping by visitor, meaning the targeted visitors are systematically exposed to your personalization. Capping by visitor allows you to:

  • Limit the exposition frequency for each unique visit.
  • Limit the exposition frequency in time, regardless of the number of visits.
  • Establish a minimum delay between two expositions.
  • Stop exposing a visitor if the visitor has been exposed a certain number of times or converted on a specific goal.

You can use several capping by visitor options. To cancel capping by visitor, click Reset frequency capping options per visitor at the bottom of the page.

note

When you set up a visitor-based capping (for example, limiting exposure to one display per visitor), you may observe discrepancies in the results, like not having the exact same number of visits and visitors. This discrepancy occurs because Kameleoon stores capping information in the browser's local storage. Visitor browsing behavior may affect this data. For instance, local storage may be cleared after the visitor closes their browsing session on your website, or if they prevent Kameleoon from writing to the local storage. We usually observe up to a 10% a discrepancy depending on the website.

Example​

Here is an example:

In this example:

  • Only 85% of the segment is exposed to the web personalization.

A single visitor will be exposed on maximum:

  • two times during the same visit
  • four times every six hours
  • one time every 3,600 seconds (once per hour)
  • six times in total

Scheduling​

You can schedule your personalization for one or several date ranges. By default, the personalization is displayed at all times.

In the Planning section, click + Add a schedule. You can add as many date ranges as you want to.

Start/end date​

If you want to plan your personalization, you must add a start date.

You can also add an end date, but it isn't mandatory. If you want to add an end date, click Edit. To delete an end date, click the red X associated with the date.

Personalization schedule​

The personalization schedule lets you choose the dates and hours when your personalization will display. Click Edit to create your schedule.

By default, the hours are set up from 00:00 to 00:00. It is a whole day (from midnight to midnight).

You can add several schedules to your date range. To do so, click Add a date range.

Example​

Here is an example:

In this example, the personalization is planned from July 1st to September 30th 2021 (3 months).

Within this date range, the personalization will be active:

  • Monday to Friday from 11:00 a.m. to 2:00 p.m.
  • All the weekend

You can delete the date ranges and end date by clicking the red Xs. Only the start date is mandatory.

Once a schedule has been defined, the Launch button at the bottom of the page becomes Plan.

Micro targeting​

Even if all of your conditions aren't defined, you may want to display your personalization. To do this, use Micro-targeting.

Two options are available:

  • Enable the display when all of your segment's targeting conditions are observed (by default)
  • Enable the display when the active targeting condition's cumulative weight is sufficient

All targeting conditions of your segment are observed​

This is the selected option by default. If a visitor does not fulfill all the targeting conditions that you chose while creating your segment, the visitor isn't exposed to the personalization.

The cumulative weight of the active targeting conditions is sufficient​

When you create your targeting segment, you can add a weight to each of your conditions. By default, each condition has a weight of 1, but you can customize this value to rank your conditions. For more information about segment creation, read our article Configuring a segment.

This option lets you define the minimum weight needed to activate your personalization.

Example​

For our example, we will set up our segment with these parameters:

  • Condition A - weight 1
  • Condition B - weight 4
  • Condition C - weight 2
  • Condition D - weight 2

If you set "7" as the required cumulative weight, the total weight of active conditions must be at least 7 to activate web personalization.

In our example, the combined weight of conditions A+B+C is 7, which meets the requirement for activation. Other valid combinations include B+C+D (8), A+B+D (7), and A+B+C+D (9). Any other combination falls short of the required cumulative weight and will not activate personalization.

Prioritization​

Some visitors may belong to multiple segments. For example, one personalization might display a pop-in for new visitors, while another triggers a pop-in based on the weather. In this case, a first-time visitor on a rainy day could see both personalizations.

Priority​

The Prioritization option allows you to choose which personalization should be displayed in cases of conflict.

By default, all personalizations have the same priority (1), but you can choose a higher priority for more important personalizations.

In case of conflict, if all personalizations have the same priority, they will display simultaneously.

note

Prioritization applies to personalizations of the same type. Two personalizations of different types (for example, a pop-in image and a pop-in HTML) will display simultaneously even if they don't have the same priority. If you want to reduce marketing pressure on your visitors, you must set up capping.

See the priority of other personalizations​

To define your personalization's priority, you can look at your other active personalizations' priority without leaving the page.

Click See the priority of other personalizations.

A pop-in opens, allowing you to consult the list of your active personalizations and their priorities.

note

These priorities apply when a visitor is exposed to the same personalizations at the same time. If they are not exposed to the same personalizations at the same time, you can use scenarios.

Example​

To determine which personalization should display, the active personalizations are ranked by priority and type. The personalizations with the highest priority will display.

For example:

  • Personalization 1 : priority 1 type A
  • Personalization 2 : priority 2 type A
  • Personalization 3 : priority 1 type B

Personalizations 2 and 3 will display: personalization 2 has the highest priority for type A and personalization 3 is the only type B personalization.

If we add to the example:

  • Personalization 4 : priority 2 type A

Personalizations 2, 3 and 4 will be displayed. However, you can, in the personalization module, select Disable simultaneous display of personalizations of the same type. In this case, one of the personalizations will be chosen randomly. Priorities apply when a visitor is exposed to multiple personalizations at the same time.

To select this option, navigate to Kameleoon's left sidebar and click Admin > Projects.

On the website's card, click Configuration to make modifications. Then, click Personalizations.

At the very bottom, a toggle allows you to forbid simultaneous display of personalizations of the same type.

Don't forget to validate.

Add a scenario​

You can set a personalization to be shown based on the previously displayed personalization.

Add a condition​

To define a new scenario, click Add a condition.

If you want to delete a condition, click Delete this condition below the condition you want to delete.

Set up a condition​

Choose the condition's settings to create your scenario.

Example​

Here is an example:

In this example, the personalization will only display if:

  • At least one other personalization has already been displayed during this visit.
  • There was not more than two other personalizations displayed on this page.

Launch​

When you have entered all parameters, several choices are possible:

  • Save: allows you to save a draft of your personalization. You will find it in the Personalization page.
  • Simulate: allows you to preview your personalization before uploading it to your website. To learn more about simulation, read the Simulate a campaign article.
  • Launch: once the personalization is online, you can find it in the Personalization tab.
  • Plan: if you have set up a schedule, the Launch button becomes Schedule.
note

There may be a short latency time (up to 10 minutes) between launching your personalization and its visibility on your website.