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 under Themes, as well as create more Themes.
👉 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 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, access your Templates, or review and adjust Custom CSS on your account.
👉 For each Theme, you can adjust fonts, padding, colors, or Custom CSS.
Themes
Access your Default Theme or create new Themes on your account to ensure 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.
Templates
Templates are pre-designed styles for common use cases that help maintain consistent styling and component configurations (e.g, Dismiss type, CTA position, etc.). All your Templates are available when you create a new Experience in the Dashboard or Builder (e.g., adding a new Tour Step or a new Microsurvey).
You can browse the "Template Gallery" to save Templates on your account or create your own. This works the same way as creating Experiences with the Builder.
CSS Overrides
On the CSS Overrides tab, you can review and edit any Custom CSS that's been directly applied to individual 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.
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 it easy to match your existing brand colors. 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:
