Personalization in the content of your pages

3

min

quiz

When you create a personalization, you have three possibilities. You can:

  • display the personalization in the content of your pages;
  • display it above your pages;
  • or display it via an email.

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

  • via an image;
  • via the graphical editor;
  • via HTML;
  • via CSS/JavaScript;
  • using a widget.

This article gives details on the display of a personalization in the content of your page. To learn how to display a personalization above your page, go to the dedicated article.

Via an image

Kameleoon gives you the possibility to import an image, from your computer or from the Internet.

Image selection

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

To delete an already selected image, click on the “Delete” button that appears on hover.

Image size

If the chosen 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, enabling you to adjust the image format.

Warning: The two fields are independent. To resize an image homothetically, be careful to fill both fields correctly.

Warning: If you check the “Resize source image” box without changing the dimensions, the personalization will not be activated.

CSS Selector of the position

To define the position of your image 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. For more information, see our articles Creating a new CSS selector (A/B testing) and Examples of CSS selectors .

Position relative to the selector

You can also choose the position of your image :

  • replacing a selected element (selected by default);
  • before the element;
  • after the element.

Redirection URL after click

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

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

Via the graphic editor

It is also possible to create a variation of your page using Kameleoon graphic’s editor.

Create a new variation with the graphic editor

{This option will be available soon.}

Use an existing variation

If you are also using Kameleoon for A/B testing , you can use variations created as part of your A/B tests for your personalization. Simply select the variation you want to use from the drop-down list.

If you are not an A/B testing customer and do not want to do an A/B test, you can still access the graphic editor and create variations to use only for your personalizations.

If you need help with the Kameleoon editor, consult our guide Using the graphic editor.

Via HTML

Your HTML code

In order to make advanced changes to your page, it is possible to add HTML code directly.

CSS selector

To set the location of your item 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. For more information, see our articles Creating a new CSS selector (A/B Testing) and Examples of CSS selectors.

Position relative to the selector

You can also choose the position relative to the selector:

  • replacing a selected element (selected by default);
  • before an element;
  • or after an element.

Redirection URL after click

If you want, you can add a link to your element. Simply indicate the URL in the corresponding field.

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

Via CSS/JavaScript

If you want to create a more complex personalization, it may be necessary to make far-reaching modifications in your website’s  pages.

You can add CSS or JavaScript code directly in the HTML code of your Internet page. This enables you to create any type of personalization.

CSS

Warning: Kameleoon can load before your CSS style sheet, and the CSS rule you added might be crushed by the existing one. To avoid this, you need to add an!important attribute to the CSS rules of your choice to make sure it will load before the existing one.

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

 JavaScript

Kameleoon also provides an API and some features we strongly recommend for writing your JavaScript code. Please note that Kameleoon does not include jQuery, therefore the one already on your website will be used. Kameleoon might load before jQuery, bur it is necessary to wait for jQuery to load to run your variation’s JavaScript code . To make sure jQuery has loaded, you can use this piece of code:

 

  Kameleoon.API.runWhenConditionTrue (function () {
     return typeof jQuery! = "undefined"; 
     // check that jQuery is loaded.  Returns True if it is, or False otherwise.  Kameleoon will execute this condition again every 200ms.
	
 }, function () {
     // Set here the code you want to execute in your variation. For example if you want to change the text of a block with HTML identifier "block-2345", you can use the following Kameleoon API function
	
     Kameleoon.API.runWhenElementPresent ("# block-2345", function () {
		
         // Position your JavaScript code here
         jQuery ("# ​​block-2345"). text ("My new text");
		
     }, 200);
	
 }, 200);