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.
Availability & Usage
🧑💼 Admins & Designers can update (if Roles are enabled)
Understanding Themes and Default Styling
What is a Default Theme?
Your Default Theme is the foundational styling that gets applied to all new Chameleon experiences you create. You'll create this Theme 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
Creating and Managing Multiple Themes
Multiple themes help you maintain consistent branding across different types of in-app announcements while allowing variation for specific use cases.
When you have multiple Themes, you can also pick a different Theme for a new Experience when building it:
Account Styling
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.
Themes
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.
💁 Tip: You can set as your Default Theme any Theme you create from the Themes tab on the Styling page.
Experience Custom CSS
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. This means your custom code will override visual changes made through the interface.
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:
Theme.css: Apply custom CSS to a specific theme only
Account.css: Apply custom CSS across your entire account styling
⚠️ Once you update the Theme's Custom CSS, it will apply immediately to all existing (live) Experiences.
❇️ 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.
Saved Templates
Saved Templates are pre-designed experience components that help you quickly create new announcements for common use cases. These templates maintain consistent styling and structure across your experiences.
Templates 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. 🎨
Chameleon Components Figma File
On the Styling page, you can also access the Chameleon Figma Components file that you can use to:
Establish your Default Theme styling before implementation
Plan upcoming style changes with your design team
Maintain design consistency between Figma mockups and live experiences
Individual Experience styling
You can also tweak the style of your Experiences from the Builder and find styling options for the same components:
Content style (title, body)
On-page Trigger icons
The Builder's color picker displays colors from your underlying web page, making matching your existing brand colors easy. You can also:
Enter specific HEX color codes
Save them to your palette for reuse
Create color consistency across experiences
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.