For Chameleon to be able to show in-product experiences to your users, it needs a code snippet to be added to your application's codebase. There are multiple ways to achieve this, as we will explore in this article.

Note: Chameleon works with browser-based web products and supports a wide range of technologies.

Installation methods

Once you have joined a paid plan and are ready to install the Chameleon code snippet, you have the following implementation options:

  1. Use our Segment integration. If you use Segment then this is by far the best way to add Chameleon, as it doesn't require any additional engineering time.

  2. Directly add the Chameleon JavaScript code snippet to your site. If you do not use Segment then you should do this.

  3. Use Google Tag Manager (GTM). While we support this method, we advise against it, because of the difficulty of sending user data required for targeting.

Installing with Segment

Setting up Chameleon with Segment is the fastest way to get you started; it is also the most simple, by all means.

Once you turn on the Chameleon-Segment integration, the Chameleon code snippet will be added to your site via the Segment code. Chameleon will receive all the user data collected by Segment and Segment will receive all the user data collected by Chameleon, to further send to your other Segment-enabled integrations.

If you do not use Segment, then you will require engineering time to ensure Chameleon is installed correctly, so read on below.

Installing the JavaScript code directly or using Google Tag Manager

Before you proceed with installing Chameleon with these methods, knowing the following will help speed up the process and minimize the engineering time required: 

  1. What are the process, timeline, and people required to add third-party code to your application (via the Direct or GTM methods)?

  2. What user properties and event data will be useful to target your guidance? By knowing how you might want to segment users or the conditions upon which you want to show guidance, you can ensure this data is sent to Chameleon at the time of installation. Learn more about how this works here

  3. Does your application have URLs that contain dynamic content, such as user IDs or customer subdomains? If so, it will be helpful to send this content to Chameleon for each user. Discover how this works here

  4. Would you like to personalize your guidance with any dynamic content? For example, would you like to refer to users by their first names in the tours you create? If so, add this to the list of user data that your engineers will send to Chameleon. Find out how to do so.

  5. Does your application contain a Content Security Policy (CSP)? CSPs are a way to prevent unauthorized third-party code from running in your application and will prevent Chameleon from functioning correctly. If you do have a CSP then your engineers will have to add Chameleon to the whitelist. Read about how to do that here.

  6. Does your application use keyboard shortcuts? If so, these may conflict with Chameleon and hinder your ability to type within the Chameleon Editor. To circumvent this issue, your engineers will need to add some extra code. Know how to troubleshoot this.

Ready to install Chameleon? Explore the remaining installation articles to find specific how-to guides on how to set it up.

Installing for different JavaScript frameworks

Single Page Applications (SPAs) and all common front-end frameworks (e.g. React, Angular, Vue, Ember, etc.) are supported using our URL and element matching conditions.

Chameleon requires an initial page load to identify users. Then, it observes changes on the page in realtime, such as page URL, user properties or elements added/remove from the page. There is no separate implementation work required for single-page applications.

When installing the code snippet on your SPA, make sure that the chmln.identify is called when your app learns which user is on the page (likely because the user logs in or refreshes the page). If the content of your SPA changes but no page refresh or log-in/log-out happens, the chmln.identify does not need to be called again.

Note: The chmln namespace can be found within the window scope, and accessed at window.chmln in scoped frameworks.

Accessing window.chmln from Angular (or Typescript)

declare var window: any;


const chmln = window['chmln'];

Up for more?

Did this answer your question?