Adding CSS and JavaScript code

3

min

quiz

If you want to test far-reaching changes in complex A/B tests the graphic editor’s features may no be sufficient. For these cases, Kameleoon offers to integrate CSS or JavaScript code directly in your web page’s HTML code, enabling you to create all kinds of tests.

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 where you can inject your code.

You can extend the size of the pop-in to have more space in the code field. Just 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 “Done” button.

The icon on the “CSS” button becomes green.

Capture_d_e_cran_2018-05-25_a__14.30.27.png

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 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 where you can inject your code.

You can extend the size of the pop-in to have more space in the code field. Just 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.

Capture_d_e_cran_2018-05-25_a__14.31.53.png

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"; 
    //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.runWhenElementPresent("#bloc-2345", function(){
		
        //Enter here your JavaScript code
        jQuery("#bloc-2345").text("My new text");
		
    }, 200);
	
}, 200);

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

Adding code on all variations

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

To do so, click on the cogwheel Capture_d_e_cran_2018-05-25_a__14.35.15.png 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. Just 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.