With Chameleon's custom JavaScript integration, you can add custom data to Chameleon, launch tours from an API call, and also run custom JS code from any product tour. To get an overview of this integration please visit our integrations webpage

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. 

Setup

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. 

Usage

Custom JS as a Data Source

To send user properties via our JS API, read our Send User Properties doc.
To send user actions (events) via our JS API, read our Send Events doc.

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.

Any developer or JS-literate person familiar with your product can help you write simple JavaScript or JQuery functions to add to the button. For fun, you could try alert("hello world!"); 

Once you have added your code, please toggle PREVIEW MODE on and click the button to test and sample how this code executes. 

Troubleshooting

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. ↘️

Did this answer your question?