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.

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


Quick access


Global Brand Styling

So you can 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).

On the Styling page, you can 'Set your brand', set and change the default styling for your existing or new Experiences on your account, add account-wide custom CSS and review what custom CSS has been directly added to an Experience.

🎓 To learn more about setting your brand defaults, read this article.

Brand Basics

When you start off with Chameleon, you can easily set your brand colors to create and maintain a default style for all Experiences, from the Dashboard's Styling page.

Start with your main brand style to define a close-knit look that everyone on your team can easily stick to, no matter the type of guidance you want to deliver.

Once you confirm your Brand Basics every Experience you'll create will have this default style, that you can further adjust. You never know when style changes may be around the corner. 😉

🎓 To learn more about Brand Basics and setting a default style for your Experiences, read this article.

Change the styling of specific Experiences

On the Global Styling page, go to the Account Styling section to adjust the individual components for a specific or group of Experiences, and choose how these changes will apply.

You will find a lot of options to customize here, such as:

  • Colors: Step background, text, Lightbox / 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.

These individual style settings are grouped in tabs by Experience-types: Tours, Tooltips, Microsurveys, and Launchers. The changes you make will appear in the live preview on the right-hand side, so you can keep an overview of your changes. 😉

Any change or update that you make here, you can choose to save and apply to:

  • All Experiences

  • Only future ones created

  • Individual Experiences that you select

  • Experiences grouped by Tags

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


Note: When you make changes to any Live Experiences, they will be marked as 'Edited' and you will need to re-publish them before the updates you make go live. This ensures you preview any changes before deploying them to your end users.


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. Customize these components to fit your brand personality and guidance need:

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:

In the title and body, you can also apply markdown formatting, add links and bullet points, as well as emojis to help brighten your content. 🔆 You can also leverage user variables to personalize every interaction.

Use the options you have to create easy-to-scan and engaging Experiences.

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:

  • apply global style changes from the Dashboard 👆 and choose which Experiences to update;

  • individually open an Experience in the Builder to customize.

    To make your job easy, you can use the 'Created by' filter to pinpoint the right Experience, then go to the 'Edit' Tab and click on the preview of any Step (or whole Experience) and 'Enter the Builder' to make any style changes you want.

🎯 If it's a live Experience, make sure to apply your changes from the Dashboard once you're done in the Review and Publish section.


Custom CSS styling

The Custom CSS tab in the Dashboard is the place to go for full styling control of any individual or group of Experiences. Your custom CSS code can be added to your whole account (all Experiences), to a group of Experiences, or to specific ones.

Here you can hit the 'Quick Edit' button to go in straight away and add your custom codes. Or, take the safe route, and 'Edit in the Builder' to also get a quick preview of the changes you want to make. Once you're happy with your changes, you can apply them immediately.


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.


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). Simply select the Custom CSS option from the Design section and click "Add CSS rule". Chameleon will generate a new rule and you can add your desired selectors and styling.

All the custom CSS changes you're making will also show up in the Dashboard, under the Custom CSS tab. You can easily go in to review and adjust the styling applied with the 'Quick edit' option or use the Builder for precise revisions.


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



Templates

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

Right now, you can create and save Tour Templates. The rest of the Experiences will pick up the colors your set in the Dashboard and apply them to newly created Experiences on your account.

👀 Coming soon: Templates for all Experience types.

In the Dashboard, 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 or Experiences with the Chameleon Builder.

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 please let us know!


Know more

Did this answer your question?