You may want to create and save standardized step types to reuse in multiple Tours. For example, you could create:

  • Feature announcement modal

  • Tooltip to explain taxonomy

  • Hotspot to aid feature discovery

  • Alert banner

You may wish to use something like this each time you launch a new feature or make a change to your interface. This will help users better recognize when there's something new to explore. 

To make this quicker, you can create and save a step template, which allows you to save a step's configuration -- such as color, size, position, components etc. -- and use that when creating a new step for a Tour. 

You can save a range of templates for different types of steps that you might want to use in your product experience.

Accessing templates

It's possible to create, edit, and manage Templates from two different places: 

  • When creating a new Step*

*You can also choose a template for each new Tour step directly from the top bar, rather than needing to open the side panel:

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

  • From the Styling section

Default and Custom Templates

Chameleon offers a range of default templates to give you ideas of how to use Chameleon. You can also keep a gallery of custom Templates that are adapted to your style -- these will be shown under the My Templates section when creating a new step.

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) via the Settings menu, available when you hover over any of the templates you have created. 

Note: If you change overall account styling, then it will also apply to templates.

Editing templates

Creating templates is exactly like creating an individual step. The only difference is that you cannot attach any elements from the page to a template (you can do this on the actual step, once you've created it from the template). 

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.). 

Custom styling

You can style templates using our simple point and click interface. You can edit the background color, button color, text color, corner radius, font, etc. 

👉 Explore the styling and customization options available

If you're looking to add custom CSS to a template, you can do so by clicking Settings while hovering over the Template. 

Custom CSS entered here will be applied to this Template and all steps created using the Template after the styling was applied. 

Note: You can also add custom CSS from the 'Account styling' section. Templates, Tours, and steps all have their own unique IDs that can be used to target them more specifically from the 'Account styling' custom CSS box. 

👉 Learn how you can use Custom CSS to style your Tours


Did this answer your question?