Editor setup

3

min

quiz

Once the editor is launched on your website, the Kameleoon header appears at the top of your page.

This header consists of several parts. From left to right :

  • Test name
  • Addition, edit, and search of variations
  • Choice of display
  • A/B test finalization  

You can hide it by clicking on the arrow below the header.

A click on the same arrow will unroll it again.

Settings menu

At the top left of the header, the name of the test being edited appears.

Click on  on its left to open the test manager.

It includes:

  • Information about the test currently edited;
  • Video tutorials on the graphic editor;
  • Elements regarding general setup;
  • All other tests previously created via Kameleoon;
  • A shortcut to create a new test;
  • The possibility to log out of the Kameleoon interface.

Test currently edited

Via this menu, you can

  • add tags, a description
  • add JavaScript or CSS code on all of the test’s variations
  • change the URL of the page on which you loaded the editor.

Tutorials

The tutorials panel gives useful information about our tutorials, including  their level of difficulty (one highlighted box = easy, two highlighted boxes = medium, three boxes highlighted = difficult), their category and status (whether you have already viewed it or not). We would love to hear your thoughts on these tutorials: feel free to give us feedback to help us improve them.

General set-up

This menu contains three sub-menus, which take the form of pop-ins: “Display”, “Language” and “Personalized selectors”.

Display

This pop-in helps you define the display settings. You decide what elements you want to appear on your editor.

You can then memorize this display to find it later, by switching the button to “ON”.

– Tracked elements: By checking this box,  the following icon is displayed for all tracked items, enabling you to find them at a glance or make sure that the tracker has been set up. 

– Edited elements: By checking this box, you will see the following icon on each edited element. 

– HTML Tags: Check this box to display HTML tags in the selection tool.

– Hierarchy Panel: Check this box to display the following panel at the bottom left of your page. This panel will enable you to select the ID of an item you have selected.

– Rulers: Graduations appear in the editor to help you place the elements on your page and resize them if necessary.

– Test summary for updates: Before any update, this screen offers to check that everything has been correctly set. You can memorize this display for future sessions. To do so, switch the button to “ON”.

Language

A click on the language selection opens a pop-in offering three languages: French, English and German.

Personalized selectors

With this feature you can create a custom CSS selector to select one or more elements on the page. You can also find the selectors already created.

Once the elements you are interested in are selected, do not forget to validate to apply the changes.

Open the other tests

When clicking on “Open the other tests”, a test management pop-in appears.

This is where you can change the status or name of an existing test, open a test in the editor or create a new test.

Use the search bar to find a test.

It is possible to filter or sort the tests. Available filters are:

  • status (online, draft, paused, stopped, deviated or planned)
  • associated tag(s)
  • last modification date

The sorting option offers a classification by modification date, date of creation or name (in ascending or descending order).

Click on the name of a test to display the block on the right containing its key informations. Use the icons under the test title and status to duplicate  or delete  the test. You can also start, stop or pause the test by clicking on the arrow to the right of the status:

This action is only possible after the test has been planned or put online.

Create a new test

A click on “Create a new test” opens a creation pop-in. You must assign a name to the test and can add a description and tags if you want to.

Validate with the button “Create the test”. The editor opens on your page.

Logout

Click here to sign out of your account. Be careful, this action will close the editor.