Visual Editor – Editing Experiments Without Code

The Pertento Visual Editor is a no-code, what-you-see-is-what-you-get (WYSIWYG) tool for creating and modifying experiment variations directly on your website. It lets you make changes to text, images, styles, and other page elements in real time without writing any code. You can visually design A/B test variants and immediately preview how they look and behave on your site, streamlining the workflow for rapid experimentation.

Using the Visual Editor

1. 1Launch the Editor: Install and activate the Pertento Editor Chrome extension (if you haven’t already) and open your website through the Pertento platform. From your experiment’s settings, click on the Edit or Visual Editor option. This will enable an editing overlay on your webpage in your browser.
2. 2Select an Element: Hover over and select the page element you want to change. The Visual Editor will highlight elements as you move your cursor, allowing you to pick headers, images, buttons, text blocks, etc.
3. 3Make Visual Changes: Once an element is selected, use the editor’s controls to modify it. You can edit text content, change styles like colors or fonts, swap images, hide or reposition elements, and even insert simple HTML or snippets if needed – all through a point-and-click interface. Each change you make is applied instantly on the preview, so you can see the variant exactly as users would.
4. 4Preview and Save: As you make edits, you can navigate through your site in the editor to test the variant flow. The changes persist in preview mode so you can verify everything. Once satisfied, save the variant. Pertento will record these modifications as the new variant version for your experiment.

Key Features of the Visual Editor

• No Coding Required: All changes are made through the UI. There’s no need to write CSS or JavaScript manually – the editor generates the necessary code behind the scenes. This lowers the technical barrier for creating experiments.
• Real-Time Preview: The editor applies changes in real time on your site so you get immediate feedback. For example, if you edit a headline, you’ll see the new text on the page instantly, ensuring the variation looks correct before going live.
• Accuracy and Control: You can make precise edits by selecting exactly the element you want to change. The Visual Editor preserves your site’s style and layout while allowing targeted modifications. You maintain full control over the variant’s appearance and can revert or adjust changes easily.
• Integration with Deployment: The Visual Editor works hand-in-hand with Pertento’s deployment engine. Once you have visually crafted your variant, you can launch it with one click (using the Launch feature, described later) – the changes will be delivered to your audience instantly via Pertento’s ultra-lightweight snippet.

Using the Visual Editor, even non-developers can design experiment variations quickly. It provides a smooth, graphical workflow for trying out ideas on your live site safely. By removing the need for code changes or developer deployment, the Visual Editor makes A/B test creation faster and more accessible while ensuring you see exactly what users will see.