A new version of the Graphic Editor is currently being deployed, this documentation will be updated soon.
This article is about A/B testing. If you want to create a widget from code, please read this documentation article. If you want to create a widget in the Widget Studio and associate it with a personalization, please read this documentation article.
You can test the impact of your widgets by creating an experiment in the Graphic Editor. Before adding a widget to your experiment, you’ll have to create it and activate in the Widget Studio. Note that you won’t be able to edit your widgets using the Graphic Editor. If you need to make any changes to the content or layout of your widgets, you’ll have to edit them in the Widget Studio.
Add a widget to a variation via the Graphic Editor
In the Elements menu, click + Add.
In the Add element panel on the right, select Widgets.
Select the activated widget you want to add to your variation. Please note that only activated widgets can be added.
Then you can define:
- Position of the widget:
- Inside the page (inserted in the page content, anchored to a reference element via CSS selector).
- Above the page (overlaid, without anchoring).
- Reference & placement (only if you select Inside the page): Enter a CSS selector to target the reference element. Choose whether the widget should be placed Before, Replace, or After the element.
- Device targeting: By default, the widget is displayed on desktop, tablet, and mobile. Click an icon to hide the widget on a specific device.
- Compatibility with your site:
- JavaScript with shadow DOM (recommended) isolates widget styles from your site’s CSS.
- CSS & JavaScript (use this if you want the widget to inherit styles from your site.
Click Add element to confirm. The widget will be added to your variation and listed in the Elements on this page panel.
You can reposition it using the editor panel, but you cannot edit the widget itself.
If you want to test alternative versions of your widget, you can easily duplicate your widget from the Widgets Dashboard.
Delete a widget from a variation
In the Elements on this page list, locate the widget you want to remove.
Click the ⋮ menu and choose:
- Remove element on to hide the widget on a specific device (mobile, tablet, desktop).
- Remove element to completely remove the widget from the variation.
