When creating new Experiences you have the option to start from a Template. You can use one of the existing Default Templates on your account (which will match your brand defaults) or you can create customized Templates.

Good use cases for Templates include:

  • Setting standard types of Experiences, for example:

    • Feature announcement modal

    • Tooltip to explain taxonomy

    • Hotspot to aid feature discovery

    • Alert banner

  • Adding design variations by use cases (e.g. event promotion slideout vs. feature announcement slideout)

  • If you are using Chameleon on multiple products and each has its own distinctive styling -- you can create separate Templates for each

Having a consistent pattern and placements for similar in-product Experiences will help you users become familiar with your UX and more quickly assess whether its something they want to pay attention to.

You can configure almost all the same design settings on a Template as you can on an actual Tour Step, except you can set any element-specific conditions. These will be set on the Step you create from the Template.

You will see the option to choose a Template when creating a new Tour Step, wherever that is.

A demo image showing the Top Bar of the Chameleon Builder, with a dropdown revealed after clicking on the New Step button showing available step templates

You can use any template as a basis for a step and then further edit the step (e.g. styles) and set step-specific configuration (e.g. URL, trigger element, position element etc.).

Managing templates

You can create, edit and manage your Templates from the Styling page in the Chameleon dashboard.

Templates are currently only available for Tours but we will be adding others soon.

You will see Default Templates

Default and Custom Templates

Chameleon offers a range of default Templates to give you ideas of how to use Chameleon. These are automatically added to your account, and leverage your default branding.

You can also create your own new templates (or copy and modify the defaults) in the same way as you would create individual Steps within the Chameleon Builder.

To save a Default Template into your Custom gallery, simply hover over it and click Copy to My Templates. It will then appear in the My Templates list, from where you can edit it.

You can also adjust the name and description of the template, and add a label (to help with categorization) by directly clicking into the fields within the My Templates section.

Editing templates

Creating templates is exactly like creating an individual Step. You can do this from the Builder after you click the Ellipsis menu from one of your Templates:

You will not be able to select any Elements on the page when editing a Template (e.g. to set a Position Anchored to Element) because this will be done on the actual Step you create from this Template.

You can use custom CSS for Templates just like you would for any Step; learn more here.

We are continuing to improve our Templates functionality; if you have any feedback on how we can improve templates or styling please let us know!


Did this answer your question?