What does Chameleon look like?

Chameleon is a platform for better onboarding -- to build and optimize product tours without writing code.

For end users

End users (your users) see the tours you build. These can consist of one or multiple steps. Each step is one of four step types: modal, infotip, lightbox, or hotspot.

Modals

These appear front and center of view window, with a background shroud, and thus grab a user’s attention. They are often used at the beginning of a tour or when showing critical information. Modals can contain media, (e.g. image, gif, or video) to supplement explainer text.

For help resizing images before uploading see this.

Modal step on Airbnb shows this announcement for new users, containing an introductory "Welcome to Airbnb" video.

Infotips

These appear in the bottom-right of page and provide context for a page. They are great for providing an overview without preventing users navigating or exploring the page. They should request users to take action on the page, and because they don't highlight the specific action / element, users have to actively process and act upon the information provided. This is a great way to build user habits and increase user cognition.

Lightboxes

Lightboxes are a way to highlight a specific element by placing a dark (grey) shroud over the rest of the page. Explainer text linked to the lightbox provides an opportunity to add some commentary. These are useful when trying to direct users to critical information or a part of the page that may be non-obvious. A great use case is to engage users with an under-valued part of your product, or to demonstrate changes in your interface.

Lightbox step on Mixpanel highlights a key piece of functionality that an engaged user might have missed.

Hotspots

Like lightboxes, these are also affixed to a specific element on your page that you designate. These pulsing dots show explainer text when clicked, and provide a subtle hint to users to learn more about the associate element. These don't prevent navigation to other areas and so don't break an existing workflow and can be a gentle nudge.

You can use any of these and other step types to create your in-product tour within minutes. You can view your tour as a user before publishing and have easy control of which tours are on or off.

Hotspot step on Gusto nudges a user to learn more about a feature without interrupting their user experience.

For Chameleon admins

The Sidebar editor

You and your colleagues that use Chameleon to build tours see the Chameleon sidebar (green panel on the right hand side), over your app / site. You will use this to build, edit, publish and manage tours.

You can toggle this Editor off when not building or managing tours, and simple re-activate it when ready. Check out the video below for the Editor in action.

The settings dashboard

All account management (e.g. inviting teammates, installing the code snippet, billing etc.) functions are within your Chameleon dashboard, available at dashboard.trychameleon.com.

Which platforms does Chameleon support?

Chameleon is a JavaScript-enabled product for use on any browser-based website or web application. This means that if your software can be accessed via the browser (through a local or internet connection) then Chameleon can be enabled.

Chameleon works with single-page web applications and across all frameworks, such as Angular, React, Ember etc.

Building tours

Chameleon tours can be built on Google Chrome, Mozilla Firefox or Apple's Safari browsers, once the snippet is installed.

Without the snippet, tours can be built locally for Chrome using the Chrome extension.

You must be using a desktop / laptop device to build tours; we do not support mobile for building tours.

Viewing tours

Tours built with Chameleon can be viewed on any browser on any device.

We support all versions of Chrome, Firefox and Safari and Internet Explorer 10+.

Chameleon tour steps are responsive and can be viewed on mobile devices (via mobile web), but by default tours are turned OFF on mobile. If you would like to change this for your tours then please email us at support@trychameleon.com