You may want to create and save standardized Step types to reuse in multiple Tours. For example:
- 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 step 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.
To create, edit and manage Templates from two places:
(1) when creating a new Step
(2) from the Styling section.
To use a template, simply select the template when adding a new step to any tour. You will see the option of using a template, or alternatively starting with a 'Blank canvass' to create your step.
Default vs. Custom Templates
Chameleon offers a range of (changing) 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.
To save a Default Template into your Custom gallery, simply hover over it and click Copy. It will then appear in the Custom list, and you can edit it. If you change overall account styling, then it will also apply to templates.
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.
Creating templates is exactly like creating an individual step. The only different 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, then you can do so clicking 'Settings' while hovering over the Template row.
Custom CSS entered in this 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.
Have feedback on how we can improve this? Let us know by sending us a short message from the chat bubble on the bottom right!