For Chameleon to show in-product experiences to your users, you need to install the Chameleon code snippet in to your application's codebase. Note: Chameleon works with browser-based web products and supports a wide range of technologies.
There are multiple ways to achieve this, as we will explore in this article.
Once you have created a Chameleon account, you will gain access to the Installation page on your dashboard, where you can choose to install via:
Segment (no-code install). Learn more here.
Freshpaint (no-code install). Learn more here.
Npm (manually adding code). Learn more here.
Google Tag Manager (manually adding code). Learn more here.
Setting up Chameleon with Segment, or Freshpaint is the fastest way to get you started; it is also the most simple, by all means.
Once you add the Chameleon code from the Segment or Freshpaint pages 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.
If you do not use Segment or Freshpaint, then you will require some engineering time to ensure Chameleon is installed correctly, so read on below.
Selecting the JS method will present you with a code block that you can add to your application (directly or via GTM).
You may need to wrap this code based on your framework. Learn more in the following articles:
Installing for anonymous visitors (e.g. on a marketing site)
You may want to check out these considerations prior to installing, to prevent any friction or roadblocks:
What are the process, timeline, 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 upon?
What user data will you need?
If you are integrating via Segment, or Freshpaint, then you likely will not need to send any data to Chameleon separately. If you already use Amplitude, Mixpanel, Heap, Hubspot, Salesforce etc. then Chameleon can obtain some user data from our integrations with these tools.
However, you may want to send data directly to Chameleon. This can help with targeting or personalizing Experiences and can be sent as part of the installation. Learn more about how this works here.
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. Discover how this works here.
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. Find out how to do so.
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 do have a CSP then 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 Editor. To circumvent this issue, your engineers will need to add some extra code. Know how to troubleshoot this.