Reactour Sample

Content Type: Sample
Categories: User Interface

Overview

Create customizable guided tours to improve user onboarding and feature discovery, highlighting elements with dynamic tooltips and offering flexible navigation and styling options.

 

Features

  • Steps: Array of elements to highlight with special info

Example:

'[  {    "selector": ".custombutton1",    "content": "This is my custom button 1.Ok, lets start with the name of the Tour that is about to begin."  },  {    "selector": ".custombutton2",    "content": "This is my custom button 2"  },  {    "selector": ".custombutton3",    "content": "buttons test"   }]'

Selector: ClassName

Content: Content to be shown for that selector

  • Start Tour: To start the Tour.
  • Accent Color: Custom color for numbers and dots.
  • Close With Mask: Close the Tour by clicking the Mask
  • Disable Dot Navigation: The attribute to disable dots navigation
  • Disable Keyboard Navigation: The attribute to disable keyboard navigation.
  • Show buttons: Show/Hide Helper Navigation buttons
  • Show Close button: Show/Hide Helper Close button
  • Show Navigation: Show/Hide Helper Navigation Dots
  • Show Navigation Number: Show/Hide number when hovers on each Navigation Dot
  • Show Number: Show/Hide Helper Number Badge
  • Start At: Starting step when Tour is open the first time
  • Disable Focus Lock: Disable FocusLock component

Documentation

Create customizable guided tours to improve user onboarding and feature discovery, highlighting elements with dynamic tooltips and offering flexible navigation and styling options.

Dependencies:

•          Mendix modeler 9.12.4.

Features

  • Steps: Array of elements to highlight with special info

Example:

'[  {    "selector": ".custombutton1",    "content": "This is my custom button 1.Ok, lets start with the name of the Tour that is about to begin."  },  {    "selector": ".custombutton2",    "content": "This is my custom button 2"  },  {    "selector": ".custombutton3",    "content": "buttons test"   }]'

Selector: ClassName

Content: Content to be shown for that selector

  • Start Tour: To start the Tour.
  • Accent Color: Custom color for numbers and dots.
  • Close With Mask: Close the Tour by clicking the Mask
  • Disable Dot Navigation: The attribute to disable dots navigation
  • Disable Keyboard Navigation: The attribute to disable keyboard navigation.
  • Show buttons: Show/Hide Helper Navigation buttons
  • Show Close button: Show/Hide Helper Close button
  • Show Navigation: Show/Hide Helper Navigation Dots
  • Show Navigation Number: Show/Hide number when hovers on each Navigation Dot
  • Show Number: Show/Hide Helper Number Badge
  • Start At: Starting step when Tour is open the first time
  • Disable Focus Lock: Disable FocusLock component

 

Issues, suggestions and feature requests

https://github.com/bharathidas/Reactour/issues

Releases

Version: 1.0.0
Framework Version: 9.12.4
Release Notes: Create customizable guided tours to improve user onboarding and feature discovery, highlighting elements with dynamic tooltips and offering flexible navigation and styling options. **Dependencies**: • Mendix modeler 9.12.4. **Features** • Steps: Array of elements to highlight with special info **Example**: '[ { "**selector**": ".custombutton1", "**content**": "This is my custom button 1.Ok, lets start with the name of the Tour that is about to begin." }, { "**selector**": ".custombutton2", "**content**": "This is my custom button 2" }, { "**selector**": ".custombutton3", "**content**": "buttons test" } ]' **Selector**: ClassName **Content**: Content to be shown for that selector • **Start Tour**: To start the Tour. • **Accent Color**: Custom color for numbers and dots. • **Close With Mask**: Close the Tour by clicking the Mask • **Disable Dot Navigation**: The attribute to disable dots navigation • **Disable Keyboard Navigation**: The attribute to disable keyboard navigation. • **Show buttons**: Show/Hide Helper Navigation buttons • **Show Close button**: Show/Hide Helper Close button • **Show Navigation**: Show/Hide Helper Navigation Dots • **Show Navigation Number**: Show/Hide number when hovers on each Navigation Dot • **Show Number**: Show/Hide Helper Number Badge • **Start At**: Starting step when Tour is open the first time • **Disable Focus Lock**: Disable FocusLock component **Issues, suggestions and feature requests** https://github.com/bharathidas/Reactour/issues