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. 😊

🧑‍💼 Admins & Designers can update (if Roles are enabled)

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).

When you get started with Chameleon, head over to the Styling page to set up your Brand Basics, setting your main colors, fonts, and button style. This way, you ensure any Experience you'll create will be on-brand.

Below, under Detailed Styling, you'll have more advanced options to define how Experiences look in Chameleon. Here, you can define a close-knit style that everyone on your team can easily stick to, no matter the type of guidance.

You can update the colors, padding, or spacing between components to any of the 4 Experiences. Switch between them to see the options for each type.

On the same Styling page under Detailed Styling, you can adjust the styling and apply it to existing or new Experiences on your account. Pick the specific Experience, make your updates, and choose how you want to apply tour changes.

Here you can adjust your default:

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

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.

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:

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

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

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.

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.

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).

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: