Personalization inside the content of your pages

While creating a web personalization, three choices are available: display the personalization inside the content of your pages, above your pages or via an email.

In this article, we will explain how to display a web personalization inside the content of your pages. You can also read our article about personalization above your pages.

From an image

You can, with Kameleoon, import an image from your computer of from Internet.

Image selection

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

To delete an image already selected, place your cursor above your image and click on the “Delete” button.

Image size

To keep the dimensions of your file, check the box “Identical to source image”. However, if you want to resize it, check “Resize source image”. The fields “Image width” and “Image height” will appear, allowing you to set up the new size.

Warning: these fields are independants. To resize an image homotetically, make sure you filled in the fields correctly.

 

CSS selector

To define the location of your image on the page, you have to indicate a CSS selector.

To create a CSS selector, you can ask your developer for help, or use Kameleoon graphic editor. For further information about CSS selectors, please consult our articles Creating a new CSS selector (A/B Testing) and Examples of CSS selectors.

Redirection URL after click

If you want to you can choose a URL; users clicking on your image will be redirected to this URL. To do so, simply fill in the URS in the field.

The link will open in a new tab if the visitor clicks anywhere on your image.

From the graphic editor

You can also use Kameleoon editor to create your web personalization.

Create a new variation using the graphic editor

This option will be available shortly.

To keep yourself informed, check out our blog!

Display an existing variation

If you are also an A/B testing client, you can use the variation you created for your tests in your web personalizations. To do so, simply select the variation of your choice in the drop-down menu.

If you are not an A/B testing client and are not interested in A/B testing, you can still use the graphic editor to create variations and use them only for web personalizations.

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

From HTML

Your HTML code

If you need to create advanced modifications on your webpages, you can add HTML code. Simply type in or copy and paste your code in the "HTML code" field.

CSS selector

To define the location of your element on the page, you have to indicate a CSS selector.

To create a CSS selector, you can ask your developer for help, or use Kameleoon graphic editor. For further information about CSS selectors, please consult our articles Creating a new CSS selector (A/B Testing) and Examples of CSS selectors.

Redirection URL after click

If you want to you can choose a URL. Users clicking on your image will be redirected to this URL. To do so, simply type in or copy and paste the URL in the field.

The link will open in a new tab if the visitor clicks anywhere on your image.

Using CSS/JavaScript

To create a more complex personalization, add CSS or JavaScript code in your webpages code. This will allow you to create any type of personalization.

CSS

Warning: Kameleoon CSS rule can be overwritten by the one on your website. To avoid this, make sure you placed the “!important” attribute on the CSS rules of your choice. For instance:

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

JavaScript

Kameleoon offers you an API and some functions we highly recommend to use while writing your JavaScript code. Note that the jQuery on your website will be used. Kameleoon can load before jQuery but it is important to wait for jQuery to be loaded before using it in your JavaScript. To do so, use this piece of code: 

Kameleoon.API.runWhenConditionTrue(function(){
    return typeof jQuery != "undefined"; 
    //permet de vérifier que jQuery est chargé. Retourne True si c'est le cas, ou False dans le cas contraire. Kameleoon executera cette condition à nouveau toutes les 200ms.
	
}, function(){
    //Positionner ici le code que vous souhaitez exécuter dans votre variante.Par exemple si vous souhaitez changer le texte d'un bloc ayant pour identifiant HTML "bloc-2345", vous pouvez utiliser la fonction de l'API Kameleoon suivante
	
    Kameleoon.API.runWhenElementPresent("#bloc-2345", function(){
		
        //Positionner ici votre code JavaScript
        jQuery("#bloc-2345").text("Mon nouveau texte");
		
    }, 200);
	
}, 200);

Widgets

You can also use widgets for your web personalizations.

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.

For further information about widgets, please read our article Widgets.

Have more questions? Submit a request
Powered by Zendesk