Your Experiences should look and feel native, and Chameleon lets you adjust the styles to match your brand.
You can set styles and more from the Styling page in your Chameleon dashboard. Some of the things you can do here include:
Set your brand colors and fonts
Set the default styling for your Experiences
Change the styling of a specific or group of Experiences
Add account-wide custom CSS
Review what custom CSS has been added to any specific Experience (directly)
💡 Tip: users will sometimes miss your Experience if it looks the same as your underlying product; we recommend using contrasting/complementary colors for in-product Experiences to help them stand out. Read more about this in this best practice article.
Here you can 'Set your brand' and change the default styling for your existing or new Experiences.
To learn more about setting your brand defaults, read this article.
In the 'Account styling' section you can adjust the individual components for a specific or group of Experiences. These individual style settings are grouped in tabs by Experience-types: Microsurveys, Tooltips, Tours, and Launchers.
You will have the option to change components such as:
Colors: step background, text, overlay / shroud
Fonts: family, default size. To learn more about this see this article
Other: corner radius, shroud opacity, link color, etc
Custom CSS: specify more precise styles.
Any styling you adjust will appear in the live preview on the right-hand side.
Within each section, you can choose which Experiences to apply Styling to, including by Tag. Using Tags allows you to group Experiences by product, or use case and we recommend leveraging this for setting groups of styles.
For changes to any Live Experiences, these will be marked as Edited and will need to be re-published before the changes are made live. This gives you the opportunity to specifically preview your Experience before deploying changes to users.
Note: If you are using Custom CSS this will take precedence for any other point-and-click styling changes you make from the Chameleon Builder directly.
The Custom CSS tab provides you full styling control of any individual or group of Experiences. Your custom CSS code can be added for your whole account (all Experiences) or by a group of Experiences.
If you'd like to adjust the custom CSS for only one individual Step or Experience, we recommend doing so via the Builder (to give you a live preview.)
All the instances where you have adjusted the individual custom CSS will also appear on this page to give you a clear overview of the styling applied. These can also be adjusted via the 'Quick edit' options.
Once you save updated custom CSS it will apply live immediately, including to all existing (live) Experiences.
You can create and manage Templates in this section; these will appear when you are creating a new Experience (e.g. adding a new Tour Step or a new Microsurvey.)
Templates are currently only available for Tours but we will be adding others soon.
You will see Default Templates that are automatically added to your account, and leverage your default branding. You can also create your own new templates (or copy and modify the defaults) in the same way as you would create individual Steps within the Chameleon Builder.
Templates can be used for:
Setting standard types of Experiences (e.g. a standard banner, standard modal, standard tooltip, etc. for your account)
Adding design variations by use cases (e.g. event promotion slideout vs. feature announcement slideout)
If you are using Chameleon on multiple products and each has its own distinctive styling -- you can create separate Templates for each
If you have any feedback on how we can improve templates or styling please let us know!
In addition to changing the default or overall styling for your steps, you can change the style for a specific Experience or Step from within the Builder. The options you have to change include:
Step background and text color
Button text and background color
Shadow color and opacity
To make these changes, when editing your Experiences, click the component you wish to change (e.g. step body, title, button, etc.) to see the customization options available.
The color palette will show you colors from the underlying page, to make it easier for you to match your brand, but you can also paste any HEX code, and it will be saved to your Custom color list, for easy access.
👉 Have any questions or issues? Review the best way to get help.