The Evolv AI Web Editor lets you build variants by defining and updating on-page components.
On this page:
- Prepare your environment
- Enable the visual editor functionality
- Create and modify a component
- Testing
Before you start, check out this video that explains how to use the new feature.
Prepare your environment
Visual editing relies on your environment in the Evolv AI Manager having access to a proprietary mutation library.
The "mutate library" is available as a public integration.
- Open the Evolv AI Manager.
- Click on the Integrations menu in the side navigation.
- Click the ADD PUBLIC INTEGRATION drop-down and select the Mutate option.
- Click CREATE to finish adding the integration.
- Click on the Environments menu in the side navigation.
- Select the environment where you want to add the integration.
- Click on the INTEGRATIONS tab and select ADD INTEGRATION.
- Select the Mutate option and click SAVE to finish.
That's it. Your environment is now configured with the mutate library, ready for you to start creating a new project with components.
If you don't have direct access to Integrations, contact support or your customer team to arrange for the mutate integration to be added to your account.
Enable the visual editor
The visual editor functionality must be enabled for the project you're working with.
- Open the Evolv AI Web Editor and create a new project.
- Go to the Project Settings.
- Click the gear icon in the top-right of the window.
- Click the gear icon in the top-right of the window.
- Click the Enable visual editor option and hit SAVE.
The project is now ready for you to create a component.
Create and modify a component
Components are stored at the context level and used to update variants.
To create a new component
- [Optional] Select the variant where you want to use the component.
- You can create a component with either the context, variable, or variant selected.
- Selecting the variant first means the component settings panel opens immediately.
- Click on the arrow icon at the top of the window and move the mouse around the page until you find the element you want to use.
- Click to create the component.
- The component's details will appear in the panel on the right.
- The name of the component is derived from the HTML element.
- You can edit the component name.
- If you need to change the component's selector, click the selector pill, make the changes you need, and press enter.
To modify a component
With the component selected, change any of the property values, and the changes will automatically render on the page.
Any existing values are the computed values for that component.
To remove a change, click on the property label and select the RESET option. You can also remove the value you added, and the original value will be restored.
You're not limited by the component UI. If you want to change a property that's not available in the UI, click on the code tab and add it manually.
To reuse a component
A component is defined by its selector and stored at the context level. You can reuse the same component on every variant inside that context.
Testing
Component changes render instantly, thanks to the mutate library. The library is already available in Edit mode. The mutate integration is only required to test and launch your project.
There are two ways to test your components.
In Edit Mode
After updating the properties of a component, you'll see the changes render immediately.
Click between the variant and Control to see the changes apply, undo and reapply.
It's a good idea to disable the automatic page refresh option to avoid the entire page reloading each time you switch variants.
In QA Mode
QA MODE is the best way to test all your variant changes. It's as close to testing in production as you can get.
Testing in QA MODE requires the addition of the mutate library to the environment where you want to test.
Select the variants you want to test and click the play button to render the combination. The page will reload, and the variants should render as they did in EDIT MODE.