If you don't use Segment or Google Tag Manager, then you can install the code manually. This only takes a few minutes and is similar to installing other JavaScript snippets, such as for analytics or other tools.

Installing Chameleon on your application

Setting up Chameleon directly using JavaScript is a simple procedure that might take you only a few minutes. It involves two parts:

1. Deploying the Chameleon code snippet

The basic Chameleon snippet (with your unique token) that installs the Chameleon functionalities that and allow you to create and publish Experiences.

<script type="text/javascript">/* Chameleon - better user onboarding */!function(t,n,o){var a="chmln",c="setup identify alias track clear set show on off custom help _data".split(" ");n[a]||(n[a]={}),n[a].accountToken=o,n[a].location=n.location.href.toString();for(var e=0;e<c.length;e++)!function(){var t=n[a][c[e]+"_a"]=[];n[a][c[e]]=function(){t.push(arguments)}}();var s=t.createElement("script");s.src="https://fast.trychameleon.com/messo/"+o+"/messo.min.js",s.async=!0,t.head.appendChild(s)}(document,window,"TOKEN");

2. Identifying users (using chmln.identify)

Information about users for showing Experiences, URL matching, targeting specific audiences, and personalization.

Important notes:

  • The user ID is *required for all users* (without it, they will not see any Experiences). 
  • 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).
// 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 (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 show 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.

👉 Know more about displaying experiences to unidentified users

Adding Identity Verification

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.

Get your snippet from the Chameleon dashboard

You can retrieve your unique code snippet (which includes also the chmln.identify method) from the Installation section of your Chameleon Dashboard

Note: To access this menu, you need to be on a paid plan. You can join one either by starting a free trial or by contacting us at sales@trychameleon.com.

Helpful tips

  • Make sure the snippet is included on all private pages - typically before the closing </head> tag.
  • Use the snippet found in your dashboard, because it is personalized according to your account.
  • 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 this 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.

Verifying a successful installation

Once you have successfully installed the code snippet and a user has loaded the page then the domain will show up in the Domains section of your Chameleon Dashboard.

You can also verify that user attributes are being sent using this method or by checking the available data within the Imported Properties and the Imported Events filters when creating a target audience. Learn more about the filters used in creating target audiences.

What's next?

Did this answer your question?