Troubleshoot the new Visual Editor
- Optimizely Web Experimentation
- Optimizely Edge Delivery
- Optimizely Personalization
When you have issues with the new Visual Editor in Optimizely Experimentation or Optimizely Personalization, use the following resources to help solve them.
Verify your snippet implementation
If the new Visual Editor does not fully load, the issue is likely that you modified the Optimizely Experimentation snippet when implementing it on your site. Check your snippet implementation to ensure it is not modified and matches the snippet that displays in your Experimentation account.
Warning
Do not modify the snippet. Copy and paste it onto your site exactly as you see it within Optimizely Web Experimentation or Optimizely Personalization. Otherwise, Optimizely may not run correctly on your site.
For example, do not add an id="optimizely" attribute to the script.
Allow redirects to carry query parameters
If the new Visual Editor is not opening, ensure that the URL opened is not stripping away parameters or hash values from the URL.
If the URL is part of a redirect, ensure that the redirect carries over the parameters and hash values accordingly.
This is the cause for most failed Visual Editors: nothing happens, or you receive a “logged out” error.
Check for missing sources in directives from CSP header
If you are having display issues with the new Visual Editor, the issue could be that you are missing required Optimizely sources in your site's Content Security Policy (CSP) headerContent Security Policy (CSP) header.
Your site's CSP directives should include the following Optimizely sources for Optimizely Experimentation:
script-src 'self' https://*.optimizely.com;
connect-src https://*.optimizely.com wss://*.optimizely.com;
img-src https://cdn.optimizely.com;
style-src 'unsafe-inline' https://*.optimizely.com;
font-src 'self' https://*.optimizely.com;If you are missing any of these (most commonly font-src 'self' https://*.optimizely.com;), update your site's CSP header to include the missing sources in the directives, then try loading the new Visual Editor again.
You should also add *.optimizely.com and app.optimizely.com to your allow list in your style-src directive. This requirement exists because the editor must load the necessary CSS styles to display code (HTML, CSS, JavaScript) in the editor. If this stylesheet fails to load, the editor does not display any code.