Replace Boring Tooltips: AI-Guided Tours for User Onboarding

Tooltips are the participation trophies of user onboarding. They technically exist, but nobody feels better after encountering them. A small bubble pointing at a button saying "Click here to create a project" teaches nothing about why you would want to create a project in the first place.

Product tours should feel like having a knowledgeable colleague walk you through the product. hiroi's guided tour system does exactly that — AI-narrated, visually engaging walkthroughs that adapt to what the user is seeing, with no code required.

What Makes hiroi's Tours Different

AI Narration, Not Static Text

Traditional tour tools like Intercom Product Tours, WalkMe, and Pendo use static text bubbles. You write the copy in advance, and every user sees the same message regardless of context.

hiroi's tours are narrated by your AI agent. The narration is generated dynamically, which means:

• The AI can reference the actual content on the page, not just generic instructions
• Voice narration is available — the AI literally talks the user through each step
• The tone matches your configured agent's personality
• Questions during the tour get real answers, not "click Next to continue"

Spotlight Effects That Focus Attention

Each tour step can spotlight a specific element on the page using a box-shadow cutout technique. The rest of the page dims while the spotlighted element stays bright and visually prominent. This works reliably across complex layouts, nested containers, and CSS stacking contexts — problems that plague z-index-based approaches used by other tools.

The spotlight system supports:

• Primary spotlight with darkened backdrop on the target element
• Secondary highlights for related elements shown simultaneously
• Smooth transitions between steps as the spotlight moves across the page
• Automatic scroll to bring the spotlighted element into view

Click-Through Interaction

Tours are not just visual — they can require user interaction. A step can wait for the user to click a specific element before proceeding, turning the tour into a hands-on walkthrough rather than a passive slideshow.

Available step actions include:

• narrate — AI speaks or displays a message
• call_to_attention — spotlight an element with darkened backdrop
• navigate — move to a different page
• wait_for_click — pause until the user clicks a specific element
• click_element — automatically click something on their behalf
• highlight_text — highlight specific text in content areas
• scroll_to_position — scroll to a section of the page
• set_field_value — fill in a form field to demonstrate input
• wait — pause for a set duration between steps

Building Tours Without Code

The workflow builder is a visual recording tool. Here is how it works:

1. Open the builder from the Page Integration tab in your hiroi dashboard
2. The builder overlay loads on your target website in a new tab
3. Add steps using the visual editor — pick elements, configure actions, write narration
4. Pick elements by clicking on them directly on your page — no CSS selectors to write manually
5. Preview steps inline to verify they look right
6. Close the tab — the recording auto-saves and imports back into your dashboard

The builder handles the technical details. You focus on the story you want to tell about your product.

Editing Existing Tours

Already have a tour? The builder supports edit mode. It loads your existing steps, lets you reorder, modify, or add new ones, and saves the updated version back to your dashboard. No need to recreate from scratch when your UI changes.

How Tours Compare to Alternatives

The biggest differentiator is integration. With hiroi, tours are not a separate product — they are a capability of your AI agent. A visitor can ask "show me how this works" in chat, and the AI launches the relevant tour. No separate SDK, no additional script tag, no extra vendor relationship.

Real Examples

SaaS Onboarding

A project management tool uses hiroi's guided tours for new user onboarding:

1. Spotlight the "Create Project" button with narration explaining what projects are
2. Wait for the user to click it
3. Spotlight the project name field, AI explains naming conventions
4. Set a sample project name to demonstrate
5. Navigate to the project dashboard
6. Spotlight key features: task board, timeline, team members
7. Narrate next steps and offer to answer questions

The whole tour takes 90 seconds and replaces a 5-email drip sequence that most users never read.

Feature Announcements

Shipped a new feature? Instead of a changelog entry that 3% of users read, trigger a guided tour when users visit the relevant page:

• Spotlight the new feature
• AI narrates what it does and why it matters
• Walk through a quick demo
• Ask if the user has questions

Sales Demos

Embed the widget on your marketing site and let the AI give product demos on demand. A visitor clicks "See it in action" and the tour walks them through your product's key workflows with spotlight effects and narration. It is a self-serve demo that works at 2 AM on a Sunday.

Getting Started

1. Go to your hiroi dashboard and select an agent
2. Open the Page Integration tab
3. Scroll to Workflows & Demos
4. Click Add Workflow and open the builder
5. Record your tour steps visually
6. Trigger it by teaching your AI when to launch it (e.g., "show me around," "how does this work")

Tours integrate with your agent's existing capabilities. After the tour ends, the visitor can ask follow-up questions, and the AI responds with full context of what was just shown. That is the difference between a product tour and a product experience.