# Prompt Inspiration library for Evi Content

To learn more about the Evi Content, refer to the article [Using the Evi Content](/web-experimentation-and-personalization/editors-and-widget/visual-editor/using-the-editor-copilot.md)

## User Engagement  <a href="#h_01jfjhdwpbkdvyfky4mgaev71j" id="h_01jfjhdwpbkdvyfky4mgaev71j"></a>

### Increase time spent on site <a href="#h_01jfjhe02eepewqzpfwb0vecxk" id="h_01jfjhe02eepewqzpfwb0vecxk"></a>

| **Animated Hero Section Headline**                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>As a landing page, I want the main headline in the hero section to grab attention when the page loads.</p><ul><li><strong>Effect:</strong> The headline should fade in over 1 second, starting from 0% opacity to 100%.</li><li><strong>Timing:</strong> The animation should begin 500 milliseconds after the page is fully loaded.</li><li><strong>Style:</strong> Add a slight slide-up motion (10 pixels upward) to make the animation more dynamic.</li><li><strong>Behavior:</strong> No animation replay if the user scrolls back to the top.</li></ul> |

| **Progressive Image Reveal in Article Cards**                                                                                                                                                                                                                                                                                                                                                                                                          |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| <p>On my blog homepage, I want the featured images in article cards to appear progressively as users scroll.</p><ul><li><strong>Effect:</strong> Apply a fade-in effect combined with a zoom from 95% to 100%.</li><li><strong>Trigger:</strong> The animation should start when at least 50% of the image is visible in the viewport.</li><li><strong>Performance:</strong> Use CSS-only animations to avoid JavaScript performance issues.</li></ul> |

### Boost interaction with key elements <a href="#h_01jfjhpgrp247qbgy3k8jt8p56" id="h_01jfjhpgrp247qbgy3k8jt8p56"></a>

| **Hover Glow Effect on "Read More" Links**                                                                                                                                                                                                                                                                                                                                                                          |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>On my articles page, I want the "Read More" links to have a subtle glow effect when hovered over.</p><ul><li><strong>Effect:</strong> Create a soft outer glow around the text using a light blue color (#4A90E2).</li><li><strong>Duration:</strong> Smooth transition over 0.3 seconds.</li><li><strong>Behavior:</strong> The glow should disappear immediately when the user moves the mouse away.</li></ul> |

| **Animated Scroll-to-Top Button**                                                                                                                                                                                                                                                                                                                                                                                                                           |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>On my blog, I want a scroll-to-top button to animate when the user reaches the bottom of the page.</p><ul><li><strong>Effect:</strong> The button should slide in from the right and pulse three times to attract attention.</li><li><strong>Trigger:</strong> Animation starts when the user scrolls past 80% of the page height.</li><li><strong>Behavior:</strong> The button should smoothly scroll the page back to the top when clicked.</li></ul> |

### Make visuals more engaging <a href="#h_01jfjhtjk1fjjyzb8ccsas2187" id="h_01jfjhtjk1fjjyzb8ccsas2187"></a>

| **Add a Parallax Background Effect**                                                                                                                                                                                                                                                                                                                                                                                                         |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>On my homepage, I want the background image of the hero section to have a parallax scrolling effect.</p><ul><li><strong>Effect:</strong> The background should move at half the speed of the foreground content when scrolling.</li><li><strong>Style:</strong> Add a slight blur to the background to increase the focus on the text.</li><li><strong>Performance:</strong> Ensure the effect does not impact page load speed.</li></ul> |

| **Highlight Section Headings on Scroll**                                                                                                                                                                                                                                                                                                                                                                    |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>On my long-form article, I want each section heading to animate when it scrolls into view.</p><ul><li><strong>Effect:</strong> The heading should slide in from the left with a fade-in effect.</li><li><strong>Trigger:</strong> Animation should start when the heading is 25% visible in the viewport.</li><li><strong>Duration:</strong> The animation should complete within 0.5 seconds.</li></ul> |

## Conversion Optimization <a href="#h_01jfjhtvxjagefctj9wtbv3nah" id="h_01jfjhtvxjagefctj9wtbv3nah"></a>

### Optimize conversion funnels <a href="#h_01jfjhv5hk3y74n4z63pmtrm3b" id="h_01jfjhv5hk3y74n4z63pmtrm3b"></a>

| **Active Form Field Highlighting**                                                                                                                                                                                                                                                                                                                                                                                                     |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>On my checkout form, I want the active input fields to visually stand out.</p><ul><li><strong>Effect:</strong> Change the border color of the active field to green (#28A745) and add a subtle box shadow.</li><li><strong>Behavior:</strong> The highlight should disappear immediately when the user clicks outside the field.</li><li><strong>Style:</strong> Keep the animation subtle to avoid distracting the user.</li></ul> |

| **Step Highlight in Progress Bar**                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| <p>On my multi-step registration form, I want the current step to be visually highlighted in the progress bar.</p><ul><li><strong>Effect:</strong> Change the current step's background color to blue (#007BFF) with a slight pulse animation.</li><li><strong>Behavior:</strong> Automatically advance the highlight as users complete steps.</li><li><strong>Style:</strong> Add labels to show the percentage of completion (e.g., "Step 2 of 5 - 40% Complete").</li></ul> |

### Increase click-through rates (CTR) on CTAs <a href="#h_01jfjhvmbvxahx85x76nknn52p" id="h_01jfjhvmbvxahx85x76nknn52p"></a>

| **Animated CTA Button Hover Effect**                                                                                                                                                                                                                                                                                                                                                                                                  |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>On my pricing page, I want the "Get Started" button to animate when hovered over.</p><ul><li><strong>Effect:</strong> The button background should gradually shift from light green (#28A745) to darker green (#1C7D31).</li><li><strong>Duration:</strong> Transition over 0.4 seconds.</li><li><strong>Behavior:</strong> The button should return to its original color instantly when the user moves the mouse away.</li></ul> |

| **Pulsing "Add to Cart" Button**                                                                                                                                                                                                                                     |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>On my product page, I want the "Add to Cart" button to pulse periodically.</p><ul><li><strong>Effect:</strong> Scale the button to 1.05x its size and back over 1 second.</li><li><strong>Timing:</strong> The animation should repeat every 3 seconds.</li></ul> |

### Reduce cart abandonment <a href="#h_01jfjhwtefmp2q76rtdbg3jeb6" id="h_01jfjhwtefmp2q76rtdbg3jeb6"></a>

| **Visual Feedback for Invalid Fields**                                                                                                                                                                                                                                                                           |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>On my checkout form, I want to provide instant visual feedback for invalid inputs.</p><ul><li><strong>Effect:</strong> The border of invalid fields should flash red (#FF0000) three times.</li><li><strong>Behavior:</strong> Show an error message beneath the field with a red exclamation icon.</li></ul> |

| **Highlight Cart Section on Hover**                                                                                                                                                                                                                                                                                    |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>On my cart page, I want the summary section to visually stand out when hovered over.</p><ul><li><strong>Effect:</strong> Add a shadow and change the background color to light yellow (#FFF9C4).</li><li><strong>Behavior:</strong> The highlight should disappear smoothly over 0.2 seconds after hover.</li></ul> |

## Personalization <a href="#h_01jfjhxdmc2sgc4wkwy33f33rp" id="h_01jfjhxdmc2sgc4wkwy33f33rp"></a>

### Adapt content to audience segments <a href="#h_01jfjhyknycp6e6yzfgx189z8w" id="h_01jfjhyknycp6e6yzfgx189z8w"></a>

| **Show a Custom Welcome Message for Logged-In Users**                                                                                                                                                                                                                                                                                                                                                                                         |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>On my homepage, I want to display a personalized welcome message for returning users.</p><ul><li><strong>Effect:</strong> Replace the default "Welcome to Our Site" with "Welcome back, \[First Name]!" dynamically.</li><li><strong>Behavior:</strong> The message should appear instantly when the page loads.</li><li><strong>Fallback:</strong> If no name is available, display "Welcome to Our Site!" as the default text.</li></ul> |

| **Change Background Color Based on User Preference**                                                                                                                                                                                                                                                                                                                                                                   |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>On my profile page, I want the background to reflect the user's theme preference.</p><ul><li><strong>Effect:</strong> If the user prefers dark mode, set the background to #121212 and the text to #FFFFFF.</li><li><strong>Trigger:</strong> The change should occur dynamically when the page is loaded.</li><li><strong>Fallback:</strong> Use the default light theme for users without a preference.</li></ul> |

### Add dynamic elements for engagement <a href="#h_01jfjhyzh8a8rjx52aj3bx7nfr" id="h_01jfjhyzh8a8rjx52aj3bx7nfr"></a>

| **Countdown Timer for Flash Sales**                                                                                                                                                                                                                                                                                                                                                                                                                        |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>On my homepage, I want to display a countdown timer to create urgency for ongoing flash sales.</p><ul><li><strong>Effect:</strong> Display a live countdown showing hours, minutes, and seconds dynamically decreasing.</li><li><strong>Style:</strong> Use bold red text (#FF0000) with a clean font to make it stand out.</li><li><strong>Behavior:</strong> Reset the timer when the sale ends and replace it with a "Sale Ended" message.</li></ul> |

| **Personalized Call-to-Action for Returning Visitors**                                                                                                                                                                                                                                                                                                     |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <ul><li><p>On my product page, I want to tailor the call-to-action text for returning visitors.</p><ul><li><strong>Effect:</strong> Replace "Add to Cart" with "Add Another Item to Your Cart!" if the user has previous purchases.</li><li><strong>Trigger:</strong> Update the text immediately when the page loads for known users.</li></ul></li></ul> |

### Improve relevance of recommendations <a href="#h_01jfjhzh6g5v5yfyn6qawctnxd" id="h_01jfjhzh6g5v5yfyn6qawctnxd"></a>

| **Show Recently Viewed Products**                                                                                                                                                                                                                                                                                                                                                                                               |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>On my product pages, I want to display a horizontal carousel of products the user has recently viewed.</p><ul><li><strong>Effect:</strong> Populate the carousel with the last 5 products the user clicked on.</li><li><strong>Behavior:</strong> Allow users to scroll through the carousel horizontally.</li><li><strong>Fallback:</strong> If no history is available, display the top 5 most popular products.</li></ul> |

| **Display Location-Based Promotions**                                                                                                                                                                                                                                                                         |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>On my homepage, I want to show special offers based on the user’s location.</p><ul><li><strong>Effect:</strong> Show "Free Shipping to \[City]!" dynamically based on the user’s IP address.</li><li><strong>Style:</strong> Use a banner with bold, localized messaging at the top of the page.</li></ul> |

## User Experience (UX) <a href="#h_01jfjhzt5ecj3pa06rx4ppzdfc" id="h_01jfjhzt5ecj3pa06rx4ppzdfc"></a>

### Simplify user journeys <a href="#h_01jfjhzxv70z0w78tfmtsz088n" id="h_01jfjhzxv70z0w78tfmtsz088n"></a>

| **Auto-Scroll to the First Error in Forms**                                                                                                                                                                                                                                                                                                            |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| <p>On my contact form, I want the page to automatically scroll to the first invalid input when users submit the form.</p><ul><li><strong>Effect:</strong> Add a smooth scroll effect to bring the invalid input into view.</li><li><strong>Behavior:</strong> Highlight the input with a red border and display an error message beneath it.</li></ul> |

| **Add Smart Autofill for Address Fields**                                                                                                                                                                                                                                                                                          |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>On my checkout form, I want address fields to auto-suggest based on user input.</p><ul><li><strong>Effect:</strong> Show a dropdown of matching addresses dynamically as users type.</li><li><strong>Behavior:</strong> Populate the remaining fields (city, state, ZIP) automatically when a suggestion is selected.</li></ul> |

### Enhance accessibility <a href="#h_01jfjj0b991hvxe1xyk9w85r9q" id="h_01jfjj0b991hvxe1xyk9w85r9q"></a>

| **Add Keyboard Navigation for Menus**                                                                                                                                                                                                                                                                               |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>On my navigation bar, I want users to navigate menu items using the keyboard.</p><ul><li><strong>Effect:</strong> Highlight the current menu item with a blue border when using the Tab key.</li><li><strong>Behavior:</strong> Ensure Enter activates the menu item, and Escape closes any dropdowns.</li></ul> |

| **Improve Readability with Adjustable Font Sizes**                                                                                                                                                                                                                                                                                                 |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>On my article pages, I want users to adjust the font size for better readability.</p><ul><li><p></p><ul><li><strong>Effect:</strong> Add small, medium, and large size buttons that dynamically change the font size.</li><li><strong>Behavior:</strong> Maintain the chosen size even when users navigate to another page.</li></ul></li></ul> |

### Reduce friction and improve usability <a href="#h_01jfjj0tzy33an55aez6whadva" id="h_01jfjj0tzy33an55aez6whadva"></a>

| **Add Real-Time Validation for Email Fields**                                                                                                                                                                                                                                                                                                 |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>On my signup form, I want the email field to validate user input as they type.</p><ul><li><strong>Effect:</strong> Display a green checkmark when the email format is valid, and a red warning icon when invalid.</li><li><strong>Behavior:</strong> Show the validation feedback immediately without requiring form submission.</li></ul> |

| **Add Loading Indicators to Buttons**                                                                                                                                                                                                                                                                                                                                    |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| <p>On my checkout page, I want the "Place Order" button to display a loading spinner when clicked.</p><ul><li><strong>Effect:</strong> Replace the button text with a spinner icon and disable the button until the action completes.</li><li><strong>Behavior:</strong> Revert to the original text once the order is successfully placed or an error occurs.</li></ul> |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.abtasty.com/web-experimentation-and-personalization/editors-and-widget/visual-editor/using-the-editor-copilot/prompt-inspiration-library-for-visual-editor-copilot.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.