# Creating a guided product tour

> This tutorial demonstrates how to create a guided product tour, as part of the digital adoption attended scenario. This scenario is focused on increasing user productivity, experience, and optimize products in general. This tutorial, in particular, shows how to create a guided tour for the Wikipedia website.

This tutorial demonstrates how to create a guided product tour, as part of the digital adoption attended scenario. This scenario is focused on increasing user productivity, experience, and optimize products in general. This tutorial, in particular, shows how to create a guided tour for the Wikipedia website.

The steps below show an overview on how to build a guided tour for the Wikipedia website:

1. Create a separate workflow for showing the callouts (**show callout.xaml**). In this workflow you should loop through every step and display it inside the callout. To make the tour experience accurate, configure [Advanced Logic](https://docs.uipath.com/activities/other/latest/user-guide/forms-advanced-logic) on form components. This way you can, for example, disable the **Back** button when showing the first step of the tour.

   ![docs image](https://dev-assets.cms.uipath.com/assets/images/studio/standalone-docs-image-214758-45a89797.webp)

2. Create multiple trigger workflows for possible user actions inside the callout, such as:
   1. When user clicks **Next** (**click next.xaml**)
   2. When user clicks **Back** (**click back.xaml**)
   3. When user clicks **Skip** (**click skip.xaml**)
   4. When user clicks **Finish** (**click finish.xaml**)You can achieve this using the [Form trigger activity](https://docs.uipath.com/activities/other/latest/user-guide/form-trigger-activity).

   ![docs image](https://dev-assets.cms.uipath.com/assets/images/studio/standalone-docs-image-214566-feb3e4a9.webp)

3. In the **Main** workflow, show a form that welcomes the user and asks if it's ready to start the tour. You can achieve this by building a **Form** file, and then displaying it using the [Show Form](https://docs.uipath.com/activities/other/latest/user-guide/show-form-activity) activity (**welcome.uiform**).
4. Create a CSV file that holds all the UI (user interface) elements and the corresponding steps used inside the tour. Separate the information in two columns:
   1. **Selector** - the value of the UI element. You can get the value of a UI element using .

   ![docs image](https://dev-assets.cms.uipath.com/assets/images/studio/standalone-docs-image-214514-6acb7303.webp)

   2. **Message** - the message that you want to indicate next to the UI element.
5. Read the CSV file created at step 2 and save it to a global variable. You can achieve this by using the **Read CSV** activity and the **Data Manager** panel to create the global variable.
6. To display the number of steps left to complete inside each callout, save the number of steps inside a global variable.
7. When you open the Wikipedia website, invoke **show.callout.xaml** , and run all local triggers in parallel. This allows you to show the callout for each step, based on the actions a user takes inside a callout.

   ![docs image](https://dev-assets.cms.uipath.com/assets/images/studio/standalone-docs-image-214750-e5dc5325.webp)

## Video example

Check out the video below that walks you through designing the sample workflow and then testing it.

  <iframe
    src="https://documentationexamplerepo.blob.core.windows.net/examples/Forms/contact_center_automation_result.mp4"
    title="Accelerate building automations with UiPath Integration Service"
    style={{
      position: "absolute",
      top: 0,
      left: 0,
      width: "100%",
      height: "100%",
      border: 0,
    }}
    loading="lazy"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    referrerPolicy="strict-origin-when-cross-origin"
    allowFullScreen
  ></iframe>