- Figure out why pages might not load in the Editor
- Get rid of the "Compatibility Mode" dialog that appears in the Editor
- Troubleshoot mixed-content issues
When you load a page in the Optimizely Editor, you may see a warning at the top of the editor that reads: "We have loaded your site using compatibility mode — you can still edit your page, but some site functionality might be missing" or "You're in Compatibility Mode." This compatibility mode message means you may be encountering an issue with mixed content.
You can use the Optimizely desktop app instead of the browser app to avoid the compatibility mode issue (and take advantage of additional features like device emulation). Please note, if you are attempting to load gated content, site that requires a login, follow the steps listed in this article.
Compatibility mode is triggered when your browser's security settings block mixed content or keep insecure (HTTP) content from being loaded into the Optimizely Editor's secure (HTTPS) page. As a result, there are two ways you can avoid compatibility mode and prevent the Optimizely Editor from blocking insecure content:
Load your page securely via HTTPS
What's compatibility mode?
Resolving compatibility mode in Google Chrome browsers
Compatibility mode can be usually be resolved in a Google Chrome browser by clicking the red shield icon at the end of the URL address bar and loading "unsafe scripts" and reloading the page.
If the shield icon is not present or if allowing "unsafe scripts" does not resolve compatibility mode, download the Optimizely Editor Assistant Chrome extension. Once the extension is successfully enabled on your Chrome browser, click on the extension and enable "Strip X-Frame-Options Header" and reload the page.
Disable browser security settings
One way to avoid compatibility mode is to disable your browser's security settings. Here are instructions (or links to instructions) for each browser.
- Quit Chrome (if you have it open).
- Open Terminal.
- Type this command into Terminal to open a Chrome incognito window:
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --user-data-dir=/tmp/tempchrome --allow-running-insecure-content --incognito &
- Right-click the Chrome icon that you want to modify.
- Select Properties.
- In the Target field, add the command line flag after ‘chrome.exe’ as follows:
- Click OK to save.
How insecure content triggers compatibility mode
If an insecure (HTTP) site that you load into the Optimizely Editor is compromised, it can compromise your Optimizely account. Optimizely’s Editor is always loaded securely via HTTPS to protect your experiments and data.
If you try to load an insecure site into the Optimizely Editor (for example, http://www.example.com instead of https://www.example.com), your browser may trigger a mixed content warning and block the insecure site from loading. This is because the Optimizely Editor’s protocol is HTTPS, and the page you’re trying to load is HTTP.
The Optimizely Editor loads your site in compatibility mode when mixed content is blocked and the Editor cannot load all of the content on your page. This is when you see the warning "We have loaded your site using compatibility mode."
The compatibility mode warning advises you that an insecure site (your page) is being loaded inside a secure site (the Editor). Optimizely displays the warning in the main canvas of the Editor if we detect that mixed content is being blocked, although we may not always be able to detect this.
How compatibility mode affects your site
Compatibility mode means the Optimizely Editor will not display blocked mixed content. When the Optimizely Editor loads your site in compatibility mode, some styling and content may not display correctly in the Editor. Content in iFrames may not render in the Editor.
The compatibility mode warning only affects the content displayed in the Optimizely Editor, not your live site.
Troubleshoot other page-loading issues
If your page is not loading correctly in Optimizely for another reason, read Troubleshooting: Pages not loading in the Editor for more solutions
Learn how Optimizely loads pages in the Editor, which might help you target your troubleshooting
If you're trying to load content that's in an iframe, read about loading iframe content
If you use an X-Frame-Options header, consider switching to the newer Content Security Policies header