Timed Tools | Navless Product Documentation
Timed Tools in the Navless Tourial builder are automated features—including Timed Tooltip, Timed Mouse, and Timed Typewriter—that enable creators to automate parts of interactive tours by adding timed tooltips, animated mouse movements, and simulated text entry to enhance engagement and streamline complex workflows, with the restriction that screens can only contain either interactive or automated steps, and timing for these tools is configured via a dedicated Timing tab after adding them from the orange-highlighted automated tools menu.
What are Timed Tools?
Timed tools are a specialized set of tools in the Tourial builder that allow you to automate portions of your interactive tours. If you have a complicated workflow to show quickly or want to add motion and engagement to your tour, timed tools help put portions of the tour on rails. This lets your audience interact with the most valuable moments while breezing through in-between or setup steps.
Timed Tool Breakdown
- Timed Tooltip: Tooltips on a timer. Use these to add copy and context to a timed portion of your tour. They're also helpful for overlaying on video screens so buyers stay engaged with your messaging and know there's more interactive demo beyond the video.
- Timed Mouse: Emulate your mouse cursor moving from one part of the screen to another. Pick a start and end point, and Tourial will animate the mouse cursor to guide prospects through this part of the demo.
- Timed Typewriter: Add timed typewriters to show text entry in your demos. Great for demonstrating 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.
Adding Automated Tools
-
To add an automated tool, select the icon in the left menu and it will appear on your screen. For example, to add a timed tooltip:
- Automated tools are highlighted by orange throughout the builder. The tool icons on the left have an orange dot (unlike interactive tools, which have blue).
- Once an automated tool is added to a screen, the border of the screen updates to orange in the storyboard. There's also a timed icon indicating 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 adjust when your tooltip appears and for how long.
-
To set up timing for a timed tooltip and a mouse cursor:
- After adding the mouse cursor tool, you'll see Cursor Style and Animation Settings in the right-hand menu.
- Select your cursor shape, size, and color. Each automated tool is numbered based on the order you added them (e.g., timed tooltip is 1, mouse cursor is 2).
- With the screen activated, set the timing for each tool using the sliders.
-
To add an automated typing effect:
- Select the auto typewriter icon and add the needed text (e.g., 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.
- To preview these automated tools together, select the Preview button.
Enabling the Looping Feature
If your tour is fully animated and there are no interactive screens, you can set it to restart automatically under Settings:
- Select the ⚙️ icon and under the Appearance tab, toggle the "Restart tour on complete" option to on.
Note on Step Counters
Timed screens in your tours are not counted in the tour Step Counter. The step counter is intended 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.
Related
Tour Building Best Practices | Navless Product Documentation
The Navless Product Documentation outlines best practices for creating effective product tours by recommending concise, linear tours of 10-15 clicks with clear, action-oriented copy, consistent branding, minimal filler steps, and strategic embedding of "take a tour" CTAs to maximize user engagement, pipeline generation, deal acceleration, and onboarding efficiency.
Tour Engagement Data | Navless Product Documentation
After setting up the HubSpot Integration, Tourial engagement data—including detailed metrics like time spent, clicks, form interactions, and metadata such as Tourial name, URL, and visitor IDs—is sent via HubSpot cookies to populate contact record activity feeds, enabling users to create targeted lists, workflows, and reports based on visitor interactions with Tourials within HubSpot.
Building Tours with AI | Navless Product Documentation
The Navless product documentation introduces Tori, an AI-powered assistant that transforms approved tour plans into structured, interactive microtour storyboards by auto-generating screen recommendations and content, allowing users to easily customize and replace screens with branded media, capture product workflows, and efficiently prepare engaging, story-driven tours for marketing and sales purposes.
TrustRadius Integration Instructions
The instructions detail how to add an interactive Tourial demo to a TrustRadius product listing by logging into the TrustRadius Vendor Portal, editing the product listing to add a product demo, copying and adjusting the Tourial URL (removing "/pages" and updating the domain if white-labeled), entering a title and selecting "Interactive Demo" as the type, then saving or submitting the changes so the demo appears under the listing's Product Demos section.
Instant Scheduling with HubSpot Scheduler
The guide explains how to integrate HubSpot Scheduler with Tourial by connecting your HubSpot account, adding HubSpot Meeting Links, and then embedding these meeting schedulers as clickable CTA buttons either on individual Tour Pages or the Tour Center, enabling users to book meetings via a calendar popup, with a note that when embedded on external websites, the scheduler may open in a new tab which can affect analytics tracking.
Embedding Interactive Demos | Navless Product Documentation
The Navless product documentation provides detailed instructions and best practices for embedding interactive Tourial demos into websites either directly or as lightbox overlays, recommending a minimum embed size of 888 x 500px and an optimal size of 1080 x 607.5px to prevent tooltip overflow.