Skip to main content
This doc talks about the chmln.on JavaScript API method. Common use cases include:
  • Syncing the Experience interaction data (automatically collected by Chameleon) to your database/warehouse or any other tools, using the methods below.
  • Getting access to the A/B testing attribute (percent) when the Chameleon User Profile is loaded.
  • Logging Experience data to an integration that Chameleon does not yet have a native integration with
  • Knowing when the HelpBar is opened/closed or when data is needed.
An overview of the data Chameleon collects for analysis, by reading this article.

​
List of supported events

EventPurposeDescription
chmln:eventInfoAll Survey, Tooltip, Tour, and Launcher events. For more information about which events Chameleon tracks, see this doc, or download a data schema here.
tour:eventInfoOnly Survey and Tour events, including Started, Completed, Exited, Step Seen, Button Clicked, etc.
after:accountInfoAfter the account data is present on the page.
after:profileInfoAfter the User Profile loads from the Chameleon backend API, now all of the profile data is loaded.
load or load:chmlnInfoWhen the Chameleon JavaScript has been loaded but before any Experiences will display/show/start.
identify:requestInfoTriggered directly before the network request associated with identifying this User Profile. The callback signature (arguments) are options, profile with options having yet to be added to the profile object.
identify:syncInfoTriggered upon the completion of the network request associated with identifying this User Profile.
HelpBar events (only app:navigate is required)
EventPurposeDescription
app:navigateActionWhen the HelpBar needs to navigate within the single-page app
helpbar:openedInfoKnow when the HelpBar is opened
helpbar:closedInfoKnow when the HelpBar is closed
helpbar:search:inputInfoWhen the user types/pastes into HelpBar input box; use to track specific input as it happens
helpbar:search:contentOverride (optional)When the HelpBar is making a query for custom content; use to override the default behavior
helpbar:search:externalOverride (optional)When the HelpBar is making a query for Help center content; use to override the default behavior
helpbar:search:answerInfoWhen the HelpBar finishes answering a question
helpbar:item:actionInfoKnow when a specific SearchItem is triggered
helpbar:item:action:errorInfoWhen a specific SearchAction encounters an error
helpbar:items:recentOverride (optional)When the HelpBar needs a list of the most recently actioned SearchItems; use to override the default behavior
helpbar:items:pinnedOverride (optional)When the HelpBar needs a list of pinned SearchItems; use to override the default behavior
Typical ordering as Chameleon boots: load, load:chmln, after:account, identify:request, identify:sync, after:profile, tour:event, chmln:event

​
Examples

​
HelpBar

The JavaScript API for HelpBar has many examples and use cases.

​
Listen for Tour/Survey events — send to custom integration

This might be relevant in the following instances:
  • Sending data to a tool without a native Chameleon integration.
  • Sending data to a tool via a backend/server-side method.
// Tour / Survey events only
chmln.on('tour:event', function(eventName, options) {
  $http.post(internal_event_logging_url, {
    name: eventName,
    properties: options
  });
});

// Tour / Survey / Tooltip / Launcher etc. events
chmln.on('chmln:event', function(eventName, options) {
  $http.post(internal_event_logging_url, {
    name: eventName, 
    properties: options
  });
});

​
Send properties

This might be relevant in the following instances:
  • Sending data to your database, to allow deeper analysis of Chameleon Events.
  • Sending data that is not collected by your analytics tool (e.g. “Chameleon testing ID”).
chmln.on('after:profile', function() {
  $http.post(internal_user_update_url, {
    chameleon_testing_id: chmln.data.profile.get('percent'),
  });
});

​
Sending data to other tools directly

For example, you can send the Chameleon “Percentage value” to your analytics solution, using a script like the below (with examples for Segment and Mixpanel): 
chmln.on('after:profile', function() {
  // Now you have full access to chmln.data.profile
  
  var percent = chmln.data.profile.get('percent'));
  // Segment.com
  // analytics.identify({chameleon_testing_id: percent})

  // Mixpanel
  // mixpanel.people.set({chameleon_testing_id: percent})
})
Note: You can easily adapt this based on where you’d like to send this data in your system.