Code scripts let you execute custom functionality from within Chameleon Experiences. This means you can do things like focusing the cursor in a specific field, changing user settings or data, simulating multi-element clicks, or launching other Experiences using APIs.
Availability & Usage
🔐 Available for all plans
🔓 Exception needed for Content Security Policy cases
📍 Ready to use in Tours, Embeddables, Microsurveys, Launchers, HelpBar
Where to use Custom Code?
There are a few places you can leverage code scripts within Chameleon:
as an Item within a Launcher
as an Additional Action in a button
Tour, Embeddable, Microsurvey body
as an Action in HelpBar
In these instances, the code you add will run when a user clicks that Launcher Item, Step Button, or Action title.
When you add code to the body of your Tour, Embeddable, or Microsurvey, your custom content will show to users whenever they see your in-app announcement.
1. Launcher Items
You can include "Code scripts" as an Item, alongside URLs, Chameleon Tours, and integration Actions in your Launchers. Select this option from the "Items" section and add in the JS code next. You can also test your script and adjust if needed before showing it to users.
2. Step buttons
You can also run custom JS code as a button Action, from any button within Chameleon. This provides the flexibility to trigger a custom action from a CTA within a Chameleon Experience.
Another powerful use case is firing clicks on multiple elements and mimicking sequenced button clicks. With some Tours, there may be multiple clicks required to take your users to the right place, and the next Step. This would be the case where you have different subpages, or tabs with different input fields, that would require specific guidance.
3. Tour, Embeddable, or Microsurvey body
You can leverage HTML code within the body component of your in-app announcements to display unique content and create more interactive guidance.
ℹ Ensure you enable the toggle from the "Rights" page in your Dashboard first, and then you can go in and add your code when building out your in-app.
Keep your code on a single line when adding it to the body.
👉 Learn more about embedding HTML content in your Steps for more personalization.
4. HelpBar Action
You can also run Custom Code in your HelpBar and guide users with specific tips, animations, or messages. Add Custom Code from 'Actions' (under Searchable Content).
Example templates
Below are some examples of code scripts that you can use. 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.
👉 Check out the list of integrations you can include as Launcher Items and show chats, docs, or prototypes when users click them. You can also choose the code options below, but note that you can configure, for example, Zendesk and Intercom chats directly as Launcher Items.
Zendesk
Using Zendesk's Chat API you can open a chat window if not already open using the following command:
zE('webWidget', 'open');
zE('webWidget','chat:send', 'Hello!');
Zendesk released a newer version of their chat and you can use either one with Chameleon. If you're using the latest chat version, simply replace webWidget with messenger in your commands. So for example to open the chat, you'll use 👉 zE('messenger', 'open'). You can learn more about the new chat and the commands available, from Zendesk.
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
Intercom
You can open up Intercom Messenger by running the following:
Intercom('show');
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
Help Scout
Help Scout is another popular support ticket solution, and you can open up their Beacon messaging widget by calling:
Beacon('open')
Other actions you can take include:
Search Help Scout Docs articles and load the results screen
Suggest articles based on the page URL (and other factors)
Hubspot
Hubspot is a marketing automation platform that includes emails, CRM, and live chat. You can open the Hubspot live chat widget by calling:
window.HubSpotConversations.widget.open();
Olark
Show the Olark chat widget by using the expand method from their JavaScript API:
olark('api.box.expand')
Drift
Pop open a Drift chat window from a Launcher by running this call:
drift.api.toggleChat(open);
You can also:
Start the bot on a specific sequence
Launch a Drift welcome message
👉 Read more about the Drift API
Freshdesk
Launch the Freshdesk chat widget with the following API call:
FreshworksWidget('open');
Mimic multi-element clicks
To simulate multi-element clicks when launching Tours, you can use the 'Run Custom Code' Additional Action from any primary or secondary button. This makes use of the HTML Element click method to simulate mouse clicks on different elements.
You can run several commands in a sequence that would mimic a user clicking those elements in your product. To achieve this, you'll have to create a function for each user click, then specify the selector, and add a call for that action.
Also, you'll want to include a time-out for secondary and onward actions, to ensure those elements will be found.
🧑💻 Engineer can help: The examples below are based on specific page structures, but your engineer can help adjust the code to fit your specific element layout.
Examples:
Launching a Tour Step from a slideout sub-page
In this example, the Tour Step appears after a user opens a "Profile" slideout from a homepage icon (the 2nd in a row), clicks on the 1st page on it - "Settings", clicks on a 2nd page -"My data" and selects the third tab in it "Plan"
function clickOne() { document.querySelector("#profile-link").click(); };
function clickTwo() { document.querySelector("#modal-root > div > div.side-drawer > div > div.primary-content > div:nth-child(2)").click(); };
function clickThree() { document.querySelector("#modal-root > div > div.side-drawer > div > div.primary-content > div > div.cards > a:nth-child(1)").click(); };
function clickFour() { document.querySelector("#modal-root > div > div.side-drawer.entered > div > div.primary-content > div > div:nth-child(2) > nav > div > a:nth-child(3)").click(); };
clickOne();
setTimeout(clickTwo, 50);
setTimeout(clickThree, 100);
setTimeout(clickFour, 500);
Launching a Tour Step after an input field selection on a sub-page
In this example, the Tour Step appears after a user opens a "Profile" page from a homepage icon (4th in a row), clicks on the 3rd tab in a section - "Settings", and selects "My data", the 2nd option from a dropdown list.
function clickOne() { document.querySelector("#profile-link").click(); };
function clickTwo() { document.querySelector("#div-root > div > div.class > div > div.primary-content > div:nth-child(3)").click(); };
function clickThree() { document.querySelector("#div-root > div > div.class > div > button >.click(); };
function clickFour() { document.querySelector("#div-root > div > div.span > div > div:nth-child(2).click(); };
clickOne();
setTimeout(clickTwo, 50);
setTimeout(clickThree, 100);
setTimeout(clickFour, 500);
ℹ Note that if you change the HTML structure of your pages, your code may need to be tested to ensure it still works.
Grab input data from Microsurveys
Leverage Microsurvey input data to launch personalized actions, speed up users through specific flows, complete your users' profiles, and so much more. You can use the Custom Code additional Action in your buttons to grab any input data from your users.
For example, you can launch a form with a pre-filled email field when a user submits it via an Input Microsurvey. This way, you make it easier for them to sign up for your programs or events. This is what the example below does 👇
window.open('https://www.chameleon.io?email='+encodeURIComponent(chmln.$(chmln.lib.Eval.opts.event.target).parents('.chmln-inner').find('textarea').val()), '_blank');
Show a trial countdown announcement
ℹ We recommend sending to Chameleon a property to target users approaching their trial or plan end date. In case you don't have the possibility to do so, you can use Custom Code as a workaround to achieve this.
You can leverage Custom Code in your Tour or Banner body to notify users of the remaining days in their trial and prompt them to pick a plan. Simply update the dates and fallback copy In this example code below, to fit your audience.
<div id="trial-message"></div> <script> setTimeout(() => {var trial_end_date = new Date(chmln.data.profile.attributes.trial_end_date);var current_date = new Date();var messageElement = document.getElementById('trial-message'); if (trial_end_date) {var days_left = (trial_end_date - current_date) / (1000 * 60 * 60 * 24); messageElement.textContent = days_left > 0 ? `Your trial ends in ${Math.ceil(days_left)} days.` : 'Your trial has ended. Upgrade now to continue accessing all features.'; } else {messageElement.textContent = 'Welcome! Start your free trial today to enjoy all the features.';}}, 100);</script>
Start a survey from a Launcher
Chameleon Microsurveys 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!
Typeform
You can use the Typeform API to configure a particular Microsurvey to show/open when the user clicks the Code Script item in your Chameleon Launcher.
Using pop-up mode might make the most sense, but a variety of delivery modes are available in the docs here.
createPopup('<form-id>', options)
👉 Learn more about our native integration with Typeform.
Other actions
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 as 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 Step):
chmln.identify(chmln.data.profile.get('uid'), {
disabled: true
});
👉 You can do so much more with our API! Explore what's possible.