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
You can run custom JS code from a button within any tour step, by adding it as an additional action. First select the button from where you want to run this custom code, to bring up the menu.
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.
Once you have added your code, please toggle PREVIEW MODE on and click the button to test and sample how this code executes.
We are not currently aware of any common problems experienced as part of this integration, so please message us if you have any issues, or ideas for improvements. Simply use the green chat circle on the bottom right of this screen. ↘️