Chameleon Experiences are designed to blend seamlessly into your product while also standing out in a way that is both engaging and helpful to your users.
The Chameleon Dashboard and the Builder give you 100% control over the styling of any Experience ensuring whatever you build is consistent with your brand and won't stand out in a wrong way.
What can I customize in Chameleon?
From applying your main brand colors to all Experiences to changing a Launcher widget's icon, you can customize and apply your personal touch to all Experiences and interactive components.
With in-product guidance, it's important to achieve a native result, but one that will attract the user's attention - and we don't mean by obstructing their view, but with well-thought and well-designed messages. 😉
With Chameleon, you can customize:
Colors: ranging from Experience canvases and borders to buttons, content, and hyperlinks - You can be sure your brand colors will stand out;
Positioning: Experiences & critical components - Configure the right spot for any Announcement, button, or checklist progress bar;
Content: colors, markdown options, merge tags - Aside from using your voice and beautifying your content, leverage all your user knowledge to deliver a personalized experience;
Aside from the point-and-click options you have, you can also apply CSS (stylesheets that define your styling) to all Chameleon Experiences to ensure that you have granular control over all components.
How can I customize my Experiences?
There are two ways to apply style changes or specific customization to your Experiences:
adjusting the Dashboard's account-wide styling options
on-page customization using the Builder
🤝 While keeping your Experiences on-brand is essential for a seamless user flow, it's a good idea to make the background of your Experience different from the underlying interface so it's obvious to users and prompts them to act.
Dashboard Styling
On the Styling page, you can:
Apply styling tweaks to specific Tours, Microsurveys, or all Experiences
Apply account-wide custom CSS, review and edit Experience-specific CSS;
🤝 Use Themes and Templates to set a clearly defined style that is easy to use for all teammates and matches your brand perfectly.
On-page styling using the Builder
You can also adjust how the Experience looks in your app, using the Builder. The on-page options you can further adjust in the Builder are:
Content style (Title, Body)
On-page Trigger icons
Custom CSS styling
If the styling options leave out something important, you can get very specific with custom CSS tweaks. You can apply custom CSS to Themes and review individually-applied CSS to Experiences from the Dashboard. You can also apply Custom CSS to Experiences from the Builder.
While many common styling attributes are customizable from the Chameleon UI, you may want further control over details such as:
Line spacing
Borders and shadows
Positioning of certain components (e.g. dismiss cross)
Color gradients
Font stacks (learn more here)
You can also download a file that contains all the CSS applied to your Experiences to review and edit - from the Dashboard, as well as from individual Steps in the Builder.
Check out a list of custom CSS examples applicable to all Experiences.