VisualNEO Web

Create interactive app tours or drive the user's focus across the page.

Based on:
https://shepherdjs.dev/

V 1.0

Guided website sample app (responsive):
https://visualneo.com/tutorials/neotour

Learn spanish body parts sample app (fixed size):
https://visualneo.com/tutorials/neotour2

Description

The neoTour plugin for VisualNEO Web enables developers to create guided tours within applications, allowing users to explore features step-by-step. This plugin is ideal for onboarding, tutorials, or introducing new features. Each tour step can be customized with descriptions, highlights, and even interactivity, making it a versatile tool for user guidance. Here’s an overview based on the sample code provided:

Initializing a Tour: The neoTourInitialize command sets up a new tour with options for unique naming and automatic progression.

• Command: neoTourInitialize
• Syntax: neoTourInitialize "tourName" autoStart nextBtnColor nextBtnText prevBtnColor prevBtnText finishBtnColor finishBtnText
• tourName: Unique name for the tour instance.
• autoStart: Set to true to start automatically, or false to trigger manually.
• nextBtnColor, nextBtnText: Customize the color and text for the "Next" button.
• prevBtnColor, prevBtnText: Customize the color and text for the "Previous" button.
• finishBtnColor, finishBtnText: Customize the "Finish" button appearance.

Example:

neoTourInitialize "mytour" true "" "" "" "" "" ""

This initializes a tour named "mytour" that starts automatically, with default button settings.

Adding Steps to the Tour

Each step is defined with a specific target, title, content, and optional positioning. The neoTourAddStep commands attach tour steps to objects within the app.

• Command: neoTourAddStep
• Syntax: neoTourAddStep "tourName" "targetObj" "stepTitle" "stepContent" nextBtnColor nextBtnText prevBtnColor prevBtnText position
• targetObj: ID of the object to highlight (leave empty to create a general step).
• stepTitle: Title text for the step.
• stepContent: Description or guidance for the step.
• position: Specifies tooltip position relative to the target (e.g., "auto").

Example:

neoTourAddStep "mytour" "ContainerMainMenu" "Main Menu" "This is the main menu where you will find easy access to each section." "" "" "" "" "auto"

This step highlights ContainerMainMenu with a description titled "Main Menu," positioned automatically.

Starting the Tour

The neoTourStart command begins the tour, guiding the user through each defined step.

• Command: neoTourStart
• Syntax: neoTourStart "tourName"

Example:

neoTourStart "mytour"

This command starts the tour instance named "mytour".

Sample Code Walkthrough

Using the sample code:

1. Initialize the tour (neoTourInitialize) with default button settings and automatic start.
2. Add First Step: Introduce the tour with a welcome message.
3. Add Additional Steps: Guide users through specific objects (ContainerMainMenu, PushButton1, Image1, etc.) and provide relevant instructions.
4. Final Step: End with a concluding message, thanking the user.

Practical Applications

The neoTour plugin is suitable for:

• New User Onboarding: Guide users through initial app setup or key features.
• Feature Introductions: Showcase new tools or functions within an existing app.
• Educational Walkthroughs: Provide step-by-step instructions for complex workflows.
  
  

With flexible customization for each step and control over tour flow, the neoTour plugin greatly enhances user experience by providing intuitive, interactive guidance within VisualNEO Web applications.

neoTourInitialize

neoTourAddFirstStep

neoTourAddStep

neoTourStart

neoTourBack

neoTourNext

neoTourCancel

neoTourComplete

neoTourHide

neoTourSetEvent

neoTourUnsetEvent

neoTourShowStep

neoTourShowStepNumber

neoTourGetCurrentStep

Created with the Personal Edition of HelpNDoc: Effortlessly Edit and Export Markdown Documents