Evi Content is an AI-powered tool designed to simplify the process of creating and modifying website experiences using natural language prompts. Evi is primarily designed for users who wish to modify their campaigns but are not familiar with editing code, or wish to improve their text content. This tutorial will guide you through the steps of using this feature effectively.
Access to an AB Tasty account with the Evi Content feature enabled
A campaign created in AB Tasty (Test or Personalization)
Basic understanding of AB Tasty's Visual Editor
Open your AB Tasty campaign in the Visual Editor.
Select the element you want to modify on your website.
Click on Make a change in the context menu.
Tips for effective use - Be as specific as possible in your prompts to get the most accurate results. - Start with simple changes and gradually move to more complex modifications as you become familiar with the tool. - Remember that you can always refine your request if the initial result isn't perfect. - Use Evi for creative ideas - it can suggest wording for CTAs or generate multiple design options. For prompt examples, please refer to the article:
When the Evi interface opens, you'll see an input field asking what you want to do with the selected element.
Enter your desired changes using natural language. For example:
"Move this menu 3 pixels to the left."
"Change the button color to blue and increase its size by 20%."
The Copilot process your request and generate the necessary modifications. The changes are applied on your selected element to preview them in the Visual Editor and related code is generated.
Review the modifications to ensure they match your expectations:
If the changes aren't exactly what you wanted, either click on:
If the changes aren't exactly what you wanted, you can refine your request:
Not exactly what I had in Mind, to refine the request
Provide more specific instructions or clarify your initial prompt.
When you're satisfied with the changes:
Click I like this, validate modification.
A confirmation message appears, and the modifications are added to your campaign variation.
Close the Copilot.
After accepting Evi Content's changes, you can still make manual adjustments using the standard editing options.
For more advanced customization, access the Code Section to directly edit the CSS or JavaScript. Click on Active Changes and hover on the change you want to edit, Click on Menu and Edit:
When you select a large section of your webpage (such as an entire page section, header, or complex container), Evi Content may fail to process your request or return an error indicating that the context limit has been reached.
Why this happens: Evi Content analyzes all elements within your selection to understand the structure and apply modifications. When too many elements are included, the amount of information exceeds Evi Content's processing capacity.
Refine your selection - Click on a more specific element within the area you want to modify, rather than selecting the entire container.
Target individual elements - Instead of selecting a full section, select the specific button, text block, or image you want to change.
Work incrementally - If you need to modify multiple elements in a large area, make changes one element at a time.
Example of how to do selection : Instead of selecting the entire header section, Select the specific navigation menu, logo, or CTA button you want to modify
"Change the text color to blue."
Click Go to validate your request.
Not exactly what I had in Mind, to refine the request (see Step 4).
Leave Module to modify your page manually.
To learn more about the Evi Content, refer to the article Using the Evi Content
Animated Hero Section Headline
As a landing page, I want the main headline in the hero section to grab attention when the page loads.
Effect: The headline should fade in over 1 second, starting from 0% opacity to 100%.
Timing: The animation should begin 500 milliseconds after the page is fully loaded.
Style: Add a slight slide-up motion (10 pixels upward) to make the animation more dynamic.
Behavior: No animation replay if the user scrolls back to the top.
Progressive Image Reveal in Article Cards
On my blog homepage, I want the featured images in article cards to appear progressively as users scroll.
Effect: Apply a fade-in effect combined with a zoom from 95% to 100%.
Trigger: The animation should start when at least 50% of the image is visible in the viewport.
Performance: Use CSS-only animations to avoid JavaScript performance issues.
Hover Glow Effect on "Read More" Links
On my articles page, I want the "Read More" links to have a subtle glow effect when hovered over.
Effect: Create a soft outer glow around the text using a light blue color (#4A90E2).
Duration: Smooth transition over 0.3 seconds.
Behavior: The glow should disappear immediately when the user moves the mouse away.
Animated Scroll-to-Top Button
On my blog, I want a scroll-to-top button to animate when the user reaches the bottom of the page.
Effect: The button should slide in from the right and pulse three times to attract attention.
Trigger: Animation starts when the user scrolls past 80% of the page height.
Behavior: The button should smoothly scroll the page back to the top when clicked.
Add a Parallax Background Effect
On my homepage, I want the background image of the hero section to have a parallax scrolling effect.
Effect: The background should move at half the speed of the foreground content when scrolling.
Style: Add a slight blur to the background to increase the focus on the text.
Performance: Ensure the effect does not impact page load speed.
Highlight Section Headings on Scroll
On my long-form article, I want each section heading to animate when it scrolls into view.
Effect: The heading should slide in from the left with a fade-in effect.
Trigger: Animation should start when the heading is 25% visible in the viewport.
Duration: The animation should complete within 0.5 seconds.
Active Form Field Highlighting
On my checkout form, I want the active input fields to visually stand out.
Effect: Change the border color of the active field to green (#28A745) and add a subtle box shadow.
Behavior: The highlight should disappear immediately when the user clicks outside the field.
Style: Keep the animation subtle to avoid distracting the user.
Step Highlight in Progress Bar
On my multi-step registration form, I want the current step to be visually highlighted in the progress bar.
Effect: Change the current step's background color to blue (#007BFF) with a slight pulse animation.
Behavior: Automatically advance the highlight as users complete steps.
Style: Add labels to show the percentage of completion (e.g., "Step 2 of 5 - 40% Complete").
Animated CTA Button Hover Effect
On my pricing page, I want the "Get Started" button to animate when hovered over.
Effect: The button background should gradually shift from light green (#28A745) to darker green (#1C7D31).
Duration: Transition over 0.4 seconds.
Behavior: The button should return to its original color instantly when the user moves the mouse away.
Pulsing "Add to Cart" Button
On my product page, I want the "Add to Cart" button to pulse periodically.
Effect: Scale the button to 1.05x its size and back over 1 second.
Timing: The animation should repeat every 3 seconds.
Visual Feedback for Invalid Fields
On my checkout form, I want to provide instant visual feedback for invalid inputs.
Effect: The border of invalid fields should flash red (#FF0000) three times.
Behavior: Show an error message beneath the field with a red exclamation icon.
Highlight Cart Section on Hover
On my cart page, I want the summary section to visually stand out when hovered over.
Effect: Add a shadow and change the background color to light yellow (#FFF9C4).
Behavior: The highlight should disappear smoothly over 0.2 seconds after hover.
Show a Custom Welcome Message for Logged-In Users
On my homepage, I want to display a personalized welcome message for returning users.
Effect: Replace the default "Welcome to Our Site" with "Welcome back, [First Name]!" dynamically.
Behavior: The message should appear instantly when the page loads.
Fallback: If no name is available, display "Welcome to Our Site!" as the default text.
Change Background Color Based on User Preference
On my profile page, I want the background to reflect the user's theme preference.
Effect: If the user prefers dark mode, set the background to #121212 and the text to #FFFFFF.
Trigger: The change should occur dynamically when the page is loaded.
Fallback: Use the default light theme for users without a preference.
Countdown Timer for Flash Sales
On my homepage, I want to display a countdown timer to create urgency for ongoing flash sales.
Effect: Display a live countdown showing hours, minutes, and seconds dynamically decreasing.
Style: Use bold red text (#FF0000) with a clean font to make it stand out.
Behavior: Reset the timer when the sale ends and replace it with a "Sale Ended" message.
Personalized Call-to-Action for Returning Visitors
On my product page, I want to tailor the call-to-action text for returning visitors.
Effect: Replace "Add to Cart" with "Add Another Item to Your Cart!" if the user has previous purchases.
Trigger: Update the text immediately when the page loads for known users.
Show Recently Viewed Products
On my product pages, I want to display a horizontal carousel of products the user has recently viewed.
Effect: Populate the carousel with the last 5 products the user clicked on.
Behavior: Allow users to scroll through the carousel horizontally.
Fallback: If no history is available, display the top 5 most popular products.
Display Location-Based Promotions
On my homepage, I want to show special offers based on the user’s location.
Effect: Show "Free Shipping to [City]!" dynamically based on the user’s IP address.
Style: Use a banner with bold, localized messaging at the top of the page.
Auto-Scroll to the First Error in Forms
On my contact form, I want the page to automatically scroll to the first invalid input when users submit the form.
Effect: Add a smooth scroll effect to bring the invalid input into view.
Behavior: Highlight the input with a red border and display an error message beneath it.
Add Smart Autofill for Address Fields
On my checkout form, I want address fields to auto-suggest based on user input.
Effect: Show a dropdown of matching addresses dynamically as users type.
Behavior: Populate the remaining fields (city, state, ZIP) automatically when a suggestion is selected.
Add Keyboard Navigation for Menus
On my navigation bar, I want users to navigate menu items using the keyboard.
Effect: Highlight the current menu item with a blue border when using the Tab key.
Behavior: Ensure Enter activates the menu item, and Escape closes any dropdowns.
Improve Readability with Adjustable Font Sizes
On my article pages, I want users to adjust the font size for better readability.
Effect: Add small, medium, and large size buttons that dynamically change the font size.
Behavior: Maintain the chosen size even when users navigate to another page.
Add Real-Time Validation for Email Fields
On my signup form, I want the email field to validate user input as they type.
Effect: Display a green checkmark when the email format is valid, and a red warning icon when invalid.
Behavior: Show the validation feedback immediately without requiring form submission.
Add Loading Indicators to Buttons
On my checkout page, I want the "Place Order" button to display a loading spinner when clicked.
Effect: Replace the button text with a spinner icon and disable the button until the action completes.
Behavior: Revert to the original text once the order is successfully placed or an error occurs.