Embed your project

Embed your project anywhere on the web

Lewis Bowen avatar
Written by Lewis Bowen
Updated over a week ago

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:

  1. Click on the Publish icon in the top-right corner

  2. Check the "Embed your site anywhere" box

  3. Publish your project

  4. Click the "Get embed code" link

  5. 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

  1. On the right-side panel of the Design Editor, click Page settings

  2. Find Embed code and click on the Copy icon

  3. This will redirect you to the embed modal

  4. Copy the code and paste in desired location.

3. Embed in Project Settings

  1. Click the Vev icon in the top-left corner

  2. Hover over File

  3. Select Embed

  4. At the top, select the page you want to embed

  5. Copy the embed code

  6. 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.

  1. 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).

  2. 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.

  3. 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 id then you place the value of your id into the form field:

      • Identify the value of the id

      • In this case, copy wp—skip-link—target

      • Paste this into the “Embed target container” field

    • If you want to target your Vev content under a class then you place the value of your class into the form field:

      • Identify the value of the class

      • In this case, copy wp-block-spacer

      • Paste 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:

    1. Open your browser in Incognito mode and check for the changes.

    2. Try to delete the cache and check for the changes

    3. 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.

Did this answer your question?