Adding CSS code and JavaScript code

In complex cases of A/B testing with deep changes to your webpages, the functionalities available in the editor might not be enough.

To overcome this need, Kameleoon enables you to add CSS or JavaScript code straight into your webpage HTML code, allowing you to create any kind of test.

Adding code to a variation

CSS code

To add CSS code, click on the name of the variation of your choice to open the action panel.

Then, click on "CSS" to open a pop-in to inject your code.

You can extend the size of the pop-in to have more space in the code field. To do so, click on the "Extend" icon on the top right or drag and drop the bottom right corner of the pop-in.

Once you have typed in or pasted your code in the pop-in, click on the "Validate" button.

The icon on the "CSS" button becomes green.

Warning: Kameleoon can load before your CSS style sheet and the CSS rule you added might be crushed by the one on your website. To avoid it, you will need to put the !important attribute on the CSS rules of your choice to make sure it will load above the existing one. For instance: div#button{background-color : red !important;}

JavaScript code

To add JavaScript, click on the name of the variation of your choice to open the action panel.

Then, click on "JavaScript" to open a pop-in to inject your code.

You can extend the size of the pop-in to have more space in the code field. To do so, click on the "Extend" icon on the top right or drag and drop the bottom right corner of the pop-in.

Once you have typed in or pasted your code, click on the "Validate" button.

The icon of the "JavaScript" button becomes green.

Kameleoon also provides an API and some functions we highly recommend while writing your JavaScript code. Please note that Kameleoon does not include jQuery, therefore the used one will be the one already loaded on your website. Kameleoon might load before jQuery on your website, so it is necessary to wait for the loading of jQuery to use the JavaScript code of your variation. To do this, you can 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);

Note: JavaScript code does not run in the editor. To preview your modification, click on the "Visualize" button or simulate your test.

Adding code to all variations

You can also add CSS or JavaScript code to all the variations of your test.

To do so, click on the cogwheel on the left of the name of your test.

A pop-in opens, allowing you to add CSS code, JavaScript code or both.

You can extend the size of the pop-in to have more space in the code fields. To do so, click on the "Extend" icon on the top right or drag and drop the bottom right corner of the pop-in.

You can also apply these changes to your original page. To do so, check the box "Also add JavaScript and CSS on the original".

Note: the changes made on the original will only appear in this particular test. Visitors excluded from this test will not see this version of your original page.
Have more questions? Submit a request
Powered by Zendesk