All Collections
Setup & Installation
Installation basics
Installing directly using JavaScript
Installing directly using JavaScript

Learn how to install Chameleon manually on your application using a JavaScript snippet

Chameleon Team avatar
Written by Chameleon Team
Updated over a week ago

Getting Chameleon installed is a quick process that enables you to create Experiences in your product.

If you don't use Twilio Segment or Freshpaint then you can install the code manually. This won't take long and is similar to installing other JavaScript snippets, such as for analytics or other tools.

🧑‍💻 Ask your developer to help you if you're not comfortable installing Chameleon this way, to ensure you'll start with the right setup.


Installing Chameleon directly using JavaScript is a simple process that usually takes just a few minutes, and has 2 essential components:

  • installing the code snippet -- the Chameleon functionalities that allow you to create and publish Experiences

  • identifying users correctly -- the identification method that Chameleon uses to keep track of what to show to your users

Head over to the Dashboard, pick the JavaScript method, and follow the steps below.

👉 To access the Dashboard, you need to have an account created with Chameleon. You can create one here.

The first step is to configure your code snippet in the Chameleon Dashboard. You'll notice the basic code snippet on the right side, and you can further configure it to include the components needed to receive data.

⚠️ The code snippet above is just an example. Each code snippet is unique and you must use the one from your Chameleon Dashboard.

You should not be replacing the 'Secret Key' provided in the first field with the 'Regular Key' from the second field (that contains the code snippet). If you receive an error saying 'The key you are using is not found in Chameleon' review your code snippet to ensure you have the correct key.

From the toggles on the left, you can also choose to:

  • send user properties

  • send company properties

  • send user events

  • encode user IDs

  • enable navigation without refresh

This enables you to target users efficiently and personalize your Experiences.

Once you toggle these on, Chameleon will automatically adjust your code snippet on the right. Simply copy it all and add it on all pages where you want to leverage Chameleon.

  • Make sure the snippet is included on all private pages - typically before the closing </head> tag.

  • Ensure you replace USER.ID_IN_DB with the variables your codebase uses for user IDs/records and proceed similarly for the other PLACEHOLDERS (these are identified as all-caps words in the code snippet).

  • You can install Chameleon on any subdomain (or even locally), although we recommend installing directly on production.

  • Plan which user data to include -- discuss with your team what would be useful for targeting Chameleon Experiences or for personalizing content.

  • You can also send other user data (e.g. user events) from your product, by using our API. You have options to send data via our front-end JS API, our back-end REST API, or a collection of Webhooks. Learn more about how to send users' data to Chameleon.

Chameleon relies on accurate user data to be able to match the right Experience with the right users. When it comes to showing Experiences, URL matching, targeting specific audiences, and personalization, here are some important notes to keep in mind:

  • The user ID is *required for all users* (without it, they will not see any Experiences)

  • The user ID must be a string, even if it's a "number" put it in quotes to stringify it

  • The user email is necessary for some integrations to work correctly

  • The user created date is strongly recommended (to be able to target new or old users)

  • Chameleon must be installed and identify users on every page that you want Experiences to display (not just when users log in)

👇 Below is an example of the script you'll find in your Dashboard:

// This is an example script, don't forget to change the PLACEHOLDERS.
// Please confirm the user properties to be sent with your project owner.
//
chmln.identify(USER.ID_IN_DB, {     // Unique ID of each user in your database, must be a string (e.g. "23443" or "590b80e5f433ea81b96c9bf6")
  email: USER.EMAIL,                // Put quotes around text strings (e.g. "jim@example.com")
  created: USER.SIGN_UP_DATE,       // Send dates in ISO or unix timestamp format (e.g. "2017-07-01T03:21:10Z" or 1431432000)
  name: USER.NAME,                  // We will parse this to extra first and last names (e.g. "James Doe")
  role: USER.ROLE,                  // Send properties useful for targeting types of users (e.g. "Admin")
  logins: USER.LOGIN_COUNT,         // Send any data about user engagement (e.g. 39)
  ...
  project: USER.PROJECT_ID,         // Send any unique data for a user that might appear in any page URLs (e.g. 09876 or "12a34b56")

  company: {                        // For B2B products, send company / account information here
    uid: COMPANY.ID_IN_DB,          // Unique ID of the company / account in your database (e.g. 9832 or "590b80e5f433ea81b96c9bf7")
    created: COMPANY.SIGN_UP_DATE,  // To enable targeting all users based on this company property
    name: COMPANY.NAME,             // Send any data that appears within URLs, such as subdomains (e.g. "airbnb")
    trial_ends: COMPANY.TRIAL_ENDS, // Send data about key milestones (e.g. "2017-08-01T03:21:10Z")
    version: COMPANY.VERSION,       // If your software varies by version then this will help show the correct guidance (e.g. "1.56")
    plan: COMPANY.PLAN,             // Send null when no value exists (e.g. "Gold", "Advanced")
    ...
    spend: COMPANY.CLV              // Send other properties that will help in targeting users (e.g. sales rep, source, stage)
  },
});

It is also possible to display in-product Experiences to unidentified users, in case you want to include your website visitors or any other anonymous users that visit your page. To do so, you will need to include code logic to generate a unique ID and store it to a cookie.


Identity Verification is a method to digitally sign the user data sent to Chameleon, such that Chameleon knows it is from your account. This prevents a third-party from sending us data on your behalf or downloading your data through a malicious hack.

We strongly recommend that you enable Identity Verification wherever Chameleon is installed.


Once you have successfully installed the code snippet and a user has loaded the page then the domain will show up on the Domains page in your Chameleon Dashboard. You'll see the domains in your last installation step, before finishing up.

If you install Chameleon on a domain that's different from your email domain, it will be automatically disabled, and you should manually enable it (check your Environments) The same goes for new subdomains that you add to already-enabled domains, to ensure better security for your account.

You can verify that user attributes are being sent by using this method or by checking the available data within the User Properties, User Events, and Company Properties filters when creating a target audience.


What's next?

Did this answer your question?