This article focuses on the Web Editor's main features. For in-depth information on the different features, refer to the linked articles at the end of each section below.
The Evolv AI Web Editor (the Web Editor) is a desktop application used to build and QA optimization ideas that will be launched through the Evolv AI Manager. Features range from defining the contexts your ideas will appear in, to implementing design ideas, to QAing how those ideas render together. In this guide, we will explore the various features of the Web Editor, helping you make the most of this powerful tool.
In the Web Editor, the term "Projects" refers to individual configuration files created or exported from the Manager. At this time, projects in the Web Editor do not automatically share information with corresponding projects in the Manager.
Projects in the Web Editor have two working modes:
- Coding the Optimization
- Generating variant designs with the Web Editor
QA Mode offers an interface to verify that implemented variants don’t conflict with one another when combined, an essential step in quality assurance. Users can also generate links to share variants and combinations of variants with others, allowing them to preview in a web browser.
Importing and Exporting Projects
When you save a project in the Web Editor, it creates a configuration file (.YML files) containing the information and code to render your variants. These files can be imported to a new or existing project in the Manager. Upon importing a file to the Manager, you’ll have the opportunity to review the difference between what’s in your project Draft and the configuration you’re uploading.
Conversely, project configuration files can be exported from the Manager and saved locally. For larger teams, using a third-party version control system is a best practice for managing changes to individual configuration files.
Project Settings and Dependencies
Projects in the Web Editor have a few settings to make life easier for the developers implementing variant designs. These settings include the base URL, SASS integration, removal of unused code, and code dependencies.
Learn more: About Project Dependencies in the Web Editor
In Edit Mode you can define the contexts your variants will appear in and implement variants by modifying the components identified in the context.
The Edit Mode experience is comprised of:
- A Contexts pallet – Lists contexts and the variables and variants in each
- A Components pallet - Lists the components in the selected context
- An edit panel on the right that includes the various features for configuring context definitions and implementing variant code
- A website preview area in the center that support various device sizes and a developer mode for inspecting the website code
Contexts are the conditions in your digital experience you want to test your ideas. In the Web Editor, variables and variants are grouped by their context. A context can be defined by URL match criteria.
Learn more: About Contexts
Components are the elements of the context that can be modified by a variant. Components are defined by their CSS selector.
Learn more: About Components
Variables and Variants
The ideas you have to optimize your digital experience can be expressed in two parts:
- Variables – A variable represents an aspect of the digital experience that can vary, or change. Functionally, variables are like A/B tests, they include a control variant that is used to compare the performance of one or more non-control variants.
- Variants – A variant represents a distinct version of an aspect of the digital experience that you want to test.
Variants are grouped by variable, and variables are grouped by context.
Using the generative AI capabilities, the Web Editor can generate variant code based on the variant description. Alternatively, you can customize
The Edit Panel
The Edit panel, located on the right side of the screen, changes based on the selected content in the Context and Component pallets. You can edit contexts, variables, variants, and components here. It's divided into multiple tabs to edit various aspects of the selected content.
The Preview Panel and Device Options
The Preview panel acts like a browser, allowing you to navigate through a website and modify the viewport's dimensions. It also provides access to developer tools for deeper inspection. Changes made in the Edit panel will render in the Preview panel. Device options include supported device sizes, orientation, and zoom capabilities.
QA Mode is where you can verify that your variants are working as expected and in combination with one another. The preview panel in QA Mode replicates a production-like environment using the Evolv snippet you’ve placed on your website or a placeholder snippet.
The QA Mode experience is comprised of:
- A tabbed pallet on the left that includes a list of variables and variants organized by context, as well as a tab that shows which variants have screenshots associated with them
- A website preview area with actions to capture screenshots and generate preview links to share
Verifying context matching criteria
QA Mode also allows you to verify when a context URL matching criteria is met as you navigate through a site.
Learn more: Verifying context targeting criteria
Generating preview links
When the Evolv AI snippet is installed on your website you will be able to generate preview links to share with your team and other stakeholders allowing them to view variants and combinations of variants in other browsers. Preview links cannot be generated if you use a placeholder snippet.
Capturing screenshots of variants and combinations
The Web Editor supports saving screenshots of individual variants. Screenshots taken of individual variants will be available in the Manager once the configuration file is imported. However you can also take screenshots of variant combinations and save them to your device.
Previewing active combinations
When a project is live, a list of active combinations in the project allows you to quickly preview these combinations and see the variants included in them.
Customize the Web Editor's theme, code editor theme, and preferences through the application-level settings.