Once you’ve created your account and installed Kameleoon script, you are ready to create and launch your experiments! You can modify your pages directly in a few clicks with the Kameleoon Graphic Editor.
Here are some tips before you start:
– Graphic Editor doesn’t work in incognito mode.
– When cross-sites cookies are blocked, editor can’t work.
– Mozilla blocks cookies by default, if you’re using it then you need to modify cookies default configuration to manually enable cookies in Mozilla.
You can enhance your use of our Graphic Editor with the Kameleoon Graphic Editor extension.
To troubleshoot issues with Kameleoon’s Graphic Editor and offer best practices for avoiding these issues in the future, please read this documentation.
Quick overview
- Experiment Panel: Located on the left, it shows the current experiment with variations and elements present on the page. Here you can can add variations and elements, and edit CSS selectors.
- Main Editing Area: Central area where you can directly interact with webpage elements, select, and edit content, text, and design properties.
- Right Sidebar: On the right, you can access design options, edit States and manage the History of your modifications.
- Top Toolbar: Contains tools for viewing in different device modes, simulating changes, and finalizing the experiment.
User benefits
- Enhanced performance and compatibility, including with Single Page Apps.
- Intuitive user interface for better experience and ease of use.
- Ability to make batch edits across multiple pages.
- Advanced customization options, including element states like ‘hover’ and ‘disabled’.
- Seamless integration with Kameleoon’s Widget Studio.
- AI-powered features for content generation, CSS selector handling, and design variations.
Open the Graphic Editor
Kameleoon’s editing mode enables you to create variations of your webpages and to launch and manage your A/B experiments.
Via your website
To launch Kameleoon, go to one of the webpages on which you have installed the Kameleoon script and press Maj + F2 or, il you are a Mac user Fn + Maj + F2.
If nothing happens, you can try another method to launch Kameleoon: simply add this code at the end of your URL:
#kameleoon=true
For example, your URL will become:
https://www.website.com/#kameleoon=true
Once Kameleoon is loaded, a connection pop-in opens. Fill in your user name and password to access the editor. When the editor is open you will see a header above your webpage.
Click Create to create a new experiment.
Fill in the information of your experiment, select Classic A/B and click on Validate.
The Graphic Editor opens on your web page.
Via your App
You can also launch the editor from the App. First of all, you need to log in to your Kameleoon App.
To do so, click on the New experiment button on the homepage or on the Experiments dashboard.
Select In the graphic Editor.
Then choose the type of experiment you want to create: Classic A/B.
Fill in the information of your experiment and click on Create.
The Graphic Editor opens on your web page.
Structure
Experiment Panel (left side)
Role: Manages the current experiment, including variations and elements on the page.
Features:
- Add variations and elements.
- Edit CSS selectors.
- View and manage elements present on different pages.
Main Editing Area (center)
Role: Allows direct interaction with webpage elements for editing.
Features:
- Select and modify text, images, and other content.
- Access some edition shortcuts.
Right Panel (right side)
Tabs: Design, State, History
Features:
- Customize content, text, background, border, shadow, padding, margin, and more.
- Manage element states (e.g., default, hovered, active, focus, disabled).
- Manage change history on each element.
Top Toolbar
Role: Offers tools for viewing and finalizing changes.
Features:
- Device mode switching.
- Simulate changes.
- Finalize the experiment.
Customize the Graphic Editor display
- Zoom: Adjust the zoom level to fit your screen and needs.
- Reduce Left Panel: Minimize the left panel to increase the workspace.
- Hide Left Panel: Completely hide the left panel for a distraction-free view.
- Fullscreen Mode: Expand the editor to fullscreen for an immersive editing experience.
Simulation and Finalization
- Simulation: Click the ‘SIMULATE’ button to preview how the changes will look and work on your website.
- Finalization: Click the ‘FINALIZE’ button to access the Finalization steps.
Device Switching
Use the top toolbar to switch between different device views (desktop, tablet, mobile) to ensure the design is responsive and looks great on all devices.
