Bring interactive content to your site by embedding your Vev project into any CMS, eCommerce platform, or website builder. This guide walks you through how embedding works, available options, SEO considerations, and troubleshooting tips.
Getting 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 only need to embed the code once. Every time you publish, updates sync automatically. The embedded project refreshes itself either when the cache expires (maximum 30 minutes), when you manually clear the cache, or when you use an Incognito browser window to bypass cached content.
Understanding the Embed Modal
Once you know where to find your embed code, here’s what each option in the Embed Modal means.
Select page to embed
You can embed your entire project with multiple pages into your destination platform.
Use the drop-down menu to select the page.
Each page generates a unique embed script.
Embed code
This is the script you paste into your website or CMS.
The embed code is dynamic and updates automatically.
You cannot edit the code — only copy and paste it.
Advanced options
If you experience performance or display issues, use the Advanced Options in the embed modal.
Advanced options
Advanced options give you greater control over how your Vev project behaves once embedded. These settings are especially helpful if your embed doesn’t display correctly, needs to adapt to specific layouts, or requires fine-tuning for SEO and performance. Each option lets you adjust how the embed interacts with its destination container, screen size, or external styles.
Embed Target Container
Ensures your embed appears inside the correct section of your site.
Inspect your destination site using Developer Tools and copy the container’s ID or class.
Examples:
Target by ID:
Find the container ID, e.g.,
wp-skip-link-target.Enter
wp-skip-link-targetinto the Embed target container field.
Target by Class:
Find the class name, e.g.,
wp-block-spacer.Enter
.wp-block-spacerinto the Embed target container field.(Note: always add
.before the class name.)
Ensure Embed Fills Width
Toggle this option to make your embed responsive across the full screen width.
Encapsulation (Shadow DOM)
By default, Shadow DOM encapsulation is enabled in Vev. This isolates your embedded content from the host site’s external styles and scripts, ensuring consistent visuals and functionality. Read more about Shadow DOM here.
If you disable encapsulation, the parameter ?shadowdom=false is added to the embed code:
What this means:
Encapsulation Enabled (default, no
shadowdom=false)Vev content is isolated using Shadow DOM.
Prevents host site styles/scripts from interfering.
Best for ensuring visual and functional consistency across platforms.
Encapsulation Disabled (
shadowdom=false)Vev content shares styles and scripts with the host site.
Useful if SEO is a priority, since headings and text are directly crawlable by search engines.
May increase the risk of styling or script conflicts with the host site.
Recommendation:
Keep encapsulation enabled for most use cases. Disable it only if SEO indexing of headings and content is critical.
Container Mode for Embed
By default, Vev embeds are responsive to the viewport (the screen size of the device). With Container Mode, the embed responds to the container it’s placed in.
When to use Container Mode:
Embedding banners or widgets that adapt to their space.
Embeds that appear in sidebars, flexible layouts, or content blocks.
Creating adaptive components that behave differently in small vs. large containers.
How it works:
Default Embed → Responsive to the device/browser screen.
Container Mode Enabled → Responsive to the container dimensions.
When enabled,
containerMode=truewill appear in the embed code.This means you can still use breakpoint as regular, but instead of adapting to the full width of the browsers, it adapts to the size of the container where the Vev project is embedded.
SEO & Tracking 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.
SEO Considerations
Shadow DOM does not negatively impact SEO.
However, to improve indexing:
Disable Shadow DOM under Advanced Options.
Ensure headings (H1, H2, H3) and key content are crawlable.
Test indexing results after publishing.
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.
Tracking Analytics
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>
Tracking scripts (e.g., Google Analytics IDs) added in Vev do not transfer, because
<head>content isn’t embedded.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.
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.
Troubleshooting
1. Empty State Screen
Cause: “Embed your site anywhere” was not checked when copying the code.
Solution: Go back to the project, check the box, and republish.
2. Embed Not Updating Immediately
Cause: Caching.
Solution:
Open your site in Incognito.
Clear browser cache.
Wait up to 30 minutes.
3. Security Restrictions
Some platforms block third-party scripts.
Check with your system administrator to confirm embedding is supported.
4. Breakpoint Alignment Issues
Ensure breakpoints in Vev match your container size.
Example: If your container is 600px wide, set Tablet breakpoint as primary and remove Desktop breakpoint to avoid misalignment.
5. Testing Your Embed in a Clean Environment
Use CodeSandbox with a static HTML + CSS template.
Paste your embed code and test functionality in a controlled environment.
If issues persist, contact Vev Support with details.
Embed Vev Anywhere
CMS
eCommerce
Other Website builders