Embed Vev content in Webflow

Vev's new Embed Anywhere feature allows you to get your creative web designs and advanced animations directly into your Webflow site

Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

Unsure of how to build advanced web design elements from scratch in Webflow (or simply don’t have the time)? With Vev’s “Embed Anywhere” feature, you can easily plug advanced animations and interactive content directly into your Webflow projects.

Just use Vev’s extensive library of pre-coded components to create immersive content—including 3D objects, horizontal scroll, parallax effects, video scrollytelling, animated charts, and forms—and embed it directly into your Webflow projects. Here’s a step-by-step guide of how to embed your Vev content in Webflow.

Get the embed code for your Vev project

Once you’ve finished creating your content in Vev:

  • Click on the Publish icon in the top right

  • Check the Embed your site anywhere box

  • Click the Get embed code link

  • Copy the embed code
    If you want your content to appear full-width on your Webflow site, check the Ensure embed fills width of screen box

You’re all set! Your Vev embed code is ready to be pasted into Webflow.

There is also another way to get the embed code for your Vev project.

After you publish your content in Vev:

  • Click the Vev icon on the top-left corner

  • Hover over File to see more options

  • Click Embed

  • Find and click the Copy the embed code option

As above, you’re good to go!

Paste your Vev embed code into Webflow

  1. Find the Webflow site you want to edit

  2. Click the Add Elements button from the left menu

  3. Drag and drop a Div Block where you want to embed your Vev content (optional but recommended for keeping your content aligned)

  4. Click the Add Elements button again

  5. Drag and drop Embed from the Components section

  6. A window will open where you can paste the embed code of your Vev project

  7. Save and close the custom code editor

Tip: You can paste the same Vev embed code as many times as you like, should you want to use a certain piece of Vev content multiple times on Webflow.

Note #1: You will only have to perform this embed once for it to work. Every time you publish changes to your Vev content, your Weflow site will get updated as well

Note #2: You need to publish your Vev project to see your embedded content. The following warning message will appear if you copy the embed code without publishing your project.

Watermark

Depending on your project plan, you may see the Vev watermark on your design. Add a Project plan for $7.00 USD/ month to remove this from your project.

Did this answer your question?