Visual editor

The Visual Editor lets you change your website by clicking on it: edit texts, swap images, change colors or layouts. ABlyft saves your changes as part of the variation and applies them to visitors who are assigned to it. You do not need JavaScript or CSS knowledge, but you should understand the changes you make.

Before you startCopy Anchor Link

• The experiment needs an Example URL: the page you want to edit. See Create an experiment.
• The snippet must be installed on that page, because the editor is loaded through the snippet. See Embed the snippet.
• You need the role member, admin or owner.

Open the editorCopy Anchor Link

1. Open the experiment and create a variation of the type Visual Editor, see Variations. The editor opens right after you click Create variation.
2. To edit an existing variation later, click Edit in its row of the Variations card.

ABlyft opens your example URL with two additional URL parameters, for example:

https://example.com/product?ablyft_editor_variation=12345&ablyft_editor_token=YOUR_EDITOR_TOKEN

The parameters are described in URL parameters. ablyft_editor_variation is the ID of the variation you edit, ablyft_editor_token is a personal token that is valid for 8 hours.

When the snippet finds the token, it loads the editor on top of your page.

Make and save changesCopy Anchor Link

Select an element on the page and change it in the editor. ABlyft stores each change together with a CSS selector that identifies the element. When a visitor sees the variation, the snippet finds the element with the selector and applies the change, for example new text, HTML, a link, an image source, a class or styles.

Your changes are saved in the variation. You can inspect them in Edit settings of the variation, in the field Settings from Visual Editor (a JSON document generated by the editor). In the same section you can add JS code and CSS code to a Visual Editor variation if you need something the editor cannot do.

Check the result with the preview, see Preview & QA.

Editor extensionsCopy Anchor Link

Editor extensions are ready-made building blocks that a change in the editor can use. Each extension brings its own HTML, CSS and JavaScript. ABlyft provides them; there is no setting for them in your project. If a variation uses an extension, ABlyft includes it in your snippet automatically.

Good to knowCopy Anchor Link

• If a page does not load properly inside the editor, contact ABlyft support.
• With the type Code you build the same changes by hand, see Variations.

Next stepsCopy Anchor Link