Top
Create Walkthrough
  • 25 Aug 2023
  • 4 Minutes To Read
  • Dark
    Light
  • PDF

Create Walkthrough

  • Dark
    Light
  • PDF

Article Summary

Walkthroughs are sequential steps that guide your end users through a process.
You can create and configure your Walkthrough using the following steps:

Step 1: Create a Walkthrough project
Step 2: Connect your mobile app and capture the app screen
Step 3: Identify the screen
Step 4: Design the Walkthrough

Step 1: Create Walkthrough project

  1. On the Whatfix Mobile Dashboard, select the App in which you want to create a Walkthrough project.
    dashboard_select_app

  2. To create a new project, click New.
    new_project

  3. In the Onboarding & Training section, click Walkthrough.
    onboarding_walkthrough

  4. Enter a name for your project.
    project_name

  5. Enter the App Version or select the App Version using the dropdown.
    app_version

your title goes here
  • Use the latest version of your app to create Whatfix Mobile content. For more information on app version, see What is an App Version?.
  • Ensure that you add the correct app version from the app build that was integrated with the Whatfix Mobile SDK.
  1. Click Create.

    create_walkthrough

your title goes here

Your Walkthrough project gets created and you are redirected to the Whatfix Mobile Studio.
onboarding_tour_project

  1. To start creating your Walkthrough, click Add Flow Start.
    2022-12-08_17-36-03

Step 2: Connect your mobile app and capture the app screen

your title goes here

Use the New Screen Capture experience to simplify your app screen capture process. This is available only for SDK versions equal to or above the following versions:

Android: 1.9.0
iOS: 1.9.0
React Native (Android and iOS): 1.9.0
Xamarin (iOS): 1.6.0
Xamarin (Android): 1.6.2
Cordova (Android and iOS): 1.6.0
Capacitor: 1.4.0

For more information, see Capture app screens using New Screen Capture Experience.

You need to connect your mobile app to the Whatfix Mobile Studio before you can start creating your in-app experience. This can be done by scanning the QR code available on the Whatfix Mobile Studio using your mobile app integrated to Whatfix Mobile.

  1. Open your app integrated to Whatfix Mobile on your mobile phone and then enable the Creator mode.

  2. Navigate to the Whatfix Mobile Studio on your browser and scan the QR code using your mobile app.
    Mobile_screen

your title goes here
  • You can see the notification on your phone that your app is connected to the Walkthrough project.
  • You can navigate to any screen on your mobile app on which you want to create your Walkthrough.
  1. To capture the screen on which you want to create your Walkthrough, click Capture.
    capture_screen1

Step 3: Identify the screen

After capturing the screen, you need to identify the unique elements on the screen and tag the screen so that the in-app experience you create appears on the right page.

  1. To identify the unique elements on the screen and to tag the right screen, click Add Identifier
    add_identifier

  2. Click the desired element on the page.
    identifier_home

Example: If you want to start the Walkthrough on the Home screen, you can choose the title Home, which can uniquely identify the screen and show the element on the correct screen.

your title goes here

Click Add More to select more elements on the page, and then repeat step 2.
add_more_identifier

Step 4: Design the Walkthrough

You need to add a starting point for the Walkthrough from where your end users can start the Walkthrough and then be guided to the subsequent steps.

Use the following steps to design your Walkthrough:

  1. On the Whatfix Mobile Studio, navigate to the left and select Design.

    element_design

  2. Choose the element you want to add on the starting screen.
    2022-12-08_18-47-09

your title goes here

You can add a Popup, Bottom Sheet, or a Ping to start the Walkthrough

  1. If you're adding a Popup, choose the appropriate template.
    popup_template
your title goes here

The Popup template you choose appears on the Studio.

popup_template_studio

  1. Design the Popup as required. For more information see, Create a Pop-up.
your title goes here

If you're adding Bottom Sheet, see Customize Bottom Sheet

  1. You can configure the following options for your Walkthrough:
    walkthrough_options
  • Show the Pop-up in the Walkthrough in the language of your choice.
  • Auto Start: Enable the AUTO START toggle to start a Walkthrough without showing the start screen and automatically trigger the steps.
  • Icon: Enable the ICON toggle to enable your end users to start the Walkthrough using an icon. For more information, see Use Icons to start a Walkthrough.
  • Discovery Trigger: Define when the Walkthrough should start using the DISCOVERY TRIGGER, if you haven't enabled the AUTO START toggle. For more information, see Use the Discovery Trigger in Walkthrough.
  • Flow Termination: Select how to terminate your Flow using the FLOW TERMINATION dropdown. For more information, see Flow Termination to dismiss the Walkthrough.
  • Optional Steps: Define a step as optional by enabling the MARK STEP AS OPTIONAL toggle. For more information, see Define a step as optional.

The Start page of your Walkthrough is automatically saved.

  1. Click the Back icon.
    back_icon_walkthrough

  2. Click the ADD STEP tile.
    add_step

  3. To create the Walkthrough steps with other elements, connect your app, capture the screen, and identify the screen.

  4. Select the element you want to show and design the element as per your requirement.
    step_element

your title goes here

You can create a Popup, Tooltip, Fullscreen, Highlight, Bottom Sheet, or Gesture as elements in your Walkthrough step. For more information see,

  1. To enable your end user to navigate to the next step in the Walkthrough, select the STEP TRANSITION rules using the dropdown. For more information, see Define Step Transition rules.
    step_transition
your title goes here

The element you create is autosaved.

  1. Click the Back icon.
    back_step_walkthrough

  2. To add more steps in your Walkthrough, repeat Steps 7 to 11.

your title goes here

Was this article helpful?

Changing your password will log you out immediately. Use the new password to log back in.
First name must have atleast 2 characters. Numbers and special characters are not allowed.
Last name must have atleast 1 characters. Numbers and special characters are not allowed.
Enter a valid email
Enter a valid password
Your profile has been successfully updated.