Skip to main content
Styling Overview

How to change colors, fonts, add custom CSS, or other styling options to your Chameleon Experiences

Tiago Mota avatar
Written by Tiago Mota
Updated today

Your Experiences should look and feel native, and Chameleon lets you adjust the styles to match your brand and your intent. From Announcement Tours to Onboarding Checklists, you have complete control over the look of your guidance.

Here's how you can control the style of your Experiences, from high the level to the smallest detail. 😊


Availability & Usage

πŸ§‘β€πŸ’Ό Admins & Designers can update (if Roles are enabled)


Global Brand Styling

To easily deliver on-brand and on-point product guidance, you can control how every Experience looks for a completely cohesive look. You can adjust the main Experience colors, of course, but also the fonts and how interactive components look (e.g. buttons, Dismiss, etc.).

Default Style

As you get started with Chameleon, you can confirm your Default Style. This sets your main colors, fonts, and button style. These set the basic colors and fonts for your future Chameleon Experiences.
​
πŸ‘‰ You can also invite a Designer on your team to help set your Style.

β„Ή After you confirm your Default Style, you can adjust this anytime on the Styling page.

Account Styling

On the Styling page, you can find more options to define how Experiences look in Chameleon. You can define a close-knit style that everyone on your team can easily stick to, no matter the type of guidance.

πŸ‘‰ Make style changes and choose where to apply them, review Custom CSS that's been added to your Experiences, and access the Templates on your account or the Figma Components File.

β„Ή On the Styling page, you can update the default style for all Experiences that will be created on your account or apply your changes to specific Experiences or Templates. You can also preview style changes, including Custom CSS tweaks, in the preview panel before applying them to any Experiences.

Update the styling for specific Experiences

In the first tab, 'Options', you can update the style of your fonts, canvas, buttons, or other components, such as the dismiss cross or progress bar. You can find options to customize colors, font weight, spacing, padding, and more. From the right side dropdown, next to "Preview Experience", you can select any individual Experience or Template to preview your changes.

On the 'Global.css' tab, you can review and edit the Custom CSS on your account.

β„Ή Any changes you make to your Global CSS will be live as soon as you apply them. For the changes you make on the first tab, Options, you can pick the Experiences you want these to apply to.

You can choose to apply style updates to:

  • All Experiences

  • Only future ones created

  • Individual Experiences that you select

  • Experiences grouped by Tags

  • Templates (future or existing)

🀝 We recommend you use Tags to group Experiences by product or use case and leverage this option to update group styles.

β„Ή When you make changes to any Live Experiences, they will be marked as 'Edited', and you will need to apply the changes in the "Review and Publish" panel before users see your latest version. You can use the filters to find 'Edited' Experience, then apply your changes to each.


Individual Experience styling

After setting your account-wide style, you can further customize your Experiences either as you build them or at any point after that. You will use the Builder to be able to view any change or configuration right in your product and ensure a perfect delivery to your users.

On-page styling while building

When you start building an Experience, you can pick to start from a blank canvas or use a Template that's created with your brand colors.

Regardless of the option you choose, you can achieve absolute visual consistency with the design controls you have in the Builder. You can tweak these components further:

While working with colors in the Builder, 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.

To make adjustments to any component (e.g. Step body, title, button, etc.) click it to see the customization options available.

πŸ’‘ You can also create transparent Steps by changing the opacity of the Step background color to 0%. You can use this in combination with an overlay to create an alternative style of guidance:

You'll find options for your Step content as well and you can also apply markdown formatting, or add emojis to help brighten your content πŸ”† Or leverage user variables to personalize every interaction.

Use the options you have to create easy-to-scan and engaging Experiences. If you need any help use our AI assistant to improve your content

Customize a built Experience

Any Experience you build in Chameleon can be updated to match your brand style. To edit a built Experience, you can:

πŸ‘‰ If you make changes to a live Experience, make sure to apply your changes from the Review and Publish panel once you're done.

Custom CSS styling

On the Styling page, select the 'Global.css' tab to review and apply changes to your account style. Use the 'Edit' option to make changes directly in the Dashboard and preview them in the right-side panel. Or, update your style in the Builder. Once you're happy with your updates, apply your changes.

β„Ή Open the CSS Cheat Sheet to quickly find a specific selector that you can use to customize your Experience. You can review all the available selectors for all Experience types and simply copy and paste one when you need it.

β„Ή If you are using Custom CSS this will take precedence over any other point-and-click styling changes you make from the Chameleon Builder directly.

To review and edit the Custom CSS applied to individual Experiences, head over to the Experience CSS tab on the Styling page. You can select any Experience on your account with Custom CSS rules and review or adjust them in the Dashboard, or Builder.

β„Ή Once you update the custom CSS it will apply immediately, including to all existing (live) Experiences.


Templates

To deliver your branded guidance easily, you can create and manage Templates from the Dashboard; these will appear when you create a new Experience (e.g., adding a new Tour Step or a new Microsurvey).

Head over to the Dashboard and explore the "Templates Gallery" for each Experience type, or create your own. This works the same way as you would create individual Steps or Experiences with the Chameleon Builder.

Once you add one to your account, it will follow your Default Styling and will be available to you in the Builder as well.

You can use Templates to:

  • Set standard types of Experiences (e.g. a standard banner, standard modal, standard help center, etc. for your account)

  • Add design variations by use cases (e.g. event promotion slideout vs. feature announcement slideout)

  • Separate your Chameleon Experiences - 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 Experience styling, let us know!

Did this answer your question?