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.
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.
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 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.
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.
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.
Chameleon works with single-page web applications and across all frameworks, such as Angular, React, Ember etc.
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.
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 firstname.lastname@example.org