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 they have or actions they take, Chameleon decides who should see what content.
You can install Chameleon in three simple steps and it can all be done in a few minutes depending on your installation method:
Choosing an installation method
Integrating the code snippet & correctly identifying users
Verifying the installation
ℹ As part of the installation, you can also Encode your User IDs for better security. Although optional, we strongly recommend you Encode your UIDs
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
After you create your Chameleon account, you'll have access to the Installation page in the Dashboard. Here, you'll find these options:
No-code installation via Twilio Segment or Freshpaint
If you're already using Twilio Segment or 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 user data collected by these integrations
Send back to them the user data collected within Chameleon
Follow these guides for integration-based installation:
Installing manually via npm, JavaScript, or Google Tag Manager
🧑💻 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.
👉 The 'code snippet' is the block of code that includes the Chameleon functionalities of creating and publishing Experiences and identifying your users.
Here are the steps to install the Chameleon code snippet onto your application and publish Experiences to your users.
Step 1: Decide which user data you'll want to use with Chameleon.
For Chameleon to identify users and determine who should see specific Experiences, you can send additional data:
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 subscription plan. Learn more about company properties here.
Events are your users' actions 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.
Step 2: Install the Chameleon code snippet & identify your users
ℹ️ Chameleon uses an identification method to pull user data from your app to identify your users correctly. Make sure you're passing the right data to Chameleon.
From the Dashboard, select your preferred method and follow the instructions in these guides:
With these methods, you may need to adapt the code based on your framework. Learn more from these specialized guides:
Installing for anonymous visitors (e.g. on a marketing site)
Step 3: Verify your installation
To confirm that Chameleon is installed correctly and receiving user data:
Go to the Installation page in the Dashboard
Click "Verify Installation"
Review the list of domains and subdomains sending data to Chameleon
Test specific domains as needed
🛠️ Troubleshooting tip: If you see the message "no user profiles identified in the last 48 hours" check if your domain is archived; try restoring it and test again.
Once verification is complete, download the Chrome Extension to build branded Experiences for your users. 😊
ℹ️ Important note: 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 on the "Verify installation" page or in your Environments. The same goes for new subdomains that you add to already-enabled domains.
Frequently Asked Questions
Will Chameleon work with my app?
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?
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 host Chameleon assets and files?
Can I host Chameleon assets and files?
Chameleon can be treated as a first-party application, for more information read how to implement and run Chameleon as first-party.
Can I install Chameleon on-premise?
Can I install Chameleon on-premise?
Chameleon currently hosts and processes data in the cloud and doesn't support on-prem installation. We do provide a first-party solution.