AI variation development agent
Products
- Optimizely Web Experimentation
- Optimizely Personalization
The availability of features may depend on your plan type. Reach out to your Customer Success Manager if you have any questions.
Mark (Optimizely Agent Platform) uses AI in the Visual Editor to help you modify and update existing website elements, create new ones, and generate and apply enhancement suggestions, while maintaining brand consistency by automatically retrieving page styles.
Powered by Mark, the variation development agent lets you make changes with natural language. You do not need to write custom code. The development agent also generates a variation for you in a few clicks. It uses the changes already made in your experiment's other variations to suggest what to build next. You can generate additional variations this way without repeating the same instructions each time.
For example, the development agent can complete the following tasks:
- Update a call-to-action's (CTA) styles with dynamic effects to increase clicks, while keeping brand guidelines.
- Add a butter bar with a sale promotion that includes a countdown timer.
- Provide suggestions to improve the menu layout for better discoverability.
- Generate different variants of a section of the page to accomplish a specific goal.
- Redesign a webpage based on a theme.
- Create a reusable template, such as a newsletter signup modal, that you can apply across experiments and campaigns.
Note
The variation development agent is only available in the new Visual Editor.
Prerequisites
See Configure Web Experimentation for Mark and ensure you have the following prerequisites:
- You must log in through Opti ID.
- You must have your Web Experimentation or Personalization and Mark instance connected in the Product Connections.
- You must be using the new version of the Visual Editor.
- You must have the following tools Enabled in Mark chat:
- exp_ve_apply_change
- exp_ve_element_glob
- exp_ve_element_grep
- exp_ve_element_read
- exp_ve_element_tree
- exp_ve_get_change_schema
- exp_ve_get_selector
- exp_ve_list_pending_changes
- exp_ve_revert_change
- exp_ve_validate_change
Use Mark to edit a variation in the Visual Editor
- Go to Optimizations and select an experiment or campaign.
- Go to Design > Variations and click Visual Editor in that variation's row.
- Click Build Variation.
- Enter what you would like to change about the page, such as Improve the Get started button to increase more clicks. See Tips and tricks for help with effective prompt writing for Mark. Mark uses the Visual Editor to make the updates and validates the results.
- Click Save All if you like Mark's changes. If not, iterate with Mark until the changes look good or click Undo All to start over.
You can repeat this process to update anything on the site, including updates that require custom code to change, as Mark generates that custom code for you.
Generate a new variation with the development agent
Instead of building each variation from scratch, you can let the development agent create one for you. The agent reviews the changes already made in your experiment's other variations and it then suggests distinct, high-impact ideas for what to build next. Your role is to review and approve the changes.
- Open an experiment that has at least one variation with changes.
- In the variation bar, click + and select Generate New Variation. Optimizely creates a variation and starts the development agent.
- Review the variation ideas the agent suggests, then do one of the following:
- Select a suggested idea for the agent to build.
- Click Something else to describe a different change.
- Click Skip to build the variation yourself.
- Review the changes the agent applies, including the before-and-after comparison and the reasoning for each change.
- Click Save All to keep the changes, or Undo All to discard them.
How it works
- Context-aware suggestions – The agent uses the changes from your experiment's other variations as context. Its ideas complement what you have already tested instead of repeating it.
- High-impact focus – The agent targets high-impact areas such as the hero section and primary calls to action.
- Reviewer control – The agent applies the changes as a preview. Optimizely saves them only after you click Save All.
Create a template with the development agent
A template is a reusable component, such as a button, form, or modal. You create it once and apply it to any variation, experiment, or campaign. The development agent builds templates from a description, so you do not need a developer to code them. Applying a saved template does not call the agent, so you use Mark credits only when you create the template.
- Open a variation in the Visual Editor.
- Start the development agent in one of the following ways:
- Click Templates, click Create Template, and select Template with Mark.
- Open Mark chat in the Visual Editor.
- Describe the template you want, such as Create an exit intent modal template to sign up for newsletters and updates to create additional leads. Mark builds the template using your site's styles and previews it on the page.
- Review the preview. Iterate with Mark until the template meets your needs, or click Undo All to start over.
- Click Add to Templates. Optimizely saves the template to your list of templates and opens its settings.
- Review the template's fields, such as Name, Headline, and Body text, and change them if needed.
- Click Save to apply the template to the variation.
Reuse the template
Apply a saved template to other variations and experiments without prompting Mark again or using more credits. In the Visual Editor, click Templates and select the template. Change its fields if needed, and click Save. See Add templates.
Tips and tricks
Use cases
The dev agent, powered by Mark, changes how you create and optimize digital experiences. By using natural language processing and maintaining brand consistency, it lets marketers and developers rapidly iterate, test, and personalize website elements without requiring extensive coding.
The following are key scenarios where the agent significantly enhances your workflow:
Example credit usage
The following figures represent the average number of Mark credits consumed when calling the AI variation development agent for different use cases:
- Add a pop up modal to sign up to become a member – 30
- Add a promotional banner at the top that includes a coupon code that can be copied – 30
- Update the navigation bar so each button has a spacing of 12px – 70
- Update the menu to be more visually appealing with a goal to increase clicks – 70
- Add an enlargement effect to the product catalog items upon hover – 70
- Add a 24 hour countdown timer below the banner – 70
- Add a modal on the favorite icon displaying a message for visitors to add to the list of favorites – 70
- Introduce a "Why Buy From Us?" section highlighting unique selling propositions – 130
- Add an add-to-cart button on every product catalog – 130
- Make the navigation bar sticky so it persists even when I scroll down – 130
- Rearrange the menu and move the "Sale" button as the first item – 130
- Redesign the page with a more modern and visually driven layout that increases user engagement and conversion rates – 130
Important
Credit consumption is dependent on your webpage structure and scope of changes applied.
Troubleshoot
The following sections cover common errors you may encounter when using the variation development agent. Each issue includes the likely cause and steps to resolve it.
Note
Any code Mark generates is a custom code solution and falls outside the scope of Optimizely Support.
Connection lost
A Content Security Policy (CSP) on your website is blocking the connection. Resolve this by doing one of the following:
- Install the Optimizely Web companion extension and enable it.
- Add the required sources to your site's CSP header.
Unable to find the selector
This error is caused by disabled Mark tools. Enable the necessary tools.
Something unexpected happened
This error indicates that your Mark instance is not connected to your Experimentation or Personalization instance. To resolve it, a Mark Administrator must connect the correct Mark instance to your Experimentation or Personalization instance. See Get started with Mark for administrators for steps on connecting products.
Note
If you use Opti ID, administrators can turn off generative AI in the Opti ID Admin Center. See Turn generative AI off across Optimizely applications.