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.
It's possible to create, edit, and manage Templates from two different places:
- When creating a new Step
- 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.
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.).
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.
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.
- Discover how to show the step progress to your users
- Understand the options for changing your Tours' style
- Learn how to use Custom CSS to style Tours
- Explore the different Delivery Methods