The Custom JS integration includes two components:
Data Source -- send user data to Chameleon (for targeting tours) via the JS API
Add On -- run JS code from any tour step for custom functionality.
For example, you could cause a step button to add focus to a specific input field in your app. This can help them take action in the right place to discover the value you are trying to demonstrate.
To leverage Chameleon JS API, you must authenticate, using your unique API token. Learn more about this and our API here.
There is no setup required to use the custom JS as an Add On, but it must be part of your Chameleon plan. If you do not see it available, please contact us for more info.
Custom JS as a Data Source
Custom JS as an Add On
Note: If you employ a Content Security Policy (CSP) then you must add an exception to allow this functionality to be used. Read about that here.
You can run custom JS code from a Button within any Step, or from a Launcher Item. There are many examples of what you could execute, including:
Scrolling / focussing a user to a different place/element on the page
Submitting some data to your system (e.g. interest in a feature). Learn more here.
Opening up another in-product service (e.g. Zendesk chat window)
Giving a user a delightful easter-egg surprise. Read why these are helpful for product adoption on our blog here.
To do this from a Button, click the button and add 'Run code' as an ' Additional action'
To do this from a Launcher, select the "Script (JS code)" option when adding an Item to the Launcher:
Once you have added your code, please toggle PREVIEW MODE on and click the button to test and sample how this code executes.
See other use cases and code examples below:
We are not currently aware of any common problems experienced as part of this integration.
If you have any questions or issues please review how to best get help.