Kameleoon editor allows you to make changes directly on your website. Once your account as been created and the script installed on your webpages, you will be able to launch the editor by pressing Maj + F2 on a PC or Maj + Fn + F2 on a Mac. For further information about the installation, please read our Getting started section.
This article will help you to explore the tools available in the editor.
When you launch the editor on your website, Kameleoon header appears on the top of your web page.
This header is composed of several parts:
- Test name
- Addition and edition of variations
- Launching of the A/B test
- Choice of mode and preferences
A/B test creation and selection
On the top left of the header, you will find the name of the test currently edited.
Click on your test name or on the arrow on the right to open the test manager window. Here, you will be able to see all test created in Kameleoon.
In this window, you will be able to change the status or the name of a test, to open it in the editor or to create a new one.
Click on the name of a test to open in a new window all details about this test.
In this window, you will find all details about the selected test. Use the icon on the left to duplicate, pause, stop or relaunch a test.
Addition and edition of variations
Under the name of the edited text, you will find the list of your variations.
There will always be:
- The original: which is the original page of your website. This page is used as a reference for your test, you cannot change it nor delete it.
- At least one variation: by default, a variation named “Variation 1” is created. You can add or delete as many variations as you want but you must always have at least one variation on your test.
- The “+” button: This button allows you to create a new variation.
If you click on one of your variation (other then “Original”), an action menu will open below the header, giving you access to new functionalities.
Launching the A/B test
On the right side of the header, you have access to the “Test finalizer” and “Reporting” buttons.
When you have created your variations, the “Test finalizer” button allows you to open the finalization window in order to launch you’re a/B test on your website.
La phase de finalisation se répartie sur trois parties :
To launch the test, three steps are needed:
1/ Variation choice: select the variation(s) to include in the test. Note that you cannot launch a test if there isn’t any variation selected.
2/ Define targeting and traffic deviation: choose among your visitors which ones will be exposed to your test. By default, all visitors visiting your page will be included in the test. Note that this does not mean that they will all see your variation. Traffic deviation will define the percentage of visitors who will see your variation(s).
3/ Reporting tool(s): choose the reporting tool(s) you want to use to analyze your results. Note that you must choose at least one reporting tool to launch your test. For further information about reporting tools, please read our article Reporting tools and goals.
For further information about the launching of your test, please read our Quick start guide.
This button will open the results of your test in your personal space. This is only possible with tests already launched.
Choice of mode and preferences
Above the finalization buttons, the display mode is indicated :
Edition mode: all links on your website are disabled, you are free to make any modifications on your webpage.
Navigation mode: this mode does not allow you to make changes on your website but you can see your webpage without the selection frames and without leaving the editor.
Click on the name of the mode to change it.
The preferences are on the top right of the header.
- Show tracking elements: check this box to show the icon below on each tracked element. It will help you to localize them.
- Show modified items: check this case to show the icon below on each modified element.
- Display HTML Tags: check this box to display HTML tags in the selection tool.
- View hierarchy panel: check this case to show the panel below on the bottom of your page. This will allow you to find and select the ID of an element.
- Reload editor on mobile site: if you have a mobile version of your website, click on this button to relaunch the editor on the mobile version.
- Add custom selector: click here to open the pop-in below. This will allow you to create a custom CSS selector.
- Open dashboard in a new tab: opens your personal space homepage.
- Settings: click here to open the language pop-in. Two languages are available: English or French.
- Documentation: click here to open the documentation in a new window.
- Logout: click here to logout from your account. Note that you will leave the editor.
Select an element
To select an element, make sure you are on the “Editing mode” on the top right of the header. If you are on “Navigation mode”, click on it to change mode.
When no element is selected, place your cursor above an element to see its ID and a selection frame. The element about to be selected will be covered by a blue zone. Click once to select the element.
Sharpen your selection
When an element is selected, this panel appears:
If you need to move it, simply drag and drop it anywhere on the page.
The central part of the panel shows you which element is selected and its parent elements. You can select a parent element just by clicking on it.
Note that you can display the HTML tags before the name of the elements by checking an option in the settings.
To see the whole list of parent and child elements, click on the icon on the left.
A drop-down list will open with all the elements. Scroll up to see the child elements and scroll down to see the parent elements.
Tip: it can occur that you cannot select an element because it is hidden by another one. In this case, use this tool to select it.
To select several elements, start with selecting one of these elements.
Once the element is selected, click on the green icon on the right:
A list opens, allowing you to sharpen your selection.
Depending on the element you have selected, severa functionalities are available:
- Hierarchy:this is the CSS selector by default. Kameleoon selects the element according to its (unique) hierarchical position on the page.
- ID:allows you to select a unique element with its ID.
- Tag:selects all the elements sharing the same HTML tag (for example, all theh4 elements).
- Class:selects all the elements sharing the same HTML class.
- Content:selects all the element with identical content (for example, all the "Add to basket" buttons).
- Custom:select all the elements with the same CSS selector. This selector appears only if you previously added a new CSS selector on the page. For futher information, you can read our article about CSS selectors.
You can also select and edit the hover mode of an element, which is what happens when the user place the mouse cursor above the element.
To do so, press the Control key on windows, Command on Mac, while selecting the element of your choice.
The hover mode of the element will be selected and you will be able to edit it as any other element on the page. The text "HOVER" appears on the bottom left of the element to let you know you are editing the hover mode.
If there is another level of hover mode, like for a menu and a sub-menu for example, a pop-in will appear and will allow you to choose the level of hover mode you want to select:
Choose "Standard view" to stay on the first level of hover or "Hover view" to select the second level of hover mode.
When an element is selected, a panel appears on the left of your screen. It gathers the tools you can use to make modifications on your webpages.
According to the element selected, the tools available will not be the same.
You can reduce this panel by clicking on the arrow on the top left, or move it anywhere on the page with a drag and drop.
Three tabs are available:
for each tab, the most used tools will be shown in priority, but you can access more functionalities by clicking on the “More options” button.
The “Style” tab allows you to change or add graphic effects.
Click on this icon to mask an element. If the element is masked, click again on the icon to show it again.
Copy & paste an element
The icon above will copy the selected element. When the element is copied, the two icons below are unblocked. One of them will paste the element before another element, the other will paste it after.
Click on the icon of your choice, then choose another element on the page. According to your choice, the element will be paste either before or after this element.
Add or edit the text content and layout
Double click on the text or click on “Edit content” to edit your paragraph in a pop-in.
Add or change a URL
Click on “Edit URL” to change a URL.
Change the background or outline of an element
Click on “Image”, “Color” or “Border” to open a pop-in.
Change the opacity
Choose the opacity: 0% is transparent while 100% is opaque.
Add a shadow
You can add an inner or outer shadow to your element.
Click on “Add the attribute” to open a pop-in and edit or add an attribute to your element.
The “Position” tab allows you to change the size, the margins or the position of an element on the page.
Move an element
There are several ways to move an element.
- Insert before/after: allows you to position the element before or after another.
- Swap: swap the element with another
- Insert into: insert the element inside another one.
- Slide, anchor and extract: allows you to resize and move the element on the page, keeping its original position or not.
You can use the tooltips to help you to choose wisely between all these tools.
Use this tool to resize your element. If the links on the right are enabled, the proportions will stay the same.
To resize the element, type in the value of your choice in the "Width" and "Height" fields or click on "Manual resize".
If you chose to resize the element manually, guides will appear on the selected element: click on one of them to drag and drop it and resize the element.
If the links are enabled in the tool panel, the proportions will be kept.
With this tool, you can add or change inner and outer margins. Enable the links on the right if you want all margins (top, bottom, right, left) to be equals.
If you have two elements with one on top of the other, use the z-index to choose which one will be above the other. The one with the higher z-index will be the one above.
The “tracking” tab enables you to create or add a click tracking on an element.
Creation of a new tracking
Enter a name for your event tracker and click on the "Track this element" button to create the event tracker. When the tracking is created, it will be added to the "Associated with the element" part.
Adding an existing event tracker
You can also associate an existing event tracker to the element. To do so, click on the "Add an existing event tracker" link: the list of all existing event trackers will appear, allowing you to select one or several of them.
If you do not see this part, click on the "More options" button.
Associated to the element
Each tracking associated with the element will appear here. You can rename them, delete them or stop the association with the element.
On the right of your page, the history panel will allow you to delete, disable or even rename an action.
The simplified view is simply two arrows: one of them allows you to cancel the last action, the other will restore it.
The cancelled actions are not deleted but disabled: you can enable them at any moment.
Click on the panel to open it and see the history and display the list of actions you have done on your variation.
If you place your cursor above one of the action, icons will appear allowing you to delete, disable or rename an action.
History per element
If you want to see the history of a particular element, you can go to the "Per elements" tab.
This history works exactly like the classical history, but all actions are gathered by element.