Chameleon is your one-stop shop for no-code in-app success. You can create and manage in-product guidance for users by creating Experiences: modals, walkthroughs, surveys, embedded patterns, or in-app menus. You'll leverage the 3 Chameleon components to achieve this:
The Builder: an Editor that sits over your application that you'll use to configure your Chameleon Experiences.
The Dashboard: set account options, build and publish Experiences, and update account-wide features such as styling.
The HelpBar: a search component that you can use to navigate to other Experiences or settings, and bring up helpful resources
Finally, the Experiences (patterns) are the final result that your users will see and interact with on your website.
How do I use the Chameleon Builder?
Video Overview
📺 Check out this quick video overview of the Chameleon Builder.
ℹ To access the Builder, you don't need to have the Chameleon code snippet installed on your application. Just sign up for an account and install our Chrome Extension.
When you want to build an Experience start by picking a type from the Dashboard and then open the Builder to configure it. Return to the Dashboard to pick an audience and go live.
You can start building an Experience from the Homepage or from any Experience page.
ℹ Once you pick a type, you can also select a Template (to ensure a consistent style) or start from a black canvas.
Next, you'll add your domain name and click "Enter Builder" to load the Builder onto your application and configure your Experience. Chameleon will remember the links you've previously opened the Builder on and you can pick from a list of available links.
You can also open the Builder directly on your application by clicking the Chrome Extension and similarly, you can pick an Experience type and a Template, and start configuring your Experience.
ℹ The "Edit existing Experiences" option will open HelpBar for you and you can search through existing Experiences on your account to edit or update their configurations.
The Builder will open on your page, housing all the available configuration options. You'll find different options grouped into 3 main sections:
Design -- canvas and content options, Custom CSS, and other options.
Display Rules -- options to determine which criteria or triggers are necessary for an Experience to display, such as the presence of your user at a given URL, or clicking on a specific element on your page.
ℹ You'll find similar options in the Builder for all Experience types, with some exceptions (e.g. progress bars are available for Tours and not Tooltips).
👉 To select specific pages in your product to start configuring your in-app Experiences, use Navigate mode from the Builder Topbar.
Aside from the usual configurations you'll also find a few general options in the Builder available across all Experiences: Preview, Duplicate, Templatize, and Delete.
The Builder Topbar
Use the Builder Topbar to return to the Dashboard, jump to an existing Experience, access other modes while configuring your Experience (Navigate, Edit, or Preview, and find a link to the Help page to get further guidance.
You will use the Top bar to add or navigate between different Experience Steps or the different Launcher states you may work on. To add a new Step, or State to your Experience flow simply click the "+" icon. To configure it, click on it and the Builder will bring up all available configurations for that Step/State.
Navigate mode
Use the Navigate mode to move through your website as you normally would, without interfering with your Experience configuration flow.
You can find the specific page where you want to anchor your Experience. When you're ready to add a Step, click the Topbar button to add it.
Edit mode
In Edit mode, the Chameleon Builder is open on your website and you customize your Experience as usual. You'll see the Experience name on top, and its individual Steps. Here you can also add new Steps and switch between them.
While in Edit mode, you’ll also be notified in the Topbar whenever something is missing for the Experience to be displayed correctly. For example, with “Element Rules”, or “URL Rules” you will see a notification in the Builder if any component involving an element match (or URL rule) is present on the current page or not.
ℹ When updating values in PX or % from the Builder, you can hold down Shift on your keyboard to increase/decrease the values by tens.
Preview mode
In Preview mode, you'll see how your Experience behaves and appears to your users.
Switch from customizing your Experience to taking it for a quick test drive and return to customizing your Experience by clicking the “Edit” button.
ℹ "Preview mode" is great to check the position, styling, and triggers. But note that in some cases, you'll not see exactly how that Experience will appear to users. With Launcher Checklists, for example, Preview mode will also show how checked (completed) items look, which can also disappear once completed.
🤝 The best way to check what your users will see is to perform a live test.
What can I do in the Chameleon Dashboard?
The Dashboard is the home of your Chameleon Experiences. Here is where you start building your Experiences (and publish them live), customize your account's styling, manage audiences, and get a good grip on how Experiences perform.
In the Dashboard, you can:
Access interactive demos to give Chameleon a spin before committing
Manage your Chameleon subscription
Manage Integrations that fit right in your stack
Review and manage the data you’re sending to Chameleon
Create and manage Tours, Tooltips, Embeddables, Microsurveys, and Launchers
Define account-wide styling so you’ll always be consistent
Create custom audience groups with segmentation filters
Analyze the results and performance of your Experiences
Review your account's performance on the Homepage
Run Experience A/B testing to find exactly what works
Review teammates' efforts on the Activity feed
Set and manage Rate limits to avoid overwhelming your users
Set Alerts for your Experiences
The HelpBar
Video Overview
📺 Watch the video below to understand how to use the HelpBar in Chameleon.
Open HelpBar in the Dashboard or Builder to navigate to other Experiences, Dashboard pages, or find more help and inspiration from our guides and articles. In the Builder, it's increasingly useful to jump to other drafted or live Experiences that you want to update.
You can also use the CMD+K, or CTRL+K keyboard shortcuts, to bring it up anywhere in Chameleon 😉
The Chameleon Dashboard, Builder, and HelpBar work together to help you have complete control over your account and Experiences. Together, they work to support you in creating contextual Experiences that blend in smoothly anywhere on your website.