Skip to main content

Getting started with the Graphic editor

Watch this video in our academy for a tutorial on using the Graphic editor.

Once you've created your account and installed Kameleoon script, you are ready to create and launch your experiments! You can use the Graphic editor to modify your experiments in a few clicks.

Here are some tips before you start:

  • The Graphic editor doesn't work in incognito mode.
  • When cross-sites cookies are blocked, the Graphic editor won't work.
  • Mozilla blocks cookies by default. If you're using Mozilla, you must manually enable cookies.

You can enhance your use of our Graphic editor with the Kameleoon Graphic editor extension

To troubleshoot issues with Kameleoon's Graphic editor and view best practices, please read this article.

User benefits​

  • Enhanced performance and compatibility.
  • Intuitive user interface for better experience and ease-of-use.
  • Ability to make batch edits across multiple pages.
  • Advanced customization options.
  • 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 allows you to create variations of your webpages and launch and manage your A/B experiments.

Via your website​

To launch Kameleoon:

  1. Navigate to a webpage on which you have installed the Kameleoon script.
  2. Press shift + F2 on Windows, or fn + shift + F2 on Mac.
note

If nothing happens, add #kameleooon=true to the end of your code.

  1. Once Kameleoon loads, a pop-in opens. Fill in your username and password to access the editor.
  2. A pop-in opens prompting you to select an experiment (if you've already created one) or create a new one. Click Create to create an experiment.
  3. Fill in your experiment's information, and select Classic A/B under Experiment type.
  4. Click Start.

The Graphic editor opens on your web page.

Via the Kameleoon app​

You can also launch the editor from the Kameleoon app.

  1. Log in to your Kameleoon app.
  2. Click New experiment > With the graphic editor.
  3. Fill in your experiment's information, and select Graphic A/B under Experiment type.
  4. Click Create.

The Graphic editor opens on your web page.

Structure​

Experiment panel (left side)​

Function: 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)​

Function: Allows direct interaction with webpage elements for editing.

Features:

  • Select and modify text, images, and other content.
  • Access editing shortcuts.

Right panel (right side)​

Tabs: Design, State, History

Features:

  • Customize content, text, background, border, shadow, padding, margin, and more.
  • Manage element states (for example, default, hovered, active, focus, disabled).
  • Manage change history for each element.

Top toolbar​

Function: 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 preferences.
  • Reduce Left Panel: Minimize the left panel to increase workspace.
  • Hide Left Panel: Completely hide the left panel for a distraction-free view.
  • Full screen Mode: Expand the editor full screen for an immersive editing experience.

Simulation and Finalization​

  • Simulation: Click SIMULATE to preview how changes will look and function on your website.
  • Finalization: Click FINALIZE 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 displays correctly on all devices.

Kameleoon Graphic editor extension​

You can enhance your use of our Graphic editor with the Kameleoon Graphic editor extension.

When to use the Graphic editor extension​

  • Some websites may restrict the usage of an iframe. To address this issue, you can use our Graphic editor extension to override these restrictions and launch the Graphic editor.
  • Certain websites present their mobile version when detecting a mobile user agent. To ensure seamless display of the Graphic editor's mobile version, your browser needs to be informed that a mobile device is being used. Our extension facilitates this process.

How to install the Graphic editor extension​

Click here to access and download our Kameleoon Graphic editor extension on the Chrome Store.