Skip to main content

Embed Anything

Add third-party forms, widgets, and scripts directly into your Vev project

Jørgen Wigum Lurvik avatar
Written by Jørgen Wigum Lurvik
Updated this week

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:

  1. 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.

  2. 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.

  3. 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.

  4. 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.

Did this answer your question?