Bring interactive content to your site effortlessly by embedding your Vev project anywhere. Here's how:
Get Your Embed Code
Complete your design in Vev.
Click Publish in the top-right corner.
Check Embed your site anywhere and click Get embed code.
Copy the embed code.
Note: If "Enable embed" is inactive, activate it first.
Once embedded, updates sync automatically when published. The cache refreshes every 30 minutes or can be cleared manually.
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)
Advanced options
Ensure embed fills width of screen.
Enable Ensure embed fills width of screen to make your content responsive and stretch across the screen width.
Encapsulate embed on destination page.
Vev uses Shadow DOM by default to isolate embedded content from external styles and scripts. This ensures visual and functional consistency. 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.
Embedding and SEO Considerations
SEO & Tracking
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.
SEO Considerations:
Shadow DOM encapsulation does not affect SEO but to improve indexing i can help to:
Disable Shadow DOM in the Embed Anywhere > Advanced Options.
Ensure headings (e.g., H1, H2) and important content are accessible to crawlers.
Test and monitor indexing results after publishing.
Tracking Analytics:
Embedded content only integrates into the <body> of your page. To ensure proper analytics tracking (e.g., Google Analytics):
Add tracking scripts directly to your CMS or hosting platform.
This ensures all interactions with embedded content are captured.
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. 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 to Keep in Mind
Caching:
Embedded content may not update immediately. Use one of these methods to see changes faster:Open your browser in Incognito mode.
Clear your browser cache.
Wait approximately 30 minutes for updates to reflect.
Security Restrictions:
Some platforms block third-party scripts for security reasons. Check with your system admin to ensure your platform supports embedded content.Breakpoints:
Match your Vev design's breakpoints to the container size on your site.Example: For a 600px container, set the Tablet breakpoint as the primary one in Vev and remove the Desktop breakpoint to avoid alignment issues.
Embedding your Vev project allows you to integrate visually rich and interactive content seamlessly. By leveraging advanced options, ensuring proper SEO settings, and troubleshooting caching or security issues, you can create a smooth and engaging experience for your audience.
For more detailed guidance you can always reach out to support.
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.
Embed Vev Anywhere
CMS
eCommerce
Other Website builders