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
After completing your design creation in Vev:
Click on the Publish icon in the top right corner
Check the "Embed your site anywhere" box
Click the "Get embed code" link
Copy the embed code
Note: If you haven't activated the embed feature in step 2, simply click on Enable embed and then copy your embed code.
Publish your project 🚀
Note: You'll only need to embed your code once. Each time you publish, it automatically updates. The embedded project refreshes itself either when the cache expires (maximum 30 minutes) or when you manually clear the cache.
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 customize 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 have the option to check the box labeled "Ensure embed fills width of screen." This ensures that your content is displayed across the full width of your website's screen.
Encapsulate embed on destination page
Encapsulating the embed on the destination page is crucial to ensure that your Vev content remains unaffected by external styles and scripts. This helps maintain its integrity and functionality. To achieve this, we utilize shadow DOM technology.
Shadow DOM is a powerful web component technology that isolates HTML, CSS, and JavaScript within a component, shielding it from external interference. This enables developers to create self-contained and reusable components, such as custom video players, without worrying about conflicts with the surrounding page code. Additionally, shadow DOM aids browser optimization and rendering by enhancing element isolation. Read more about Shadow DOM here.
Please note that Shadow DOM encapsulation is enabled by default, and you won't observe immediate changes in the embed code. If you encounter any issues with embedding, you can disable encapsulation, republish, and try again. You will notice that shadow DOM is reflected in the code shadowdom=false accordingly.
Some platforms may have stricter security policies which may require you to turn off ShadowDOM in the Embed Anywhere > ⚙️ Advanced Options
Embedding and SEO Considerations
When embedding Vev content and prioritizing search engine optimization (SEO), users may encounter certain considerations regarding encapsulation and content indexing. Here's what to keep in mind:
Encapsulation and SEO
By default, Vev employs shadow DOM technology to encapsulate embedded content, ensuring its independence from external styles and scripts. However, this encapsulation may impact SEO efforts as search engine crawlers may not index content within Shadow DOM.
If SEO is a critical concern and users wish to ensure proper indexing of headings (e.g., H1, H2, H3 tags), it's recommended to deactivate encapsulation by turning off shadow DOM. Your publish modal should look like the following image:
This allows search engine crawlers to access and index the embedded content more effectively.
Testing and Monitoring
After deactivating encapsulation, you should conduct thorough testing to ensure that the embedded content is properly indexed by search engines and that SEO performance meets expectations.
It's advisable to monitor SEO metrics and search engine visibility regularly to gauge the effectiveness of the embedding strategy and make any necessary adjustments.
Users should carefully consider their SEO objectives and the necessity of encapsulation when embedding Vev content. It's essential to have a balance between SEO optimization and maintaining content integrity and security.
How to track when embedding your Vev content
When you integrate Vev into your website by using the Vev embed code, your Vev content seamlessly becomes part of the <body> section.
Here's an example of where you would place the Vev embed code within your HTML document:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Vev Embed Example</title>
</head>
<body>
<!-- Vev Embed Code -->
<script src="https://embed.vev.page/v1/ProjectKey/PageKey"></script>
</body>
</html>
If you've added integrations in Vev, such as Google Analytics, please note that the G-ID or any other tracking IDs won't be passed on to your embedded page. This is because meta tags and tracking scripts are typically located in the <head> section of the HTML document, and only the <body> part of the HTML document is embedded when using the Vev embed code.
To ensure proper tracking, we recommend implementing tracking directly on your CMS or any other destination where you are embedding Vev. This ensures that your tracking setup seamlessly extends to the embedded content.
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 than 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. You can just go back to your project and check the box.
Simulate your result to manage your expectation
Create a CodeSandbox, using the static HTML + CSS template. Insert your embed code from Vev and observe how it functions within a clean and standard HTML page. By doing so, you can identify where the issue might be. Feel free to reach out to Vev support with details.
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. To do so, please turn off Encapsulate embed on destination page in Advanced settings and add your embed code.