Skip to main content

AI Visual Editor Copilot

O
Written by Optimize Team

When creating an ABn or Target type experience, the visual editor (VE) is available. A new button is present on the form to launch in AI mode.

Clicking this will open the page on your website, with the side panel, but in AI copilot mode. You can toggle between AI and normal mode of the VE here:

While in AI mode, first click on an element or area of the page to select it. (This gives the AI better context and will produce better results).

Then type what you'd like to build into the box.

If a request falls outside of our schema (usually too broad or complex), the AI will generate a script and apply it in the advanced code editor, which can be previewed on the page using the Force Experiment Tool.

Ensure your prompts are clear and specific, as shown in the example below, so the AI can accurately understand the requested change.

AI is non-deterministic. This means that given exactly the same prompt twice, it might behave differently. If the result isn't what you expected, you can ask the AI "Please undo the last change and reapply it."

The AI can be talked to. You can ask it for test ideas, ask it to help explain changes, or to explain why your request is not working or being visually applied.

Wherever possible, the AI will convert your requests into changes that fit within the normal visual editor schema. This allows you to toggle to normal mode to view or undo individual changes from the "Changes" tab.

If you have never used the visual editor before, it is recommended to read this doc first and to create one experience in the normal way. This would give the best possible understanding of the standard set of visual editor changes available, conversion tracking, and what the AI is actually generating behind the scenes.

New features in AI mode

In addition to what is possible using the normal visual editor, the AI version has the following extended functionality, only available via prompting:

  • Bulk updates - one operation applied to every element matching a selector. (Content, attributes, etc.)

  • More event triggers and more behaviours - apply transformations on click, hover, scroll into view events, and do things like changing element classes, scrolling the page down or making an element sticky.

  • Element polling / wait for element. Polling can be requested and is applied at the experience level. It wraps all visual editor changes in a check for the polled element to exist on the page before anything executes.

  • Write custom JS/CSS into the Advanced Editor. (For functionality beyond the capabilities of the visual editor, it will write and apply a custom script).

  • Selector authoring plus auto repair - it can target elements you never clicked on, and verifies uniqueness of selectors on the page.

  • Page-matched default styling - it sends a computed style property for common elements like headings and buttons, so inserted content looks native.

As with all AI features, the AI Visual Editor Copilot can be disabled at the account level by updating your account settings, detailed here.

Did this answer your question?