Looking to add more advanced interactivity and lively animations into your HubSpot content? With Vev’s “Embed Anywhere” feature, it's completely possible—no need for extensive coding, or additional developer expenses.
Simply create your content within Vev—be it modular quizzes, advanced scrollytelling segments, video components, bespoke animations, or parallax effects—and directly integrate it into any HubSpot page. Let’s explore how to seamlessly embed Vev content into your HubSpot site.
Inserting Vev Content in the Hubspot Website Editor
When working in the HubSpot visual website editor, you can insert Vev content by utilizing the video block, which allows you to insert embed code. This approach also works for the Landing page editor.
Press the + icon in the left sidebar.
Search for “Video” and drag this element to where you want to place your Vev content.
Select the “Embed code” option in the panel which appears on the left.
Paste the Vev embed code in the text field which appears.
You can insert Vev either as a block that fills the content column or apply it in full width by enabling the option on the embed snippet.
💡 Tips: If you're embedding Vev as a full-page experience and wish to eliminate the white gaps at the top and bottom of your page, simply paste the below snippet of code before the embed code.
<style>.iframe_wrapper.iframe_wrapper,body{padding:0;margin:0;height:auto;overflow-x:hidden;}</style>
Inserting Vev as a Block in a Post
💡 Note: This method is only suitable for embedding Vev content within the confines of your content column. If you prefer the content to span the full width of the page, please refer to the full-width guide provided below.
While in HubSpot’s blog post edit mode, you should be able to insert custom embed codes:
Press the “Insert” button in the top toolbar.
Select “Embed.”
Paste the Vev embed code and press “Insert.”
This will insert a block with the Vev content, as seen in the video below. You can tweak the width of the Vev content, but the height will be defined by the height of the content in the Vev project.
Inserting Vev with Full Width in a Blog Post
To insert Vev content with full width, you will need to head into the source code of your post and paste the embed code.
Press the “advanced option” in the toolbar.
Select “source code.”
Paste the Vev embed snippet at the desired location. (NB: Remember to check the full width option in the advanced option when fetching the Vev embed code.)
The embedded Vev content will not be visible while you are editing, but if you head into preview, the Vev content should appear 🎉
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.