Developing Walkthrough guides

Walkthroughs provide contextual guidance directly within an application's flow. They can be single- or multi-step Guides that assist users through processes in a streamlined fashion, using rules and trigger logic to create a tour-like experience.

The image below exemplifies how employees view walkthrough steps when using the web application.

Accessing Adopt Editor for Walkthroughs

After creating a Walkthrough in Nexthink Applications, launch Adopt Editor using the installed Nexthink browser extension:

From Browser > Extensions:

1. Sign in as an administrator in the installed Nexthink browser extension.

2. Open the Nexthink browser extension, verify the Tenant, and select the target web Application.

3. Click the guide of interest to open Adopt Editor directly on the web application URL.

Understanding Adopt Editor for Walkthroughs

When you open a Walkthrough in Adopt Editor mode, the in-application interface displays as follows:

1. Move the Adopt Editor to the right side of the page, and vice versa if it is already on the right side.

2. Add a new step, or assign an action or decision.

3. Change the guide language to review and override guide content localized by Nexthink—AI generated.

4. Access the guide settings, where you can toggle context help.

5. Turn off the Adopt Editor, allowing you to preview the guide.

6. Guide steps are listed in numerical order, except for decisions.

7. Move the step up to rearrange the order.

8. Move the step down to rearrange the order.

9. Access the step properties to configure content, appearance, position and triggers.

10. Remove the step or make it optional.

11. Select multiple steps at once. You can configure position properties for all your selected steps.

Understanding steps, actions and decisions

Steps are the cornerstone of any guide, but Actions and Decisions allow you to add immersion and focus to your Walkthroughs.

Creating Walkthrough steps

After accessing Adopt Editor for Walkthroughs:

1. Create a new Step by selecting Add a Step or clicking the + icon.

   • Select Step from the drop-down menu, or use the keyboard shortcut Shift + A.

   • This activates the element picker, where you can choose an element on the page to associate with this Step.

   • Hover the cursor over your page and choose an element by clicking on it or using the Shift + S keyboard shortcut. This creates a step assigned to the chosen element.

   • Similarly, you can create a new Action or Decision.

1. Open the Step properties to access the property tabs: Content, Appearance, Positioning and Display. Use these tabs to:

   • Add text and content to Walkthroughs

   • Define Walkthrough appearance

   • Define Walkthrough positioning options

   • Define Walkthrough trigger options

Creating Actions

Use Actions to automatically perform certain actions for the employee. When associated with an element, they can be set to Click or Focus.

• Click interacts with the associated element. When an employee reaches this part of the Walkthrough, you can create a Click Action rather than instructing them to navigate to a different page or interact with an element.

• Focus switches the active focus to the associated element, provided it is a text input field, block of text, or a drop-down menu. You can create Focus Actions that bring important page elements to the employee's attention during a walkthrough.

Creating Decisions

Decisions allow you to change the sequential flow of a Walkthrough by setting conditions. When met, these conditions can be used to skip or return to certain steps or even change the circumstances under which employees can perform those steps.

When you create a Decision, you can define your conditions based on Element or Rule. If one is enabled, Adopt automatically disables the other to prevent conflicts.

Element conditions

Set conditions based on whether a selected element is visible or present on the page.

• Visible indicates the element can be seen on the page.

• Present indicates the element is rendered in the DOM.

You can optionally ignore key page selections and modify element locations by changing or deactivating selectors. The latter functions similarly to enabling or disabling element selector overrides from Nexthink applications.

Select which step the guide displays after confirming whether the selected element is present or not. As the asynchronous nature of web page element rendering can cause Decisions not to resolve properly, you can optionally add a delay, measured in seconds.

Adopt waits for the delay to end before checking if the conditions of the Decision are met.

Rule conditions

Set conditions based on guide engagement or occurrence. The available conditions are similar to those used for displaying Context help.

• Engagement conditions focus on customer interaction with the current guide or related guides.

• Occurrence conditions focus on the frequency of views or interactions with these guides.

You can define multiple conditions to achieve a more targeted or granular Decision. You can also optionally ignore key page selections.

Lastly, select which step the guide displays after confirming whether your defined conditions are true or false.