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
Find the Webflow site you want to edit
Click the Add Elements button from the left menu
Drag and drop a Div Block where you want to embed your Vev content (optional but recommended for keeping your content aligned)
Click the Add Elements button again
Drag and drop Embed from the Components section
A window will open where you can paste the embed code of your Vev project
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.