Want to bring cutting-edge interactive content to your site without having to tinker with your CMS? You can embed any content built in Vev anywhere on the web. Simply copy the embed code of your Vev project and paste it into your publishing platform. Here's a quick guide on how to go about it.
Finding the embed code for your project
In order to get the embed code for your Vev project, first you need to publish it to your Vev staging domain. You can find your project's embed code from a few different places, including:
1. Embed Modal within Publish Modal
Once you’ve finished creating your content in Vev:
Click on the Publish icon in the top-right corner
Check the "Embed your site anywhere" box
Publish your project
Click the "Get embed code" link
Copy the embed code
Note: If you want your content to appear full-width on your site, check the Ensure embed fills width of screen box
2. Page Settings in the right panel
On the right-side panel of the Design Editor, click Page settings
Find Embed code and click on the Copy icon
This will redirect you to the embed modal
Copy the code and paste in desired location.
3. Embed in Project Settings
Click the Vev icon in the top-left corner
Hover over File
Select Embed
At the top, select the page you want to embed
Copy the embed code
Paste your embed code to the desired location
Note: You will only need to embed this once. Every time you publish it will update itself. The embed project will automatically update when the cache expires (max. 30 min).
Learn more about the Embed Modal
Since you know where to access your Embed code, let's have a closer look at the functionalities.
Select page to embed
You can embed your entire project with multiple pages into your destination platform. Select the page from the drop-down, which should appear first, and copy the embed script afterward. (Note: The embed script will change for each page).Embed code
Here you will find the embed code for your Vev project. It is dynamic, meaning the code will adjust accordingly to your settings. You can't modify this code — only copy it.Advanced options
We provide advanced options in case your embed does not perform well in your destination platform.
Embed target container
You may face challenges while embedding because of the mismatch between source and destination. This feature helps you to customise your Vev page according to the container you want to embed in.
Go into the Developer Tool in your destination site and inspect the element where you want to embed Vev content.Example:
If you want to target the content under an
idthen you place the value of your id into the form field:Identify the value of the
idIn this case, copy
wp—skip-link—targetPaste this into the “Embed target container” field
If you want to target your Vev content under a
classthen you place the value of your class into the form field:Identify the value of the
classIn this case, copy
wp-block-spacerPaste this into the “Embed target container” field
(Note: add.before the class element value)
Ensure embed fills width of screen
When embedding your Vev content, you can check the box "Ensure embed fills width of screen" to make sure that your content is displayed full-width on your site.
Encapsulate embed on destination page
It's important to properly encapsulate the embedded Vev content on the destination page to ensure that it is not affected by any styles and scripts defined elsewhere on the page. To do this, you can use Shadow DOM technology. Shadow DOM is a web component technology used for isolating HTML, CSS, and JavaScript used in web components. It helps developers create components that are self-contained and reusable. With Shadow DOM, developers can write complex components like a custom video player, without having to worry about any of the underlying code conflicting with the page. It’s also beneficial for browser vendors, as the Shadow DOM helps the browser better optimize and render page elements. Read more about Shadow DOM here.
Please note that this option will be turned on by default and you won't see your changes in the Embed code.
If you encounter any embed issues, turn off the encapsulation, republish, and try again!
You will see in the code that Shadow DOM is turned off (shadowdom=false) as well.
Once you are done copying the Embed code with your settings, click "Enable embed" to copy the code and enable "Embed your site anywhere" in the publish modal. Once you have enabled that option, the button will change to "Copy".
Limitations
#1 Caching
Once you have embedded your Vev content to your desired destination, your browser will cache it. This means your changes may not be reflected immediately after publishing.
Here are three possible ways to workaround this:
Open your browser in Incognito mode and check for the changes.
Try to delete the cache and check for the changes
Just wait and it will usually take an approximate time of 30 minutes to reflect the changes
#2 Security
Due to the security set up in your technical landscape, there can be a possibility that third party codes are disabled. In such cases, Vev content will have limitations. Please reach out to your system admin to check for any such security restrictions.
#3 Breakpoints
Assess your destination container. Choose your main breakpoint in Vev based on your destination. Now remove the breakpoints that are higher that the selected one.
Example:
If you want to add Vev content in a 600px container, then it is recommended to use the “Tablet” device as Main Breakpoint and remove the “Desktop” breakpoint.
Else, there will be issues with respect to alignment and styling.
Troubleshooting
Managing "Empty State"
Have you forgotten to check the "Embed your site anywhere" while getting your embed code? You will most likely see the below screen. Just go back to your project and check the box.
Removing the watermark
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.
Embed Vev Anywhere
CMS
eCommerce
Other Website builders
FAQs
Integrations
”I have installed Google Analytics in Vev and will the embedded page be tracked as well?”
Generally, with the Embed Anywhere feature, your Integrations won't be supported in your destination platform. So, your embedded content won't be tracked. It is important that you have installed Google Analytics in your CMS settings (or for the platform you use).
SEO
”Can my embedded Vev content be indexed by search engines?”
Absolutely! The embedded Vev content can be indexed by search engines.