Experiments (also known as web optimization or web personalization) allow you to make any changes to your website using a simple visual editor without the need to code. Our editor supports changes like adding or removing whole blocks, adding recommendations, inserting web layers or adjusting colors and fonts in various ways. They also allow you to personalize your website using the data from Exponea by using Jinja. They work on a similar basis as web layers - you can create multiple variants, show them only to a specific audience and AB test them. Experiments automatically track a single event called experiment when they are applied to your website, so you can make further analyses based on the data collected from these events.

You can watch this video to get an overview of the basic features:

Experiments can significantly decrease your time to value as they allow you to make small changes to your website without having to know how to code or rely on your IT department. Moreover, any changes can be AB tested and evaluated right away using the Exponea interface, and you can use the data about your customers and personalize the web for them using Jinja.

Creating an Experiment

You can create a new experiment by going to Campaigns > Experiments > Create new

You will be prompted to enter the URL of the website you want to modify with the Experiment. This might be the homepage of your website or any other page that you wish to adjust. Please note that this does not limit the Experiment to this URL; it only serves for setting up an experiment.

If you want to run an experiment on a specific page use '?' instead of '#'. Example: 'www.exponea.com?test' instead of 'www.exponea.com#test'. If you used hashtag the experiment would not work.


The page on the URL you enter must be integrated with the current project before creating the Experiment, otherwise, the Experiment won't work. If you want to preview experiments on websites that are not integrated with your project, you can download our Chrome extension.

After clicking on the Create button, you will be taken to your website and an inline visual editor (called the Experiments editor) will be loaded.

Experiments editor

Now you are in the Experiments editor with the possibility to select and change any element on the website. Let's have a look at each part of the editor now, as it is numbered in the screenshot below.





Experiment variants

Create and switch between variants of your Experiment. You can then compare their performance through an AB test. Read more in section Experiment variants.


List of modifications

Expands the list of all modifications you made. Clicking on a modification will take you back to the editing menu of that element so you can adjust it again. You can also delete each modification, which will bring that element back to its original state. Read more in section List of modifications.



Undo / Redo



CSS selector of current modification (or the currently selected element on the page).


Shows the number of selected elements. You can select more elements on the website by holding the SHIFT button while clicking on them.


Switch to the "browsing mode" if you need to navigate on the website and access another page.


Mobile preview.

Mobile preview.


Close editor without saving your work.


Generates a link to your modified website that you can share with others. Note that this is used only to preview the changes, the Experiment will not be launched. The generated link is valid for 24 hours, after that it expires.


Exit the visual editor either with or without saving your changes. This will not launch the Experiment yet. In order to do that, you need to exit the visual editor and click Start back in the Exponea application.


Currently selected element(s) on the page - when clicking on the page (or element(s) modified by selected modification)


This menu pops up when you click on an element on the website. Each function is explained in section Modifying elements.

Experiment variants

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 number 1 in the previous screenshot). It is possible to duplicate, rename, and delete a variant.


The variant named Original is the control group — how your website looks without the changes in any other variant. This variant cannot be changed or deleted.

List of modifications

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

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 Jinja), it will be marked in the modification list.

Please note that these modifications load slower than modifications that are not personalized. This also affects any modifications that are after personalized modification. 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.


"Selector" is a CSS selector of current modification (or the currently selected element(s) on the page).

Whenever a computer cursor is on any item on your page, its name will appear at the upper-middle section called Selector. You can select desired element by the click. If you hold shift, you will be able to select more items by clicking, as could be seen in the picture above.
After selecting an element(s) by clicking on the page, you can still edit an auto-generated CSS selector by clicking on a pencil-shaped icon in the top bar. For example, your page may have many different pictures and adjusting all of them will take too much time; select one picture and rewrite the selector in order to select more (or all) items.


Confirming the change of the selector

Note: the change of the selector has to be confirmed by hitting the ENTER key. It might sound intuitive but most people forget to do so.

Modifying elements

After clicking on any element, a menu will pop up presenting you with several options on how to modify that element. We will now explain every option.


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 Jinja here to personalize the content for the user.


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

See the next section to learn how to go about placing the HTML block on the website.

  • Weblayer: Weblayers are campaigns that are shown on the specified pages of your website to a specified audience. They are executed using HTML/CSS/Javascript. You can use them to show a message to the customer or prompt them to action. Use any Weblayer from your project and display it using Experiments.
  • Block: Use any existing block from your project. You can tweak its parameters.
  • HTML: Write your own custom HTML and use Jinja to personalize it.


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. See the screenshot below.

In a non-programming vocabulary, the first-child matches the first element of a series of tags. Last-child works absolutely identical as first-child, but it selects the last element in the list.

Next, click on the target button and then select the element which you want to use as the anchor point for these settings.


You can delete the selected element completely. After clicking this button, you can also choose whether you want to leave blank space instead of this element or not.

Run script (advanced - requires the usage of Javascript)

This modification can be used to run your custom code for the selected element (or elements). You can choose to run your code at different points of time — either immediately when the page loads or once for each selected element.

Execute options are:

  • immediately even before the page content is loaded: You code will run immediately once the customer opens the page and the browser starts loading the content. Note that the page content may not yet be fully loaded.
  • once for each matched element: Your code will run once for each element selected for this modification. You can get a reference to the element using this.element (see below). Note that the code may run multiple times based on the number of selected elements. Make sure to account for it in the code.
  • on document ready with all matched elements: Your code will run once with all matched elements when the page fully loads. You can access the elements using this.elements (see below).

Function "remove"
You might want to use the function remove when operating "Run Script". This serves as a powerful clean up when reverting your changes.

return {
        remove: function() {
                            // your revert/undo code

You can use the special this keyword in the code to access data provided by Exponea. The data is described in the table below.

Provided data in this - in the table below you might find all our data and their characteristics



this.data and this.params

It contains data about the experiment. You can use either variable but we recommend using this.params because it is more readable in the code.


The ID of the current experiment.


The name of the current experiment.


The AB test variant that is currently shown to the user.


The name of the AB test variant that is currently shown to the user.


Reference to the selected HTML element. If multiple elements are selected, only the first one is provided here. Great to use with code that is run once for each matched element.


(Notice the plural form.) An array of references to all selected HTML elements.


This is either true when previewing the experiment in the visual editor or false when running the experiment in production.


Reference to the Exponea SDK. You can use it, for example, to track events using this.sdk.track('event_name').


The CSS selector (string) that was used to select the elements.

Select parent / child / similar element

Change your current selection to the parent or child of the currently selected element. You have to understand a little bit of HTML and its structure to use this effectively. Selecting a parent element means going one level up within the website structure. Each element can also contain multiple children and you can select one of them to move down within the website structure.

Saving your work

Confirm your changes by clicking on the Save button in the top menu. You will return back to Exponea where you can edit additional settings of the Experiment and set up AB testing.


Do not just close the browser tab when you click on the Save button. Instead, wait until you are redirected to the Exponea app and until it fully loads. You should see a confirmation message Success! Your experiment was successfully saved.

Design (AB test settings)

In the Design tab, you can create multiple variants of the Experiment and set up the AB testing. You can also change the preview page URL, change the variant names, and even duplicate them.

You can choose the traffic distribution of your customers in the right-middle part of the page. If you select the function Automatic traffic distribution (default setting) it will determine the best performing variants of the web layer by using Exponea Artificial Intelligence and then preferring these variants over the less performing ones. Contrary to that, Custom traffic distribution allows selecting the percentage of your customers to see each of your variants. Note that both cases allow you to create a control group, which is a group of people who will continue to see your original page for the purpose of a better evaluation.

You can also select to Duplicate your variant. It allows you to duplicate your variants to prevent the unnecessary recreation of complicated variants again, given that the two might vary only in small details.


You can modify the settings of the Experiment in the settings tab.

Experiment settings

Conversion goal

The automatic AB test optimization and the automatically generated evaluation report are based on this setting.


You can choose to display the experiment instantly or set a specific time period in which the experiment is shown.

Show on

Choose where to show the experiment: On every page, the page with a specific URL, page containing URL or by creating a regular expression where you define a particular set of URLs. If you want to run

Javascript condition

You can specify custom javascript as a condition for displaying an experiment. This code is then executed before the experiment is applied to the page, either by the SDK or by the non-flickering script. Jinja is NOT supported here.

For more info see the chapter below.

Target devices

Show on any device or only desktop or mobile.


Set until when you want to keep showing the experiment for each eligible customer.

  • Once: Shown only once for the whole period of running the campaign. This is tracked when the event experiment tracks action=show.
  • Once per visit: Shown only once between a session_start and session_end. Once action=show is tracked, it will be shown again only in the next session.
  • Always: Will be shown all the time for each visit, each day and after each page refresh even when the user closes the web layer.


Choose which consent is required for a customer to see this experiment.
Read more on consents here.
If you don't use consents yet, you will see the campaign groups setting here.


Define your custom audience that will receive see this experiment. You can use our standard customer and event filters.


Tip for testing your Experiment

For testing purposes, we recommend setting the condition Show on page URL containing to something like #test. After you have launched the Experiment, you can simply go to www.yourwebsite.com/#test and you will see it in the real environment. You can even send this link to anyone and it will work until you stop the campaign.


Every Experiment has a built-in evaluation dashboard. This dashboard displays common metrics and analyses. If AB testing is enabled for the Experiment, the dashboard will also show you how each variant is performing through funnels and accompanying tables.

If you want to customize the evaluation dashboard, you can save it as a custom dashboard using the menu in the top right corner next to the Save button.

Custom Javascript Condition

You can specify a customized javascript code as a condition for displaying the experiment. This code is then executed before the experiment is applied to the page, either by the SDK or by the non-flickering script. It should return true when the experiment should be shown and false when not.


Please note that Jinja is NOT supported here!

This code is also provided with data from Exponea in the special this keyword, similar to the Run script modification. You can use the same variables except this.element and this.elements. Read more about the provided data in the section Run script.


I have launched the experiment but cannot see it

There can be several reasons for this:

  • If you use AB testing, you might have been assigned to the control group, which is usually set to show the original. You can check whether this is the case by going to Customers and checking what events have been tracked to your profile. Alternatively, you can try using our Chrome extension (still in Beta stage) and see what events are being tracked live in the console.
    If this is the case, then either change the AB testing or try opening the page in an incognito mode until you get assigned to the correct variant (the incognito mode changes your cookie every time you open it).
  • In Settings:
    • Check the condition "Show on" and make sure it matches the page that you are loading.
    • Check "Category": If the campaign is set to show only to customers with specific consent, your profile must have that consent too.
    • If you specified any conditions in the "Audience" part, you must match them.

The campaign showed once but it doesn't load again

  • If the Display option in Settings is set to Once or Until interaction then you will either need to change it or use the incognito mode to see the campaign again.

The experiment editor won’t start

  • This may be caused by an issue on the backend server. If you start the experiment editor on a page, which validates its URL GET parameters and does a cleanup/redirect of unknown parameters, one of those may be exponea-editor-params. This parameter is used to trigger experiment editor start in our SDK. As it is detected as unknown, the experiment editor won’t start and it will probably redirect you to an error page.The solution is to add exponea-editor-params to the whitelist of your parameters.

My visual changes are not applied to the element

  • The visual changes in the experiment are applied to your website with CSS. CSS works with priorities and so it is possible that your changes are overwritten by the CSS on you website. A bit of technical knowledge is required here, or alternatively, consider contacting our customer support.
  • If you understand CSS a little, you know that your experiment styles are probably overwritten by your existing website styles. Consider manually writing a longer CSS selector for the element which would get a higher priority.
  • If you are changing the background color or image of an element, it is possible that the element is using the new picture element with a set of source elements. Again, technical knowledge is required to fix this problem. To fix this problem (and have your new image shown in the webpage), you have to edit the HTML of the element, remove all source elements and replace them with a single new source (or img) element with the correct src set to your new image.

Updated about a month ago


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.

We rely on cookies

to optimize our communication and to enhance your customer experience. By clicking on the Accept and Close button, you agree to the collection of cookies. You can also adjust your preferences by clicking on Manage Preferences. For more information please see our Privacy policy.

Manage cookies
Accept & close

Cookies preferences

Accept & close