Timed Tools
In addition to the interactive tools (tooltips, clickzones, hotspots), you can also add timed tools to your tour that are automated on a screen.
Automated Tools
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.
Adding automated tools
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.
Enabling the looping feature
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 Timed Tools
Timed Tools are great for adding in a little automation to your interactive demos, but note that when mixing timed screens and interactive (clickable) screens, it is possible to accidentally create "non-regression points" in your tours, or parts of the tour where the buyer can't rewind the tour.
This typically happens when you have a clickable step after your timed step. The buyer will attempt to hit the "back" button on a clickable screen, and then it will default to restarting that last timed step. To prevent non-regression areas on your tours, manually configure your "back" buttons to jump back to the most recent clickable steps before your timed steps. This will essentially teleport your buyers back to the most recent clickable screen and allow them to progress/rewind the tour as intended.
Last updated
