We understand the importance of native-looking in-app Experiences to engage users. In Chameleon, you have complete control over the look of your Experiences, and you can ensure a cohesive style with Themes and Templates.

From Announcement Tours to Onboarding Checklists, you can personalize every aspect to achieve the right look and feel.

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

Your Chameleon Experiences will follow a Default Theme that gets created when you get started with Chameleon. Once you confirm your Default Theme, you can adjust it in more detail on the Styling page and create more Themes to set the style for any Experience you create in Chameleon.

👉 You can also invite a Designer on your team to help set your Account Theme or create more Themes and Templates.

On the Styling page, you can access the Themes on your account, create new ones, and adjust your styling. You can also find your Templates here, or review and adjust Custom CSS rules that have been added to your Experiences.

👉 With each Theme, you can access more styling options and adjust your fonts, padding, colors, or Custom CSS.

Access your Default Theme or create new Themes on your account to help you manage a branded style for the different in-app Announcements you want to create. When you create a new Experience, it will always follow the style of your Default Theme.

If you have multiple Themes, you can also pick a different Theme for a new Experience when building it.

On the Experience CSS tab, you can review and edit any individually applied Custom CSS to Experiences on your account. Select any Experience and review or adjust the Custom CSS in the Dashboard or Builder.

Custom CSS tweaks take precedence over any other point-and-click styling changes you make from the Chameleon Builder directly. You can apply Custom CSS to your Themes or account Styling by editing your existing Themes. For each Theme, you can access two Custom CSS tabs:

Leverage Templates to quickly jumpstart building a new announcement for your most common use cases. These will appear when you create a new Experience (e.g., adding a new Tour Step or a new Microsurvey).

You can browse 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.

You can add different Templates to your Themes and ensure a cohesive style between your in-app announcements.

On the Styling page, you can also access the Chameleon Figma Components file that you can use to establish your Default Style or prepare any upcoming style changes before applying them to your Experiences.

You can also tweak the style of your Experiences from the Builder and find styling options for the same components:

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.