Product Tours improve the onboarding experience by guiding first-time users through your platform's core features step-by-step. This guide covers the initial setup in Usetiful, from creating your first tour to configuring its behavior.


Create Your First Tour

After logging into your Usetiful account, navigate to the Tours section in the dashboard and click the + Add Tour button.

1. Add Interactive Steps

Once you have created your tour framework, you need to define the steps your users will see. Click Add Step in the left panel to begin. Usetiful offers two main categories of steps:


Manual Steps (User-Facing)

  • Modal: A centered window that overlays the entire page for major announcements.

  • Pointer: A targeted tooltip that points to a specific element on your page.

  • Slideout: A discreet window that appears in the corner of the screen without blocking content.

  • Survey: An interactive step used to collect user feedback during the tour.


Automatic Steps (Logic & Navigation)

  • Redirect: Automatically moves the user to a different URL to continue the flow.

  • Delay: Pauses the tour for a set duration before the next step appears.

  • Trigger Event: Fires a Javascript event or sends data to a webhook.

  • Page Action: Automates an action, such as clicking a button or filling a form field.

  • Condition: Creates a logic branch; if a condition is met, the tour continues—if not, it follows an alternative path.

Note: For a deep dive into these types, see our detailed guides on Manual Steps and Automatic Steps.


2. Configure Tour Settings

To ensure your tour reaches the right audience at the right time, click the Settings tab in the top navigation bar. Here, you can define your target audience, page triggers, and frequency. Learn more about targeting here.

  • Customization Tip: You can match your brand's aesthetic by using Themes. Learn how to customize your look and feel here.

  • Publishing: All new tours are saved as Drafts by default. Once you are satisfied with your steps and settings, click Save and then Publish to make the tour live.


 


3. Preview Your Tour

Before going live, it is essential to see how the tour behaves on your actual website. Use the Usetiful Browser Extension to preview your draft live.



Watch a quick video belpw on how to create a Product Tour: