Website Not Loading Correctly in VWO Visual Editor

Problem Statement

When I load the website in Visual Editor, it either loads with broken content or VWO Editor throws the following error:

Resolution Steps

• Add the VWO SmartCode on the web pages so that VWO Editor loads up directly, and not through proxy. If VWO SmartCode is not installed on the test pages, VWO tries to open the website in the VWO Editor using proxy. Due to this, the website may not load properly, as there could be issues in fetching CSS/JavaScript files, completing AJAX requests, and so on.
• Clear existing cookies from the browser and refresh the page after making the changes.
• Make sure you have not installed Javascript blockers like AdBlocker with custom settings. If you have installed a JavaScript blocker plugin, ensure that VWO requests (coming from vwo.com and visualwebsiteoptimizer.com) are not blocked.
• Set the X-frame header to SAME ORIGIN on your website’s backend. You can ask your developer to add conditions to allow VWO server to bypass the X-frame header settings.
• Further, you may even install one of the standard browser plugins to disable x-frame headers in the test builder. For instance, there is a standard plugin in chrome for this purpose called “Ignore X-Frame headers”.
• Ensure that the test URL (primary URL) is the exact URL of the specific page. If you have entered group URLs or URL pattern, the page may not load.
• Enable third-party cookies in your browser settings. When creating tests for a website, VWO drops cookies from app.vwo.com to dev.vwo.com (third-party). Since the cookies on your website are created from dev.vwo.com, your website pages may fail to load if third-party cookies are disabled in the browser settings. Using the browser settings option, you can block third-party cookies but create an exception for these two domains. Click here to know how to enable or disable third-party cookies in your browser settings.
• There could be issues with loading page scripts in the editor because VWO does not load the site directly in the editor but via proxy servers. Download the VWO plugin from the Chrome store to resolve this issue.
• VWO Editor opens mobile website pages in an iframe. However, some responsive websites may have restrictions on loading the iframe. To check whether a page will open in iFrame, execute the following code in the developer console on the page. If the page is broken, you may need to apply the fix on the page itself.

• Ensure that the VWO code is installed correctly on the test pages. To know how to add VWO code, click here.
• You can download VWO Chrome Extension  to troubleshoot the issue

Handling Frame buster issue on your website

If Frame buster is installed on your mobile responsive website, then the VWO editor may not open the webpage inside the editor but the page opens on the browser instead. To resolve this issue, remove any frame buster script on your website or modify this script in such a way that it does not break the iframe of the VWO editor.

You can use the following IF condition within frame buster script in your source code to add VWO as an exception and let VWO’s iframe to open your website: