What we'll build
Let's create our first product tour. We'll build a simple 3-step walkthrough that introduces users to a key feature — in this case, guiding them through creating their first project. By the end, you'll understand how the visual builder works and be ready to create tours of your own.
Step 1: Start a new tour
From the Userorbit dashboard, navigate to Tours in the left sidebar and click Create Tour. Give your tour a descriptive name — something like "Create your first project" — so you can find it later. Choose Tooltip as the tour type, since we want to anchor each step to a specific UI element.
After naming the tour, you'll land in the visual builder. This is where all the magic happens.
Step 2: Open the visual builder
The visual builder loads your application in a preview frame. You interact with your actual UI to place tour steps exactly where users will see them. Here's how to add our three steps:
Adding Step 1: Point to the "New Project" button
- Click Add Step in the builder toolbar.
- Hover over the "New Project" button in your app preview. A blue highlight will appear around it.
- Click the element to anchor the tooltip there.
- In the step editor panel, write a title like "Start here" and body text like "Click this button to create your first project."
- Leave the advance trigger set to Button click so users proceed at their own pace.
Adding Step 2: Highlight the project name field
- Click Add Step again.
- If the next screen isn't visible yet, use the builder's navigation to load the page where the project creation form appears.
- Click on the project name input field to anchor the tooltip.
- Add a title like "Name your project" and body text like "Give it a clear name so your team can find it easily."
Adding Step 3: Point to the save button
- Add one more step and anchor it to the Save or Create button.
- Write a title like "Save and go" with body text like "Hit save to create your project. You're all set!"
- Mark this as the final step — the builder will automatically show a "Done" button instead of "Next."
Step 3: Preview and publish
Before publishing, let's make sure everything feels right:
- Click Preview in the top-right corner of the builder. This launches the tour as your users will experience it.
- Walk through each step. Check that tooltips point to the correct elements, the text is clear, and the flow feels natural.
- If anything needs adjusting, close the preview and click on any step to edit it. You can drag steps to reorder them or delete a step and re-add it.
When you're satisfied, click Publish. Your tour is now live.
What happens next
By default, the tour will appear to all users who visit the page where Step 1 is anchored. You can refine this later by adding targeting rules (such as showing the tour only to new users) or adjusting display frequency so returning users aren't shown the tour repeatedly.
You've just built your first tour. From here, experiment with different tour types like modals and slideouts, add branching logic, or connect tour completion to checklists so users can track their onboarding progress.