Element AI is a new way to create custom interactive elements in Vev. Describe what you want, and Vev builds it as a real, native component on your canvas — fully editable, styleable, and reusable. No embeds, no code, no leaving the editor.
This article walks you through how to use Element AI, write a good prompt, iterate on the result, and reuse what you create.
What you can build
Element AI is great for one-off interactive components you'd otherwise have to build from scratch or embed from somewhere else. Think:
Interactive timelines, counters, and tickers.
Pricing calculators, sliders, and configurations.
Charts and data visualizations.
Image comparisons, hover reveals, and animated infographics.
Forms, quizzes, and sign-ups that send data to your own tools (see Collect data with forms below).
It works best for elements, not whole pages. If you need a full layout, build the page in Vev and use Element AI for the interactive pieces inside it.
Add Element AI
Insert Element AI from the top toolbar of any project, or directly from an empty section. Either click and drag within a section to draw the placeholder for your element, or hold your pointer at the top or the bottom of your canvas to make it a full-width section.
A prompt field appears where you can describe the element you want to build.
Write your prompt
Describe the element, the behavior, and the style — in that order. Specific prompts produce better results than vague ones.
Example prompts:
A vertical timeline with five milestones. Each milestone has a year, a title, and a short description. Animate the line filling in as the user scrolls past.
A testimonial carousel with three quotes. Auto-advance every 5 seconds, with dots for manual navigation. Use a soft, rounded style with subtle shadows.
Add an image for context
You can attach a reference image alongside your prompt — a sketch, a screenshot, a mood board, or a rough design by dropping it into the field. Vev uses it as a visual context when generating the element.
Image context is especially useful when:
You want to match a specific visual style you can't easily describe in words.
You're recreating or adapting a pattern you've seen elsewhere.
The component has a distinctive layout or structure.
Iterate and refine
After the first result lands on your canvas, keep talking to Element AI. Follow-up prompts refine the existing element rather than starting over:
"Make the hover state softer."
"Add a fourth milestone between 2022 and 2024"
"Add a subtle fade-in as each milestone enters view."
Every version is saved, so you can jump back to an earlier iteration whenever you want.
Fix errors with one click
If something breaks, use the Fix button or describe the issue to the AI. Element AI will diagnose the issue and apply a correction.
Edit it like any other Vev element
Every Element AI created comes with a real property panel. Colors, text, spacing, animation timing, and component-specific behavior are exposed as proper controls on the right — not buried in code.
That's what makes Element AI fit a real team workflow: a designer generates and refines the element, then hands it off. Editors, writers, and anyone else on the project can adjust it from the property panel without touching the prompt.
Reuse across projects
Save any AI-generated element to a library, and it becomes available across your entire team. Generate it once, polish it right, and every collaborator on your team can drop it into their projects from that point on.
Tips for better results
Describe the component, the behavior, and the style — in that order. It matches how Element AI builds.
Be specific about interactivity. "Hover reveals the description" beats "Interactive card".
Reference real content. Include actual copy, numbers, or labels in your prompt — the AI will use them.
Attach an image when words fall short. A rough sketch gets you closer than a paragraph.
Iterate rather than restart. Follow-up prompts are faster and preserve what's already working.
Polish once, reuse everywhere. Get the element right with AI, then save it to a library so the rest of your team can use it without prompting.
Collect data with forms
Element AI can build forms, quizzes, and sign-ups: the fields, layout, validation, and thank-you message. It does not store what visitors submit, though. Element AI elements have no built-in database, and a generated form isn't connected to HubSpot or any other form tool. To collect submissions, tell the element where to send them.
Two methods are quick to set up and keep the data in a place you control:
Google Sheet: each submission becomes a new row. You decide who can open the sheet.
Google Form: submissions are saved as Google Form responses, and Google can email you each new response.
If you need the data in a CRM or another tool, see Other options below.
Option 1: Send submissions to a Google Sheet
Create a Google Sheet. In the first row, add one column header per field, using simple names like timestamp, name, email, message, and consent.
Open Extensions › Apps Script, replace the code with the script below, and save.
Click Deploy › New deployment, choose Web app, set Execute as to Me and Who has access to Anyone, then click Deploy and approve the permissions.
Copy the web app URL (it ends in /exec) and use it in your prompt.
function doPost(e) {
const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheets()[0];
const headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
const row = headers.map(h => h === 'timestamp' ? new Date() : (e.parameter[h] || ''));
sheet.appendRow(row);
return ContentService.createTextOutput('ok');
}The script writes each field into the column with the same name, so the field names in your prompt must match the headers exactly. If you edit the script later, deploy a new version under Deploy › Manage deployments.
Example prompt:
Build a contact form with Name (required), Email (required, must be a valid email), Message, and a required checkbox "I agree that my details are stored so you can contact me", with a link to our privacy policy. On submit, send the answers as URL-encoded form data (not JSON) in a POST request to https://script.google.com/macros/s/YOUR-SCRIPT-ID/exec using fetch with mode "no-cors". Use the field names name, email, message, consent. Disable the button while sending, then replace the form with "Thanks, we'll be in touch."
Option 2: Send submissions to a Google Form
Create a Google Form with one Short answer or Paragraph question per field. Make sure the form doesn't require respondents to sign in.
Find the ID for each question: open the form's ⋮ menu › Get pre-filled link, type a sample answer in every question, and click Get link. The copied link contains one entry.123456789 ID per question.
Copy the form ID from the link (the part between /d/e/ and /viewform) and use it with the entry IDs in your prompt.
To get an email for every submission, open the Responses tab, click ⋮, and turn on Get email notifications for new responses. You can also link the form to a Google Sheet from the same tab.
Example prompt:
Build a sign-up form with Name (required), Email (required, must be a valid email), and a required consent checkbox with a link to our privacy policy. On submit, send the answers as URL-encoded form data in a POST request to https://docs.google.com/forms/d/e/YOUR-FORM-ID/formResponse using fetch with mode "no-cors". Map Name to entry.1111111111, Email to entry.2222222222, and Consent to entry.3333333333. Then replace the form with "Thanks for signing up!"
Other options: automation tools
To send submissions to a CRM such as HubSpot or Salesforce, or to several tools at once, use a webhook in an automation tool:
Make: create a scenario, add the Webhooks › Custom webhook module, and copy the webhook URL.
Zapier: create a Zap with the Webhooks by Zapier › Catch Hook trigger, and copy the URL.
n8n: add a Webhook node set to POST, and copy the production URL.
Ask Element AI to send the answers as JSON in a POST request to that URL, with the exact field names you want. Then add a step after the webhook that maps the fields, for example HubSpot › Create or Update a Contact in Make.
Test before you share
Publish the project, open the live page, and submit the form once with test data. Check that the submission appears in your sheet, form responses, or automation tool. If nothing arrives, check that the field names or entry IDs in your prompt match exactly, and open your browser's developer console on the published page for errors.
Consent and GDPR
If the form collects personal data, align the setup with your GDPR and privacy policy before you publish:
Add a required consent checkbox that says what the data is used for, with a link to your privacy policy, and store the consent value with the submission.
Only collect the fields you need.
Limit access to the sheet, form, or tool that receives the data to the people who need it, and decide how long you keep it.
Check that the tool storing the data (for example, Google Workspace) is approved under your organization's data processing terms.
Form tips
Spell out required fields and formats (email, phone, number range). Element AI adds checks in the browser.
Ask for a success message and a loading state on the button so visitors don't submit twice.
Keep field names stable. Your sheet, form, or mapping depends on them. If you iterate on the form, ask Element AI to keep the same field names.
Remember the destination URL is public. It's included in the published page. Only use a URL that receives submissions, and never paste API keys or private tokens into a prompt.
Track form submissions
To track the element as a whole (for example, when it's clicked or scrolled into view), select it, open the Interactions tab, and add a Track Event action. Interactions can't see what happens inside the generated element, such as a completed submission. For that, ask Element AI to fire a tracking event when the form is submitted successfully.
Good to know
No built-in storage. Element AI can't save submissions in Vev. You always need an external destination.
No direct HubSpot or Salesforce connection. Sending straight from the page to these APIs is usually blocked by the browser (CORS) and would expose your credentials. Use an automation tool in between. If you want HubSpot's own form handling, use the HubSpot form element instead.
A form overlay isn't a content lock. A form that covers content ("fill in the form to read more") only hides it visually; the content is still in the page. To restrict access properly, use password protection or email whitelisting.
What to expect in Beta
Element AI is in Beta, so a few things are worth knowing:
Generation is asynchronous — most elements take a few seconds to a minute to appear on your canvas.
Results will vary between prompts. If one attempt doesn't land, rephrase or iterate rather than assuming it can't be done.
Element AI builds elements, not full pages.
Generated elements run client-side in the browser, like any other Vev element.