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

Image without caption

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".
Image without caption
  • Next, open the properties of any element and scroll down to the bottom, there you will see a field called β€œID attribute”
Image without caption
  • 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.
Image without caption

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

Image without caption

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.

Image without caption

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.
Image without caption
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:
Image without caption
  • now you can change the background color of the tour window:
Image without caption
Update 25/03/24 - version 2.29.0
  • Next step and end tour events added
Update 29/03/24 - version 2.30.0
  • Buttons customization added
Update 08/05/24 - version 2.31.0
  • New fields "Popover Header Color" and "Popover Background Color

Demo to preview the settings