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.
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;
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
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:
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.
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:
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:
Borders and shadows
Positioning of certain components (e.g. dismiss cross)
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.