How to create Product Tour?

Create an interactive product tour for your users by using modals, tooltips, hotspots.

Video tutorial

A product tour or walkthough typically consists of a series of steps that guide users through the features and functionality of a product. Each step of the tour can contain various elements, such as text descriptions, images, videos, and interactive elements such as Buttons, Modals, Tooltips, Hotspots. The purpose of a product tour is to help users quickly understand and learn how to use the product effectively.

Before start building, you'll need to install Userlove Google Chrome Extension

1. Log in to your Userlove account and click on "Tour" from the left sidebar menu.

1. Click on the "Create new tour" button, then enter a descriptive name for your tour.

1. You can select Sandbox (For testing) or Custom Domain

2. Enter the Build URL. Build URL is a page link from where you want to start building your tour.

3. Enable wild card if you want to publish on all subdomain.

4. Click on "Submit" button.

1. Next you will be redirected to Build URL and it'll automatically open Userlove chrome extension If you already installed Userlove Google Chrome Extension. If you still not download extension it'll ask you to download extension.
2. Once the Userlove Chrome extension loads, you can select a tour element such as Modal, Tooltips, and Hotspots.

1. Once you select element type (ie: Modal, Tooltip, Hotspot ) you can select pre-made template to quick start or you can start from scratch.

1. Selected template will be shown to website. Click on "Settings" icon to open settings menu.

1. Once the settings menu is opened, you can make changes to the design of the template (e.g., position, color, element positions, add new blocks, etc.).

1. To create step click on "Add new step" button.

1. After creating product tour or walkthrough click on "Publish" button it will redirect to Target page where you can set your target audience .

10. Once target audience is selected click on "Continue" button.

1. Finally you can review and publish or save in draft .

Note: Make sure that, you have install Userlove JavaScript code snippet in your application / website

By following these steps, you can easily create a product tour using Userlove and provide a guided experience to your users.