An experiment can be created from the Experiment builder object by clicking on the Create experiment button. You will be first asked to provide a descriptive name for the experiment.

Afterward, you will be prompted to select the Experiment type: either Client-side or Server-side. Select the Client-side option.

As a final step, you should enter the URL of the website you want to run the experiment on. It can be a homepage or a specific page of your platform. Note that entering the specific URL does not limit the experiment running on that very page.

Experiment editor

Once the experiment has been created, you will be redirected to the stated URL with an Experiment editor extension.

List of changes

You can access the list of modified elements and the applied modifications using the “Changes” button. Each change in the list shows the modified elements and the changes made in the modification.

NOTE: You can hover over a modification to highlight the edited element. You can also click on a modification to change it.

Personalized modifications

When a modification is personalized (it contains Liquid), it will be marked in the modification list. Personalized modifications load slower than modifications that are not personalized. This also affects any modifications that are applied after the personalized modifications. If possible, sort your modification list in such a way that all (or as many as possible) non-personalized modifications are placed before the personalized modifications.

Experiment variants

Experiment variants serve as a tool to compare different modifications of the same text, picture, structure, functionality, etc. while comparing it to a control group. You can modify the variants of the experiment using the variant selector (labeled with the number 1 in the previous screenshot). It is possible to duplicate, rename, and delete a variant.

NOTE: There's always a variant called a Control group. This is how your website looks without the changes to any other variant. This variant cannot be changed or deleted.

Selector

Selector is a CSS selector of the current modification (or the currently selected element(s) on the page). Whenever you are hovering over an element or selecting an element on the webpage, the editor automatically generates a unique selector for that element. If you hold the Shift key, you can select multiple elements by clicking, as could be seen in the picture above. The editor then generates a selector that matches all the selected elements.

After selecting an element(s) by clicking on it, you can still edit the auto-generated CSS selector by clicking on the pencil-shaped icon in the top bar. For example, your page may have many different pictures, and adjusting all of them would take too much time; select one picture and rewrite the selector in order to select more (or all) elements. You can even write an entirely custom CSS selector to apply modifications to if you know CSS.

Undo/redo

With Undo/redo you can undo or redo your changes to the experiment/website.

Library

From the Library tab you can access the list of created Popups that can be inserted into the experiment. Additionally, you can also create HTML elements and add them to your experiment.

Preview

By clicking on the “Preview” button, it will generate a link to your modified website that you can share with others.

Desktop/mobile view

By clicking on the Desktop/mobile switch, you will be able to preview your experiment URL in either Desktop or Mobile configurations.

Modifications list

The menu pops up when you click on an element on the website. From the list, you can edit the HTML element.

Change

Use this option to change the element visually. You can edit the dimensions, colors, fonts, spacing of the element, etc. You can enter the colors manually (using the hex or RGB color format) or use the color picker. When changing the font, make sure it is loaded onto the website. And finally, the sizes need a number and a unit (for example 43px or 12em). The format you should use is indicated in the fields as a placeholder. This modification type also allows you to change an image on the website and a link's URL address. In order to do that, you have to first select an image or a link.

If you are advanced, you can switch to the Code tab and modify the HTML of the selected element. You can use Liquid syntax here to personalize the content for the user.

Insert

This will open a menu with your Popups and HTML Blocks saved in the Library. In both cases, you can either pick an already existing template or create a new one using the code editor.

Move

Moving an element has two parts. Before selecting an anchor point on the website, you need to select whether you want to place your currently selected element before or after that anchor point. You can also put it inside that anchor point as the first or last child. Before and After are self-explanatory and also the most-used options — the new content will be placed right before or after the selected element. Using these two options places the new content outside the selected anchor element which means that the new content will not inherit the style of the selected element. If you put the element inside as the first or last child, it will inherit the style of the anchor element.