How to create a product tour with Eyelet.

A product tour shows your customer how to use the product and its features.

Eyelet product tour has 3 elements. These are called guides

1. Splash screen
2. Tooltip
3. Hint

let’s start

How to create a product tour? #

Step 1 – Log in to the app #

Log in to app.eyelet.io

Select Product tours on your left side

Now click on the New Tour button in the top right corner. It will take you to your app or website.

Step 2 – Add tour elements #

Now you will see a small window appear in the top right corner. This is an eyelet widget that you have installed already.

Click on the Plus + button to get started

Now you will see three elements to choose from

How to add a splash screen in the eyelet product tour? #

Step 3 – Select a Splash screen #

Select Splash Screen and click on Add splash screen. It will look like this.

Step 4 – Customize the Splash screen #

Now you can customize it by changing its content

You can add GIFs, videos, and images on the splash screen

You can change the title and description

You can rename Button to your desired CTA

Step 5 – Add more elements #

Once done with a splash screen

You can add other elements by clicking on the plus button.

Once you are done with the tour, you can simply click Finish and give it a name to save.

How to add a tooltip in the eyelet product tour? #

Step 6 – Add a tooltip #

Select the Tooltip and click attach Tooltip

Click on the screen to attach the tooltip

Step 7 – Customize the tooltip #

Now you can customize the tooltip

Choose a tooltip from templates

Change its content by adding GIFs, images, or videos.

Give it a title and description

Add visual effects to make it more prominent

Rename the button to your desired CTA

You can also enable a skip button

Finally, you can position the tooltip relative to its target

How to add Hints in the Eyelet product tour? #

Step 8 – Add a Hint #

Select hint and click attach hint

Click on the screen to attach a hint

Customize its content by adding GIFs, Images, or videos

Give it a title and description

Change its visual effect to make it more prominent

Define the actions for buttons and rename them to your desired CTA

Finally, you can position Hint relative to its target

Step 9 – Save the Product tour #

Once you are done. Click on Finish and give it a name.

Click on Save and Finish Now you will be redirected to your app. You can see the product tour you have created in your dashboard.

How to trigger a product tour in Eyelet? #

Step 10 – Start your tour #

Now select the Product tour and Click on Edit tour

You can choose the logic and it will save automatically.

Based on this logic it will trigger every time.
Read more about the product tour start logic here