Chameleon Experiences are intended to blend seamlessly into your product or website (hence the name!) but also stand out in a way that is 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.
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.
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.
The Dashboard is the hub of your product adoption efforts and where you set your Default Style before jumping in to build your Experiences.
On the Styling page, you can:
Set your brand style to define your global Experience style, including custom fonts and a button style;
Apply styling tweaks to specific Tours, Tooltips, Microsurveys, and Launchers or all Experiences (such as future ones, or to individual ones that you pick);
Apply account-wide custom CSS, review and edit Experience-specific CSS;
Access and manage your Templates.
With the Global Styling options, you can make sure all Experiences look native. Here, is where you can also adjust your default styling for any brand style updates or changes.
🤝 Use the Global Styling options to set a clearly defined style that is easy to use for all teammates and matches your branding perfectly.
Once you have your Default Style set and it matches your brand's personality and your intent, you can 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
If the styling options leave out something important, you can get very specific with custom CSS tweaks. You can apply custom CSS just like any other style change, globally from the Dashboard, or to specific 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)
💡 Custom CSS will take precedence over any other style choice or adjustment you make.
From the Custom CSS tab in the Dashboard, you can apply custom CSS to specific Experiences, multiple ones, or all Experiences. In the Builder, you will apply custom CSS to the specific Step, or Experience you are working on.
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.