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 today

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?