Create a Tour Using the Scratch Method

This documentation describes the process of creating a tour using the From Scratch method in the Tour module. The Scratch method allows users to create fully customized tooltips and guided tours using the Visual Editor. Users can design each tour step manually by adding layouts, headings, text, and other content elements based on their requirements.

The following steps explain how to create, configure, design, save, and publish a tour successfully

Create a Tour

After successfully logging in to the application, follow the steps below to create a tour.

Step 1: Navigate to the Tours Module

Go to the Tours module from the navigation menu.

Step 2: Click Create Tour

Click the Create Tour button.

Step 3: Enter Tour Details

A Create Tour popup window will open. Enter the required details:

• Tour Name
• Device
• Language

Step 4: Proceed to the Next Step

Click the Next button to continue with the tour creation process.

Screen- Add Tour Details

Screen- Method To Create Tour

Screen- Selection of Scratch Method

Step 6: Open the Visual Editor 

Select the From Scratch method. The user will be redirected to the Visual Editor, where the tooltip can be created and configured. To add a tooltip block,

•  click the + icon on the canvas 

or

•  click the Layout button.

Step 7:  Select Design Block

Select required design elements to the tooltip, such as:

• Heading

• Text

• Other content elements as needed.

Screen- Select Element

Step 8: Add/Edit Content

Add or edit the content on canvas or by clciking on inspect tab.

Screen-Add /Edit content

Step 9: Save the Tour

Click the Save button to save

Step 10: Configure Element ID and Placement Settings

Navigate to the Behaviour tab and configure the Element ID and related placement settings.

Note: Initialize the Element ID with the # symbol in the field box (for example, #login-button).

Step 11: Add Additional Tour Steps
Navigate to the footer section and click Add Another Step or Duplicate Step. Configure the new step by following the same process used for Step 1. Repeat as required to create additional tour steps.

Screen-Add Step

Step 12: Preview the Tour

Click the Preview button to review the tour and verify that all steps, content, and navigation behave as expected before publishing.

Screen- Preview Button Access

Step 13: Publish the Tour

Step 14: Review Before Going Live

Before making the tour live, review and configure the publishing settings:

Step 15: Publish the Tour

After verifying all settings, click the Publish button to make the tour live.

After successful publishing, the published tour will be visible in the Tour Dashboard List.

Screen-Added tour