Finding the embed code for your project

Troubleshooting

Removing the watermark

You can embed your Vev project anywhere on the web, by adding the script embed code to your page. Follow the steps below to learn how to do this.

Finding the embed code for your project

You must publish your project to the staging domain before trying to embed your project. Follow the steps below to learn how to download the files of your project.

You can access embed at several locations within the Vev editor:

1. Embed Modal within Publish Modal

Once you’ve finished creating your content in Vev:

  • Click on the Publish icon in the top right

  • Check the Embed your site anywhere box

  • Publish the project

  • Click the Get embed code link

  • Copy the embed code
    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 editor, click on 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 on 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 Embed Modal

  • #1

    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

    You may face challenges while embedding because of the mismatch between source and destination. The following 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.

    Here is a case explained with an 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)

  • #3

    “Copy script” only gives a preview of your embed code. You can’t modify the code. Depending on the changes in “Embed target container” and whether or not the “Ensure embed fills width of screen” your code will be updated accordingly.

Limitations

  • #1 Caching

    Once you have embedded your Vev content to your desired destination, your browser will cache it. Thus, your changes may not be reflected just right after you published.

    Here are three possible ways to workaround:

    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 30mins 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 $5.00 USD/ month to remove this from your project.

Learn more about our pricing structure


Embed Vev Anywhere

CMS

Embed Vev in WordPress

Embed Vev in Joomla

Embed Vev in Drupal

eCommerce

Embed Vev in Shopify

Embed Vev in WooCommerce

Other Website builders

Embed Vev in Wix

Embed Vev in Webflow


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 the according platform you use).

SEO

”Can my embedded Vev content be indexed by search engine?”

- Absolutely! The embedded Vev content can be indexed by search engines.

Did this answer your question?