Product tours guide users through your application step by step, highlighting features and explaining how things work. This tutorial walks you through creating a simple 3-step tour using the Userorbit visual builder.
Step 1: Open the Tours module
- Log in to your Userorbit workspace and select your project.
- Click Tours in the left sidebar.
- Click New Tour in the top-right corner.
- Give your tour a name — something descriptive like "Welcome Tour" or "Dashboard Overview."
Step 2: Launch the visual builder
After naming your tour, click Edit Steps to open the visual builder. The builder loads your website in an embedded view so you can point and click to create tour steps directly on your live pages.
Make sure the Userorbit script is already installed on your site before using the builder. If it is not, the builder will prompt you to install it first.
Step 3: Create your first step
- In the visual builder, navigate to the page where you want the tour to begin.
- Click on the element you want to highlight — for example, a navigation menu item or a key button.
- A tooltip editor will appear. Enter the title and description for this step. For example: Title: "This is your dashboard" / Description: "Here you can see an overview of all your key metrics at a glance."
- Choose the tooltip position (top, bottom, left, or right) relative to the highlighted element.
- Click Save Step.
Step 4: Add two more steps
Repeat the process to add two more steps. Click Add Step, select an element, and fill in the details. For a "Welcome Tour," you might add:
- Step 2: Highlight the sidebar navigation. Title: "Navigate your workspace." Description: "Use the sidebar to access announcements, feedback, tours, and more."
- Step 3: Highlight a call-to-action button. Title: "Take your first action." Description: "Click here to get started with your first task."
You can reorder steps by dragging them in the step list on the left side of the builder.
Step 5: Configure tour settings
Before publishing, review your tour settings:
- Trigger — Decide when the tour starts. Options include on page load, after a delay, or when a user clicks a specific element.
- Audience — Target the tour to specific user segments. For a welcome tour, target new users who have not completed onboarding.
- Frequency — Choose whether the tour shows once per user, once per session, or every time the trigger condition is met. For onboarding tours, "once per user" is usually the right choice.
Step 6: Preview and publish
- Click Preview to walk through the tour yourself and verify that each step highlights the correct element and reads well.
- If everything looks good, click Publish.
Your tour is now live. Users who match the targeting criteria will see the tour the next time they visit your app.
Tips for effective tours
- Keep tours short — 3 to 5 steps is ideal. Longer tours have higher drop-off rates.
- Focus on one workflow per tour rather than trying to cover everything.
- Use clear, action-oriented language in each step.
- Check your tour on different screen sizes to make sure tooltips do not overlap or get cut off.