If you use Kameleoon to do A/B test, you probably already know how to use the graphic editor. This tool allows you to make some changes directly on your webpages with a few simple clics, and to launch A/B tests with the variations you have created. You can also use these variations for your web personalizations.
Here are the basics informations you need to know about our graphic editor. For further information about the editor and how to use it, please read the A/B testing documentation.
Launching the editor
From your website
To launch Kameleoon on your website, go to one of your pages on which Kameleoon is installed and press the
Maj + F2 keys, or
Fn + Maj + F2 for mac users.
You can also use an alternative method to launch Kameleoon. Simply add the following code at the end of your webpage URL:
For instance, the URL http://mozilla.org will become:
When the editor has loaded, a login pop-in appears. Type in your username and password to access the edition mode. When the editor is open, Kameleoon header will appear above your webpage.
From your personal space
You can also launch the editor from your personal space.
To do so, go to your A/B testing dashboard and click on the “+” icon on the header.
Using the editor
You can find all the information about the graphic editor on the A/B testing part of the documentation.
Adding and editing variations
You can manage all of your variations on the header. These are the variations you can use for your web personalizations.
The « Original » is the original version of your page: it cannot be changed nor deleted. Your changes have to be made on a variation.
To add a new variation to your test, click on the following button:
Then, you can click on the variation to display the action menu.
Click on “Rename” or double-clic on the variation name to rename it. Make sure you name your variation properly because this is the name you will find while creating your personalization.
You can now add or delete as many variations as you want to, but the test must have at least one variation.
Changing an element
Once you have selected a variation, place your cursor above an element to select it. A selection frame will appear to help you to select the element of your choice. When you are above the element you want to select, simply click on it with your mouse.
When the element is selected, a left panel appear. The tools available are not the same according to the element selected. To display more tools, click on “More options”.
Three tabs are available:
- Style: allows you to change the color, the text, add or edit a link, add a shadow or an outline or hide an element.
- Position: allows you to change the position of an element on the page, to change its dimensions or to add or change margins.
- Tracking: allows you to add or to create a click tracking.
For further information about the functionalities available, you can read our article Using Kameleoon editor.