Onboarding Guides

About

Onboarding Guides helps to guide new & first-time users to understand the process & the various options available when they using the Mobile App. The onboarding card supports media content which allows solution developers or trainers to embed content in an easy-to-consume fashion.

Mobile Users are shown the Onboarding guides when they come across a mobile page for the first time
Onboarding Guides are optional & can be configured
- The content within the Onboarding Guide can be predefined or even be configured to read data from a context
Users can explicitly invoke an onboarding flow via a workflow action.

Technical details:

If a user is using a mobile device logged in with their credentials on Zinier app sees an Onboarding flow once then they will not see it again even if they logout of the app and login using the same credentials. This state is maintained locally by the Mobile app and it is cleared when the application is uninstalled.
If the solution developer increases the version number then onboarding flow will be shown automatically to this app user for that configured page after the updated page definition is fetched successfully.
Onboarding flow content supports dynamic values of different keys in it.

Example

For a technician, when a new Task Type is introduced, Onboarding Flow can be used to explain information available on the mobile page & also the various Workflow Actions.
For existing implementations, Onboarding Flow can be used to simplify the Start Travel & Check-in experience.

Guard Rails & Limitations

Maximum 2 lines of text is supported for title in the body.
Maximum 1 line of text is supported for the title in header.
There is no limitation on the number of characters for the description text, however we advice to stay below 500 words in order for an optimal user experience.
Video URL from the private AWS S3 bucket are not supported.
Only HTTPS URL of image or video are supported (A public HTTPS video URL which is able to play successfully in the Safari web browser on Mac will be able to play in the onboarding flow on iPhone or iPad app).

Configuration

The onboarding guide can be configured using the mobile page builder in Studio Z.

Required fields are denoted with *

Key	Description	Value Type	Accepted Values
*`onBoardingHelp`	It contains all the data required to show onboarding flow.	JSON object	It should contain all the required values.Please refer to the sample JSON.
*`recver`	This is the record version used to decide if the app needs to show the onboarding flow. If it is shown once to the user and solution developer wants to show it again then they need to increase this value by 1.	Positive Integer	Value should always be a positive integer i.e. 1 or higher.
*`header`	Used to configure the header on the onboarding flow screen	JSON object	Header should contain title.
*`title` in header	Configure the text to be shown in header of onboarding flow.	String	Localized string to be shown to user as header title.
*`body`	It contains an array defining all the values of each card in the onboarding flow.	JSON array	This JSON array will have a number of JSON objects. Each having the following properties: media, title and description
*`media` in each JSON object of the body array	A video or image file can be configured to be shown on each card.	JSON object	Each media JSON object should contain: type, url and thumbnailURL
*`type` in the media JSON object	Used to identify what type of media needs to be shown.	String	Only one of the following value is supported: photo or video
*`url` in the media JSON object	Used to load and display the media in a card	Valid direct HTTPS URL of an image or video.	Only direct image or video URL is supported. Indirect links like of a youtube video is not supported. Supported media files: Image: PNG or JPEG Video: MP4 For a video please check if it is able to play successfully in Safari web browser on Mac.
*`thumbnailURL` in media JSON object	A Thumbnail image is shown when a user has not requested to play video in onboarding.	Valid direct HTTPS URL of an image	Required and used only when type is video.
*`title` in each JSON object of body JSON array	Title text appears below the media.	String	Maximum 2 lines of text can be shown.
*`description` in each JSON object of body JSON array.	Text description appears below the title.	String	Supports following HTML tags for formatting: Anchor for external hyperlink which opens in any other app like web browser on the device. Underline

Sample JSON

Onboarding flow sample JSON object which needs to be added in the page definition:

CODE

    "onBoardingHelp": {
      "recver": 1,
      "header": {
        "title": "Check-in help"
      },
      "body": [
        {
          "media": {
            "type": "photo",
            "thumbnailURL": "",
            "url": "@pageContext.toolsPhoto"
          },
          "title": "Tools selection",
          "description": "Tap on the link to view the process of <a href='https://www.zinier.com/help/how-to/tools-selection'>tools selection</a>"
        },
        {
          "media": {
            "type": "video",
            "thumbnailURL": "@pageContext.startTravelThumbnail",
            "url": "@pageContext.startTravelVideo"
          },
          "title": "Start travel",
          "description": "Tap on the link to view the process of how to <a href='https://www.zinier.com/help/how-to/start-travel'>start travel</a>"
        },
        {
          "media": {
            "type": "photo",
            "thumbnailURL": "",
            "url": "@pageContext.endTravelPhoto"
          },
          "title": "End travel",
          "description": "Tap on the link to view the process of how to <a href='https://www.zinier.com/help/how-to/end-travel'>end travel</a>"
        },
        {
          "media": {
            "type": "video",
            "thumbnailURL": "@pageContext.checkInThumbnail",
            "url": "@pageContext.checkInVideo"
          },
          "title": "Check in",
          "description": "Tap on the link to view the process of how to <a href='https://www.zinier.com/help/how-to/check-in'>check in</a>"
        }
      ]
    }

Workflow action JSON sample

Add the item of onboarding flow to the list JSON array in the rightButton of the header on the page definition:

CODE

{
   "image": "https://s3-us-west-2.amazonaws.com/zinier-static/workflow-images/con-spanner-screwdrive.png",
   "name": "Show OnBoarding",
   "id": "pageWorkflowID",
   "type": "onboardingFlow",
   "enabled": true
}

Sample page definition with onboarding flow configured:

CODE

{
  "instance_nav": false,
    "footer": {
      //Footer content
    },
    "header": {
      //Header content
      "rightButton": {
        // Right button content
        "list": [
          //Note: the workflow action menu list item mentioned above can be added here.
        ]
      }
    },
    "id": "mobileTaskDetailsPage",
    "title": "Task Details",
    "onBoardingHelp": {
      "recver": 1,
      "header": {
        "title": "Check-in help"
      },
      "body": [
        {
          "media": {
            "type": "photo",
            "thumbnailURL": "",
            "url": "@pageContext.toolsPhoto"
          },
          "title": "Tools selection",
          "description": "Tap on the link to view the process of <a href='https://www.zinier.com/help/how-to/tools-selection'>tools selection</a>"
        },
        {
          "media": {
            "type": "video",
            "thumbnailURL": "@pageContext.startTravelThumbnail",
            "url": "@pageContext.startTravelVideo"
          },
          "title": "Start travel",
          "description": "Tap on the link to view the process of how to <a href='https://www.zinier.com/help/how-to/start-travel'>start travel</a>"
        },
        {
          "media": {
            "type": "photo",
            "thumbnailURL": "",
            "url": "@pageContext.endTravelPhoto"
          },
          "title": "End travel",
          "description": "Tap on the link to view the process of how to <a href='https://www.zinier.com/help/how-to/end-travel'>end travel</a>"
        },
        {
          "media": {
            "type": "video",
            "thumbnailURL": "@pageContext.checkInThumbnail",
            "url": "@pageContext.checkInVideo"
          },
          "title": "Check in",
          "description": "Tap on the link to view the process of how to <a href='https://www.zinier.com/help/how-to/check-in'>check in</a>"
        }
      ]
    },
    "cols": [
      //cols content
      ]
  }