For Chameleon to show in-product Experiences to the right users, at the right time, you'll need to install the Chameleon code snippet into your application's codebase.

This will keep track of every user who loads your page and based on the properties he has or actions he takes, Chameleon decides who should see what content.

At large, you can do this in 3 simple steps:

  • Choosing an installation method

  • Integrating the code snippet & identity verification method

  • Verifying the installation


Quick access


Before you begin installing

To prevent any roadblocks when installing Chameleon, here are a few things to have in mind:

▪️ Do you have a Chameleon account? Use your work email address or Google for Work to create an account, and start your free trial anytime your choose. You can sign-up here.

▪️ What are the processes, timelines, and people required to add third-party code to your application? Does someone need to validate, test, or sign off on adding the code? Do you need to create a ticket, and in which sprint could this be worked?

▪️ What user data will you need? If you install via Twilio Segment or Freshpaint, you likely will not need to send data to Chameleon separately.

If you choose a different method, you may want to send different data types as part of the installation. This will empower Chameleon's capabilities to show contextual, personalized Experiences to your users. Chameleon can also obtain some data via our integrations, such as Amplitude, Mixpanel, Heap, Hubspot, Salesforce, etc.

▪️ Does your application have dynamic or personalized URLs that contain content such as user IDs or customer subdomains? If so, it will be helpful to send this content to Chameleon for each user. Read more about sending user data to Chameleon.

▪️ 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. Learn more about personalizing your guidance.

▪️ 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 have a CSP your engineers will have to add Chameleon to the inclusion list. Read about how to do that here.

▪️ Does your application use keyboard shortcuts?

If so, these may conflict with Chameleon and hinder your ability to type within the Chameleon Builder. To circumvent this issue, your engineers will need to add some extra code. Know how to troubleshoot this.


Installing Chameleon

There are various ways to install Chameleon, and depending on your preferred choice you'll go through a few steps. After you create your Chameleon account, you'll have access to the Installation page in the Dashboard. Here, you'll find these options.

If you're already using Twilio Segment of Freshpaint you can install Chameleon in just a few minutes. This is the fastest way to get you started and also the easiest.

Once you add the Chameleon code from Twilio Segment or Freshpaint to your product and enable the integration toggle, Chameleon will receive all the user data collected by these integrations and will send back to them the user data collected within Chameleon.

Follow these guides if you want to install Chameleon this way:

- Installing using Twilio Segment

- Installing using Freshpaint

🧑‍💻 Although you don't need technical knowledge to use Chameleon, for these methods, we recommend you involve technical teammates to assist you in a successful implementation. Once installed, you won't need to involve developers, and you can manage everything from the Chameleon Dashboard & Builder.

Here are the steps you should follow to install the Chameleon code snippet onto your application and publish Experiences to your users.


Note: The 'code snippet' is the block of code that includes the Chameleon functionalities of creating and publishing Experiences.


❶ Decide which user data you'll want to use with Chameleon.

For Chameleon to know who your users are and who should see a specific Experience, you'll have to send us two types of data: user properties & events.

User properties are attributes that characterize your users, such as their first name, or email address. Read more about user properties here.

Company properties are similar to user properties but describe a group of users, e.g. company name, or plan. Learn more about company properties here.

Events are the actions your users took in your product, such as clicking a button, uploading a document, or inviting a teammate. Read more about user events, here.

If you're installing via Twilio Segment of Freshpaint, these will flow automatically to your Chameleon account. But if you choose one of the methods below, it will come in handy when you'll add the identify method.


Note: the identify method refers to the chmln.identify() call which pulls user data from your app to ensure Chameleon identifies your users correctly. This is critical to show contextual, targeted Experiences to your users. Without this, Chameleon will not load into the page.


Install the Chameleon code snippet & identify your users

From the Dashboard, pick the method that suits you and follow the instructions in the guides below. You will see a code block that you can add to your application.

With these methods, you may need to wrap this code based on your framework. Learn more from the following articles:


Verify your installation

To check that Chameleon is installed correctly and is receiving data about your users, go to the Installation page in the Dashboard and click Verify Installation.

Here, you'll see a list of domains and subdomains that send data to Chameleon and you can also type in a specific one to test the installation.

The green banner indicates that data is being correctly received. This does not prove that users are being identified correctly but does indicate that the user identification method is being called.

All good? All you have to do now is download the Chrome Extension and build branded Experiences to guide your users. 😊


FAQ

  • Will Chameleon work with my app? Chameleon works with browser-based web products and supports a wide range of technologies.

  • Does Chameleon work with Single Page Apps? Chameleon supports Single Page Applications (SPAs) and all common front-end frameworks (i.e. React, Angular, Ember, Vue, etc.).

  • Can I install Chameleon on a mobile app? Chameleon operates in web environments and will work within Cordova, or Electron apps as long as your app resembles a web environment.


Up for more?

Did this answer your question?