Where to use
Code scripts let you execute custom functionality from within Chameleon Experiences. This means, you can do things like focussing the cursor in a specific field, changing user settings or data, or launching other experiences using APIs.
There are two places you can add code scripts within Chameleon: as an Item within a Launcher, or to a button within a Tour Step. In these instances, the code you add will run when that Launcher Item or Step Button are clicked.
1. Launcher Items
Chameleon Launchers have the ability to include "Code scripts" as an item, alongside URLs, Chameleon Tours and Chameleon Surveys. This means you can run some custom code when a user clicks on a Launcher item.
This means your Launchers can be the single consolidated widget for your site, and you can open other widgets or take other actions from the Chameleon Launcher.
2. Step Buttons
You can also run custom JS code as a button action, from any button within a Chameleon Tour or Survey. This provides you the flexibility to trigger a custom experience from a CTA within a Chameleon Experience.
Below are some examples of code scripts that you could include. If you want to just try this out, you can use
alert("hello world!") as a script and see the JS alert appear.
Open third-party chat or message widget
You may not want to show a chat widget for all users or may want to restrict how easily a user can start messaging your support team, so you can add this as an item within your Chameleon Launcher.
This means the user will first see your list of (hopefully relevant) items and then any options to start a chat.
Using Zendesk's Chat API you can open a chat window if not already open using the following command:
zE('webWidget', 'chat:send', message<string>);
You can also initiate other actions alongside the above, such as:
- Registering a callback when the chat is started or ended
- Open the chat window in a new tab or window
Read more on the Zendesk Chat API docs site here.
You can decide to open up Intercom Messenger by running the following:
This will open the Messenger window with the message list. You can also:
- Open Messenger with the last message open
- Open Messenger and initiate a new message
Read more on the Intercom Messenger JS API docs site here.
Help Scout is another popular support ticket solution, and you can open up their Beacon messaging widget by calling:
Other actions you can take include:
- Search Help Scout Docs articles and load the results screen
- Suggest articles based upon the page URL (and other factors)
Hubspot is a marketing automation platform that includes emails, CRM and live chat. You can open the Hubspot live chat widget by calling:
You can also take other actions on the widget using Hubspot's Conversations Live Chat widget API.
Show the Olark chat widget by using the
Pop open the Drift chat sidebar from a Launcher by running this call:
You can also:
Read more in the Drift API docs here.
Launch the Freshdesk chat widget with the following API call:
For more information on Freshdesk widget actions, refer to the docs.
Launch third-party survey or form
Chameleon Surveys are great for continuous feedback and quick questions, but if you'd like to use a longer survey or hook into your existing NPS collection tool, then you can do that from the Launcher too!
You can use the Typeform API to configure a particular survey to show / open when the user clicks the Code Script item in your Chameleon Launcher.
Update user data
You may want to add a particular attribute to a user (e.g. add a tag that they are interested in a new feature, or enroll them into a beta program etc.) or update data about that user in one of your other systems. Read how you can do this here.
Hide the Launcher
Although clicking outside the Launcher will close the Menu, you can also close the Menu using the
show API described here.
Opt that user out of all Chameleon Experiences
You can let a user opt-out of all in-product experiences built with Chameleon. To do this, run the following script (either from an item in the Launcher or a button in a Tour Step):
Read more about this API here.
If you have any questions or issues please review how to best get help.