The Embed Anything component allows you to insert third-party content directly into your Vev project. This is done by embedding external code such as HTML or iFrames. It is commonly used for:
Forms (e.g., Typeform, Google Forms)
Surveys or quizzes
Third-party widgets (e.g., chatbots, booking tools, social feeds)
Custom scripts from trusted providers
In short, Embed Anything brings outside content into your Vev site.
How to Add Embed Code
To add third-party code into your project with the Embed Anything component:
Add the Component
Drag and drop the Embed Anything component from the Add Menu (Shortcut: M) onto your page.
Double-click the component to open its Properties settings.
Paste Your Embed Code
Insert your HTML or iFrame code into the Embed HTML field.
Use CTRL/CMD + SHIFT + V to paste cleanly without formatting issues.
Preview or Publish
Embedded content will only display in preview mode or after the site is published.
It will not appear inside the editor while you are building.
Validate Your Code
Confirm the third-party embed code uses correct HTML syntax.
Use keyboard arrow keys to navigate inside the embed field if needed.
Configuration Options
The Embed Anything component includes several settings that control how embedded content is handled:
Encapsulate
Loads the embed inside its own isolated browser instance.
Prevents conflicts between the third-party code and your Vev site.
Render on Visible
Delays loading of the embed until the component is visible on the page.
Helps improve performance by not loading hidden content too early.
Static HTML
Inserts only the raw HTML directly into the page’s DOM and disables scripts.
Best for lightweight embeds that don’t require interactivity.
Allow Inner Scroll
Adds a scrollbar if the embedded content is larger than the container.
Notes on Option Availability
When Encapsulate is enabled, some other settings are not available:
Static HTML is disabled because encapsulated content always runs with scripts.
Render on Visible is disabled because encapsulated embeds always load immediately.
Best Practices for Using Embed Anything
Follow these best practices to ensure smooth performance, responsiveness, and reliability:
Performance
Use Render on Visible for embeds that are lower on the page to reduce initial load time.
Avoid loading unnecessary or very large scripts.
Choosing the Right Mode
Use Encapsulate for complex third-party scripts that may interfere with your site’s styling or functionality.
Use Static HTML only for simple content (like static markup or lightweight widgets) or for adding tracking scripts.
Sizing and Responsiveness
Test the width and height of your Embed Anything component.
The dimensions defined in the third-party script will adapt to the size of the Embed Anything component placed on the Vev canvas.
Use flex layouts in your project wherever possible.
This ensures the embedded content adjusts gracefully across different screen sizes and improves page responsiveness.
Accessibility
Make sure embedded forms, videos, or widgets are keyboard-accessible.
Add descriptive labels or titles when the third-party embed allows it.
Security & Reliability
Only use embed code from trusted third-party providers.
Test embeds across devices and browsers to ensure they display correctly.