Chameleon is your one-stop shop for no-code user success. You can create and manage in-product guidance for users, through Experiences (modals, flows, surveys, or in-app menus) with the 3 components of Chameleon:
The Builder: an Editor over your application that you use to adjust and customize your Chameleon Experiences.
The Dashboard: the place where you go to configure account options, build Experiences, and access account-wide features such as styling, or Segments.
The HelpBar: a search component that you can use to navigate to other Experiences, or essential settings, and bring up helpful resources
Finally, the Experiences are the actual components that your users will see and interact with on your website.
📺 Check out this quick overview of the Chameleon Builder.
The Dashboard is the home of your Chameleon Experiences and your central command hub. Here is where you build your Experiences, customize your account, manage audiences, and get a good grip on your account’s performance.
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 Microsurveys, Tours, Tooltips, 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.
Run Experiences A/B testing to find exactly what works.
Set and manage Rate limits to avoid overwhelming your users.
Set Alerts for your Experiences.
Every time you'll build an Experience you will configure it in the Dashboard, but style it and set on-page settings, with the Builder. Pick the Experience you want to create or edit from the Chameleon Dashboard.
Once you add a Step, you will be prompted to customize it in the Builder. Add your domain name and click "Enter Builder". Chameleon will also remember the links you've opened the Builder on and you can pick from a list of available links, or the last link you've used the Builder on.
The Chameleon Builder will open on your page, housing all the options available for customization. Dive in and play around until everything looks and feels right. In the Builder, you work directly with on-page elements and specific styling features to configure your Experience to the very last detail.
🎯 To get to specific pages inside your product and set an Experience's starting point, use Navigate mode while the Builder is open.
The Builder is always in plain sight so you can easily adjust the Experience:
Design
Interactions (buttons and other engaging components)
or Display Rules (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 button)
💡 To access the Builder, you don't need to have the Chameleon code snippet installed on your application. You just need to sign-up for an account and install our Chrome Extension.
You'll find useful options in the Builder, such as Preview, Duplicate, Templatize, or Delete.
A useful component of the Builder is the Top bar where you'll find a few key components, such as Navigate, Edit, or Preview mode, the HelpBar, as well as a link to the Help page where you can get further guidance.
Aside from these options, you will use the Top bar to manage and 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 its name and the Builder will bring up all available options.
💡 You will also see confirmation or error messages for any configurations you make in the Builder, such as Element, or URL rules.
Allows you to move through your website as you normally would, without interfering with your Experience configuration flow.
Use the Navigate mode to find the specific place you want to anchor your Experience to. When you're ready to add a Step, you can click the Top bar button to add it.
When you're using this mode, the Chameleon Builder is open on your website and you customize your Experience as usual. You'll see the Experience name on top, as well as its individual Steps. Here you can also add new Steps and switch between them to style your Experience.
While in Edit mode, you’ll be notified in the Top bar whenever something is missing for the Experience to be displayed correctly, as well as confirmation messages that all is working well.
🎯 When using “Element Rules”, or “URL Rules” to configure how Experiences are displayed, 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.
In Preview mode, you'll see how your Experience behaves and appears to your users.
You can hit the “Preview” from the Builder or in the top Chameleon bar to switch from customizing your Experience to taking it for a quick test drive.
Return to customizing your Experience by clicking the “Edit” button.
Preview mode is great to check the position, styling, and triggers of your Experience. But note that in some cases, you'll not see exactly how that Experience will look to your users. With Launcher Checklists, for example, Preview mode will also show how checked items (when are completed) that can also disappear once completed.
🤝 The best way to check what your users will see is to perform a live test.
From the Builder's Top bar you can also bring up the Chameleon HelpBar to navigate to other Experiences, helpful resources, or essential settings. But you can use the CMD+K, or CTRL+K keyboard shortcuts, to bring it up anywhere in Chameleon. This is just in case you need to open it with a click. 😉
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.
📺 Watch the video below to understand how to use the HelpBar in Chameleon.