Why Chameleon can be valuable 

Chameleon is a platform to quickly and easily build effective in-product guidance, without requiring coding. This means any product person can use Chameleon to guide and delight users, and enable them to succeed. 

An example tour from one our customers

Compared to other options

The alternative to a platform like Chameleon is either having no guidance (and relying on your product's intuitive design) or building guidance in-house. As we outline here, you need more than great design to trigger users to act and learn, and so Chameleon complements and does not compete with great design. Building your product guidance in-house means that you direct critical engineering time away from your core product, and don't gain freedom to optimize and deploy new guidance as quickly in future. 

You can start using Chameleon for free, within minutes, without requiring anyone else. Simply sign-up and download our Chrome Extension to start your (unlimited) trial. 

How Chameleon works

Chameleon provides administrative users a simple builder to create in-product guidance without writing any code. With this builder, you can configure:

  • What your guidance will contain (all the content; copy and media)
  • How your guidance will look (e.g. how big will the tooltip be; what fonts and colors will it contain; what parts of your product it will highlight etc.)
  • Where your guidance will show (which pages or when certain elements are present)
  • Who should see your guidance (the segment of users, as defined by their attributes, actions or other data )
  • When your guidance will show (based on any specific trigger action a user performs)

You can build, preview, test and deploy this guidance to your product with Chameleon, without requiring any engineering time. 

Chameleon works for any browser-based web application. We support single-page apps (SPAs) and all front-end frameworks. For more information, read "Will Chameleon work with my product?" 

The technical details 

Once installed, Chameleon uses JavaScript to display guidance to users of your product. Whenever a page is loaded by a user, the Chameleon code checks what guidance they should see and then displays that. 

All the guidance built using Chameleon is stored in our databases and this is loaded as the application page is loaded. Chameleon operates asynchronously, which means it doesn't block any other parts of the page loading, and so doesn't materially affect page performance.

Although you can sample the Chameleon Editor using our Chrome Extension, you need to install the Chameleon code into your product's codebase (and send some basic user data) for full editing and publishing functionality. Learn more about how to install here.

Example use cases

Chameleon can be used for a variety of use cases, and is not just for user onboarding: 

  • Feature launches
  • Product redesigns
  • Self-serve interactive support
  • Sales demo follow-ups

Read more about how to build lifecycle user onboarding to create loyal engaged users here.

The different parts of Chameleon

There are two faces of Chameleon: 

  1. The Editor (the interface admins see and use to build and manage guidance)
  2. The Tours (the guidance end users see)

Both of these live inside your application; naturally the guidance you build will show inside your product, but the Editor is also available to admin users inside the product. 

The Chameleon Editor

Therefore instead of navigating to the Chameleon website to login and use Chameleon, as an admin user, you have access to the Editor from inside your product. 

Breakdown of a tour

The guidance you build using Chameleon is in the form of product tours. These are a sequence of individual steps that show to a user. Tours can consist of a single step, or multiple steps (we recommend fewer than four) and contain different configuration options. 

The configuration available for an individual step includes:

  • Content (incl. media)
  • Style (size, color etc.)
  • Location (attached to a page or element)
  • Placement (relative to the screen)
  • Highlight (incl. highlight styling)
  • Trigger (what user action causes step to show)
  • Redirection / interaction options

The configuration available for a tour includes:

  • Status (live / draft)
  • Targeting (which users should see it)
  • Goal setting (for measuring conversion)
  • Delivery options (e.g. using tour permalink or automatically triggered)

Did this answer your question?