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
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.
There are various ways to install Chameleon. The fastest and easiest way to install Chameleon without code is using Twilio Segment or Freshpaint, but you can also manually install via npm, JavaScript, or Google Tag Manager. 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 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 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:
🧑💻 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.
Here are the steps you should follow to install the Chameleon code snippet onto your application and publish Experiences to your users.
👉 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 can send in additional data and decide what properties, or events you want to leverage.
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.
❷ 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 here.
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:
Installing for anonymous visitors (e.g. on a marketing site)
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.
👉 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.
All good? All you have to do now is download the Chrome Extension and build branded Experiences to guide your users. 😊
👉 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 in your Environments. The same goes for new subdomains that you add to already-enabled domains. This is to ensure better security and that no malicious domains get added to your account.
🔻 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 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 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.
🔻 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.