Product tour template for SaaS onboarding
Interactive product tour template for SaaS onboarding. A guided walkthrough overlay with a semi transparent full screen backdrop, a spotlight box highlighting a specific UI element, and a tooltip showing a step counter, progress dots, a title, a description, Back and Next buttons, and a Skip tour link. The spotlight slides to the next element as the user moves through the tour. Paste it into Claude Code, Replit, Lovable, ChatGPT Codex, Bolt, or Cursor.
About this vibe coding template
Interactive product tour template for SaaS onboarding and new user activation. A guided walkthrough overlay for orienting new users to the product interface without sending them to a help article. The overlay has three layers: a semi transparent full screen backdrop that dims everything except the spotlight target, a spotlight box positioned over a specific UI element, and a tooltip positioned near the spotlight box. The backdrop uses a subtle blur on the content behind it. The spotlight box has a soft border glow and an inset ring to mark the highlighted element. The tooltip shows a step counter in monospaced type, a row of progress dots with the active dot filled, a step title, a two sentence description of the element and what to do with it, Back and Next navigation buttons, and a Skip tour link for users who would sooner get straight to the product. The spotlight slides to its next target when the user clicks Next, so the eye follows the tour from one element to the next. The tooltip is positioned near the spotlight target so it stays close to the element being described. This product tour template shows step 3 of a five step sequence, so it demonstrates both the mid tour navigation state and the progress dot indicator. Use it as the product tour or guided walkthrough for any SaaS app, developer tool, or onboarding flow where new users need to be shown where the key actions live. Paste it into Claude Code, Replit, Lovable, ChatGPT Codex, Bolt, or Cursor and replace the step count, step titles and descriptions, and spotlight target positions with your own tour sequence.
Common questions about this template
What does this product tour template include?
A full screen semi transparent backdrop with a subtle blur, a spotlight box positioned over a specific UI element with a soft border glow, and a tooltip with a monospaced step counter, progress dots, a title, a description, Back and Next navigation buttons, and a Skip tour link.
How does the spotlight work?
The spotlight box is a fixed position element positioned over a target UI element using top, left, width, and height values. Everything outside the spotlight is dimmed, so attention lands on one element at a time. The spotlight slides smoothly to the next target when the user clicks Next.
How do the progress dots work?
A row of dots below the step counter shows one dot per step in the tour. The active step dot is filled with ink. The inactive dots are muted. The total number of dots tells the user how long the tour is at a glance.
How is this product tour different from the activation checklist?
The product tour overlay is a guided walkthrough that directs attention to specific UI elements one at a time with a spotlight and tooltip. The activation checklist is a panel listing the tasks a team needs to complete to configure the workspace. Use the product tour to orient a new user in the interface. Use the activation checklist to drive workspace setup to completion.
Which tools work with this product tour template?
Claude Code, Replit, Lovable, ChatGPT Codex, Bolt, and Cursor. Paste it in and replace the step count, titles and descriptions, and spotlight target positions with your own tour sequence.
Use this AI coding template for
- ·Product tour template for SaaS onboarding and new user activation
- ·Guided walkthrough overlay with spotlight and tooltip for SaaS apps
- ·Interactive product tour with step dots, back and next for a developer tool
- ·Vibe coding product tour template
Works with every vibe coding tool
More onboarding templates
View allMore vibe coding saas templates
View allOther templates you might like