This article is for you if you meet any of the following criteria: 

The Chameleon Sidebar:

Don't see it? Read along to see what might help.

Basic checks

The first thing to do is to ensure:

  1. You are logged-in to the Chameleon website. Do so here.
  2. Chameleon is installed on the page you are attempting to view the Editor or you have the Chrome Extension loaded on this page

If both of these are satisfied, then you can proceed with the following troubleshooting:

Troubleshooting:

Let's find out if the Sidebar issue is being caused by Implementation or Authentication.

On the page, right click and select “Inspect Element.” Open the Console tab, and type chmln.

  1. If you get the result Uncaught ReferenceError: chmln is not defined, the snippet has not been implemented.
  2. If you get any result containing function, you are not authenticated or testing mode is on (turn off here).
  3. If you get any other result (an Error) then please:

Check that your browser is not blocking 3rd party cookies. For Chrome you can read about how to manage exceptions (i.e. allow Chameleon to set cookies) here.

Check that any ad-blocking software is not interfering with the Sidebar loading. Try turning it off your ad blocker and refreshing the page to see if that could be the issue.

If this still doesn't work: 

Grab a screenshot of your app with the JavaScript console open (scrolled to any errors that are related to chmln) and email us.

For a quicker resolution, please type chmln.isEditing into the JS console and let us know the return value. Finally please check the chmln-user-id cookie is present in the 'Application' tab (see below)

⚠️ NOTE: you must have the console open before you load the page for this to work (so just hit Refresh on the page after you've opened the console). 

Fixing an implementation issue

Your personalized snippet can be found on your Dashboard. Follow the instructions to implement, after which you can click Build Tour from the Dashboard to open the Sidebar.

If after implementing, you see and error in your console that looks similar to Refused to load the script 'https://fast.trychameleon.com... because it violates the following Content Security Policy directive, then see our notes about adding Chameleon to your Content Security Policy below.

Fixing an authentication issue

Go to your Dashboard and click Build Tour to open the Sidebar on your site.

If you are redirected to a login page when trying to load the Dashboard, this means you are logged out. Chameleon is passwordless, so authentication works via a login link enabled by cookies. Enter your email address on the login page to be sent a new authentication link. After opening this link, your Dashboard will load.

If this does not solve the issue, please email us and provide a login to your app so we can test as we resolve the issue.

Adding Chameleon to your Content Security Policy

If you install the Chameleon snippet or Chrome extension, and after loading your site see something like this in your browser's error console:

(index):66 Refused to load the script 'https://fast.trychameleon.com/messo/abcdefghijklmnopqrstuvwxyz/messo.min.js' because it violates the following Content Security Policy directive: \"script-src 'self' 'unsafe-inline' 'unsafe-eval'\".",
JSONCopy

Give yourself, or your website developer a high-five! 🙌🏼 One of you has chosen to set up extra security on your website using a CSP (Content Security Policy). While that CSP means you and your users are better protected from malicious attacks, it also means that Chameleon's domains need to be added to your CSP's whitelist.

Here's what you need to do if you're not technical: Talk to the engineer or developer on your team and ask them to add the following string (the code below) to any Content-Security-Policy directive whitelists in your website's request headers. Also, your script-src whitelists will need to include 'unsafe-inline' 'unsafe-eval'.

default-src: https://*.trychameleon.com https://*.chmln-cdn.com

If your developer is very particular about its Content Security Policy

Some developers will only want to give Chameleon access to exactly what it needs, and we understand that. So, if you don't want to add Chameleon to your default-src CSP, then you can add to script-src, connect-src, img-src, font-src, and frame-src. And just like default-src, script-src will need 'unsafe-inline' 'unsafe-eval'.

script-src: 'unsafe-inline' 'unsafe-eval' ... https://*.trychameleon.com
connect-src: ... https://*.trychameleon.com wss://*.trychameleon.com
img-src: https://*.chmln-cdn.com
font-src: https://*.chmln-cdn.com
frame-src: https://*.trychameleon.com https://*.chmln-cdn.com

For anyone who is technical but hasn't run into this issue before, take a read through this article from HTML5 Rocks about CSP's or this one for more information.

Ensure third-party cookies are enabled on your browser

Chameleon's sidebar and tours require that you have third-party cookies enabled. This setting is commonly enabled by default on all browsers, but may have been manually disabled. 

To enable third-party cookies in Chrome, navigate to chrome://settings/, scroll to "Privacy and security", click on "Content settings", then click on "Cookies", and finally switch "Block third-party cookies" to the Off position.

Did this answer your question?