This article is for you if you meet any of the following criteria:
- You're signed up for a Chameleon account
- You installed the Chameleon extension or snippet on your page
- You're expecting to see the sidebar (you've used it before) and it's no longer on the same page (URL)
The Chameleon Sidebar:
Don't see it? Read along to see what might help.
The first thing to do is to ensure:
- You are logged-in to the Chameleon website. Do so here.
- Chameleon is installed on the page you are attempting to view the Editor or you have the Chrome Extension loaded on this page.
- You have not hidden the Editor or entered "Test Mode" (you can check and reverse this by clicking on the Chrome Extension).
If both of these are satisfied, then you can proceed with the following 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
- If you get the result
Uncaught ReferenceError: chmln is not defined, the snippet has not been implemented.
- If you get any result containing
function, you are not authenticated or testing mode is on (turn off here).
- 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:
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'\".",
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
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
frame-src. And just like
script-src will need
script-src: 'unsafe-inline' 'unsafe-eval' ... https://*.trychameleon.com
connect-src: ... https://*.trychameleon.com wss://*.trychameleon.com
img-src: https://*.chmln-cdn.com blob:
frame-src: https://*.trychameleon.com https://*.chmln-cdn.com
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.