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, simply navigate to the Templates section on the bottom left of the nav, where you can create and edit your templates.
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.).
⚠️Note: changing account styling will not affect Default templates, which cannot be edited.
Custom CSS 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.
If you're looking to add custom CSS to a template, then you can do so from the 'Account styling' section, just as you would for any step or tour. Templates have their own unique ID (CSS selector) so you can apply styles to a specific template.
When a step is created from a template, the step will inherit this style, although you can override it with more specific custom CSS styling applied to that step.
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!