Timed Tools
This guide walks through Tourial's Timed Tools which allow you to automate portions of your interactive tours.
Last updated
Was this helpful?
This guide walks through Tourial's Timed Tools which allow you to automate portions of your interactive tours.
Last updated
Was this helpful?
Timed tools are a specialized set of tools in the Tourial builder that allow you to automate portions of your interactive tours. Got a complicated workflow that you need to show quickly? Need to add some motion and engagement to your tour to keep folks hooked? Timed tools are an awesome way to put portions of the tour on rails so that you can have your audience interacting with the most valuable Aha moments while breezing through in-between or "set-up" steps.
Timed Tooltip - Tooltips on a timer! Use these to add copy and context to a timed portion of your tour. Also very helpful to lay on top of video screens so that buyers can keep themselves hooked on your messaging (and so that they know there's more interactive demo beyond this video!)
Timed Mouse - Use these to emulate your mouse cursor moving from one part of the screen to another. Pick a "start" point and an "end" point and Tourial will animate the mouse cursor to help guide your prospects through this part of the demo.
Timed Typewriter - Add timed Typewriters when you want to show text entry in your demos. Great for showing conversational AI use cases, ChatBot entries, or searching for specific items in your product's search function.
🛑 Important: A screen can either have interactive or automated steps (but not both). We'll see what that looks like in the builder below.
To add an automated tool, select the icon in the left menu and it'll appear on your screen. We'll first add a timed tooltip in this example.
Automated tools are highlighted by orange throughout the builder. So the tool icons on the left have an orange dot next to them (unlike the interactive tools that have blue).
Once an automated tool is added to a screen, you'll notice the border of the screen also updates to orange in the storyboard. There's also a timed icon indicating that this is an automated screen.
Style your tooltip as normal and add your content.
Select the screen and you'll see a Timing tab. This is where you'll adjust when your tooltip appears and for how long.
☝️Let's see how we'd set up timing for a timed tooltip + a mouse cursor
After adding the mouse cursor tool to your screen, you'll see Cursor Style and Animation Settings in the right-hand menu.
Select your cursor shape, size, and color. You'll notice each automated tool will be numbered based on the order you added them.
So for this, the timed tooltip is 1 and the mouse cursor is 2.
With the screen activated, set the timing for each tool using the sliders.
☝️ Now we'll add a screen and use the automated typing effect tool
Select the auto typewriter icon and then add the text needed. For this, we're automating adding an email address to an account field.
Style your text as you normally would, then with the screen activated set the amount of time for your typing effect. For this, we'll set it to 1.5 seconds.
To preview these three automated tools altogether, select the Preview button.
If your tour is fully animated and there are no interactive screens, you can also set it to restart automatically under Settings.
Select the ⚙️ icon and under the Appearance tab toggle the Restart tour on complete to on.
Note on Step Counters
Timed screens in your tours are not counted in the tour Step Counter - the step counter is intended to function as a visual cue for how many actions the buyer must take to complete the demo. Since timed tools require no action from your audience, they are not included in the overall count for the step counter.
