15min

Walkthrough and Onboarding Tour Plugin

Introduction

Quickly add a walk-through tour for onboarding your users. Highlight elements in order and display information popups.

Prerequisites

In order to use this plugin, it is required for ID Attribute of an element to be exposed.

This is very useful for using in various plugins or custom HTML/JS snippets of code.

Getting Started

1. Install Walkthrough and Onboarding Tour Plugin in your application

Document image



2. Expose element ID in your application

  • First, navigate to the app Settings -> General tab, and tick the checkbox next to "Expose the option to add an ID attribute to HTML elements".
Document image



  • Next, open the properties of any element and scroll down to the bottom, there you will see a field called “ID attribute”
Document image



  • You're all set, and you can use any static or dynamic values there.

3. Place plugin's Tour element on the editor page

This way you'll get access to plugin's actions in workflow tab to create your tour.

Document image

4. Set an ID attribute to each element (Container group, Input Form input, Visual Element text, etc) you want to reference in your tour

Document image

5. In your workflows, use the Walkthrough Tour element's "Add Step" action to add all the steps you want to add, in order. You probably want to do this under a "Page is loaded" event.

Document image



6. Use the Walkthrough Tour element's "Start Tour" action to start the tour.

Note: The Start Tour action should not be placed in the same workflow event as the Add Step Tour actions.

Document image

See demo example page for reference.

Changelogs

Update 06/04/21 "Fixed bug with button functionality"

  • Fixed bug with 'Inspect' button

Update 2/08/21 (Version 2.17.0) "Added ability to disable the "Done" button and group Tour background color"

  • now you are able to hide/show the "Done" button via this checkbox:
Document image
  • now you can change the background color of the tour window:
Document image

Demo to preview the settings