With Chameleon, it's easy to achieve a branded style and maintain consistency across the different types of in-app Experiences you create. Set Themes to help you define specific looks and create Templates to help you build an Experience without starting from scratch.
You can manage these in your Dashboard and easily pick a style Theme or a specific Template when building out new Experiences.
👉 Themes will soon roll out to all Chameleon accounts.
Availability & Usage
🔐 Available for all plans
📍 Ready to use in Tours, Tooltips, Embeddables, Microsurveys, Launchers
How do Themes and Templates work in Chameleon?
Themes enable you to create different styles and maintain visual consistency across all the different in-app Experiences you create. They define things like colors, font styles, iconography, and spacing across all elements linked to that theme.
They also make it easier to manage style tweaks or major style updates and incorporate Custom CSS or specific visual details without customizing each Tour or Launcher individually. You can create as many Themes as you want and pick between Themes when creating a new Experience.
ℹ Themes are applied at the account level or to specific Experiences, so any updates to a Theme propagate automatically to all Experiences and Templates using it.
Themes and Templates serve distinct but complementary roles in shaping the appearance and functionality of your Experiences, specifically for customizing, segmenting, and streamlining design across user touchpoints.
Templates allow you to create blueprints for specific types of Experiences and help create repeatable formats tailored to specific user flows, like a multi-Step Onboarding Tour or a new feature Announcement. Use Templates to define the layout and structure of various Experiences, including button or progress bar placement and copy.
ℹ Templates belong to Themes and maintain structural consistency across Experiences. You can have Templates that belong to specific Themes or that are "detached" from your Themes.
Creating Themes and Templates
Themes
When you create your Chameleon account, you can confirm your Default Theme, which is created with your app's colors.
👉 Existing Chameleon customers will not have a "Default Theme" created. You should start by creating a Default Theme first and then different variantions based on your needs.
You can find more customizations for your Theme on the Styling page or the option to create more Themes.
ℹ When you create a new Theme, you can pick an existing Theme to create a variation of it and not have to start from scratch every time for options like fonts, spacing, padding, etc.
Go deeper to ensure your Theme perfectly fits your brand style. From the Styling page, click on any Theme to see more options for fonts, colors, components, and Custom CSS. You can make adjustments, and once you're done, click "Save Changes". Your edits will apply to your Theme and to all the Experiences that use that Theme.
ℹ With each Theme, you can switch to the "Theme.css" or "Account.css" tabs to review or apply Custom CSS to a Theme or to your account. Those changes will be live right away and applied to your Theme and Experiences, respectively.
You can also create new Themes or apply them to Experiences from the Builder. On the right side of the Builder Topbar, you will see an indication of the Theme an Experience is using or if it's using a Template from a "Detached Theme".
If your Theme is "detached," you can create a new Theme based on the Experience you are building by clicking on the Builder Navbar. Add a name and optionally, a description to create a new Theme on your account.
From the Builder Topbar, you can also pick an existing Theme on your account and update the style of an Experience you are building.
ℹWhen building Experiences under a specific Theme, some configurations that refer to the style of the Experiences (e.g., canvas, button colors) will be locked as they are inherited from that Theme. To adjust the component's style, you must first detach the Experience from that Theme.
Only account Admins and Designers can make Theme or style adjustments. Account Creators can work with existing Themes and apply different ones while building Experiences.
👉 You can set any Theme on your account to be your Default Theme from the Themes tab on the Styling page.
Templates
On the Styling page, under Saved Templates, you'll find all the Templates on your account. You can also browse the "Templates Gallery" for inspiration and find other Templates that you can save to your account, or to create a new Template.
Here are a few Templates you can use right away:
a Welcome Tour to onboard users
a modal to allow users to schedule a meeting with your team
a Microsurvey to understand users' pain points
a Help Launcher with useful resources on how to use your product
When saving a Template from the Gallery, you can pick which Theme to add it to.
You can further customize the Templates that you create or pick from Chameleon's Gallery in the Builder. This works the same way as building individual Experiences. Once you're done, simply return to the Dashboard and find your Template in your account.
ℹ Almost any components you'll adjust using the Builder - such as Dismiss or Shroud will be saved and applied with each Template use. The exception is for Element Rules - which you'll set on the Step you create from the Template.
There are 3 ways you can create a Template in Chameleon:
from the Templates Gallery in the Dashboard
from the Builder
❶ Open the Templates Gallery, find the "Create New Template" button, and you'll be prompted to name it and specify a page to open the Builder and further adjust it.
❷ You can turn any Step into a Template from the Dashboard as you Build your Tour from the ellipsis menu. Use the 'Templatize' option to save your freshly configured Step on your account in the Templates Gallery.
❸ From the Builder, save any Step you're working on in your account with the 'Templatize' button. Create a Template with all the configurations you make and save some time in the process.
When you save a Template from the Gallery, it is marked with a "saved" icon in the Gallery, which helps you keep an easy overview of the different Templates you are using.
ℹ New Templates that you save from your Gallery will be added to your Default Theme. We will improve this to enable you to pick which Theme to include new Templates in. Now, you can create new Templates for a specific Theme by creating it in the Builder and using the "Templatize" option. This will save your Template under the specific Theme you were using when building the Experience.
Using Themes and Templates
Themes and Templates work together to help you achieve the perfect style anytime you create an Experience. Templates can belong to specific Themes, or they can be "detached" from your Themes. You can attach Templates to your Themes at any time.
Creating new Experiences
Whenever you create a new Experience on your account, it will be styled with your Default Theme. You can change the Theme from the dropdown in the "Build" panel.
Once you pick your Theme, you can go on by choosing a Template or start from a blank canvas. Next, you can open the Builder to continue building your Experience.
ℹ The Theme you pick dictates the Templates you can access while building out the Experience. If you change your Theme, you'll see an updated list of Templates that leverage that Theme. You can also access other Templates from your Themes and use those.
You can also use Templates from the Builder. Whenever you want to add a new Step, you'll find all your Templates in a list to choose from. Click to add one and customize it as usual (e.g., URL Rules, trigger element, position, etc.).
Updating live Experiences
Go to the Styling page to update the style for multiple Experiences at once. You can do this by making changes to a Theme and saving a new style that applies automatically to all Experiences and Templates using that Theme.
👉 You can quickly scan the Experience table to see what Theme each Experience is using.
Find the Theme to which the Experiences belong and click on it to make your adjustments. You can also review the Experiences that leverage a specific Theme by opening the Theme and clicking the dropdown next to the name.
Make your changes and preview how your changes reflect on specific Experiences or Templates, including Custom CSS tweaks, before applying them. You can switch the Experiences you want to preview from the top right dropdown.
When you save your changes, they will be applied to all Experiences that use this Theme. You can apply your style changes to other Experiences (drafted or live) by selecting them from the top left dropdown.
ℹ If you update a Theme and apply your changes to the same Experiences that leveraged it before, your changes will apply immediately. If you include new Experiences in your Theme update, you can pick to apply the style changes but don't push it live to users yet. This will apply your changes and move your Experiences into an "edited" state, requiring you to review before pushing those changes live to users.
Managing Templates
Find all Templates created on your account in the Saved Templates section on the Styling page. Here, you can:
apply different views to Templates
edit, delete, or duplicate Templates
add & edit Template Tags
sort Templates by Theme
You can switch between views to review your Templates or find specific styles.
🔻 The List View shows details about when and who created the Template on your account, as well as the purpose of the Template. You can select multiple Templates to copy or delete them.
🔻 The Card View allows you to find Templates at a glance and organize them. Use the ellipsis menu to edit, duplicate, or delete any Template. To edit, you will use the Builder just like you would edit a regular Tour Step, but all other management actions happen in the Dashboard.
🔻 The Big Card View enables you to spot different copy variations or specific details about your Templates. You have the same options to edit, duplicate, or delete any Template.
ℹ Use the same three "Views" in the Gallery, your "Saved Templates," or when building a new Experience to make browsing easier.