Defining walkthrough Step

Creating walkthrough step

After creating a Walkthrough-type guide in Nexthink Applications and accessing the guide in Adopt Editor:

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. Refer to Using Element Selector in Adopt Editor for more information.

   • 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.

The Shift + S shortcut is useful when you cannot select an element with the cursor. For instance, when you select an element in a pop-up menu that is not visible when clicked.

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

   • Add text and content to walkthrough step

   • Define walkthrough step appearance

   • Define walkthrough step positioning options

   • Define walkthrough step trigger options

Adding text and content to walkthrough step

From the Adopt Editor left-side panel, access the Properties of a Step and open the Content tab to add the content visible and/or audible to employees using the guide.

Step content

• Write and format the text using the Tooltip content editor.

• Optionally, add images.

• Optionally, add links to relevant pages, images, audio or video.

Step sound

Add sounds to your guide step.

Defining walkthrough step appearance

From the Adopt Editor left-side panel, access the Properties of a Step and open the Appearance tab:

Buttons and actions

You can enable or disable predefined and extra buttons, determining which ones appear on the step.

• Enable the Next and Previous button to allow for navigation directly on the step.

• Enable extra buttons, which can be used to set up Action Buttons.

• Enable the close cross button, allowing users to exit a step without completing it.

Step appearance

• Enable the Step label, then specify the text that will appear before the step number in the Step counter at the bottom of the step. The Step counter must be enabled (see Controls and Indicators).

• Enable Close label, then specify the text for the close button. The Close action button must be enabled first (see Controls and Indicators).

Step interaction

• You can prevent users from interacting with page elements while the step is visible. This option applies to page elements surrounding the step or the entire page.

• You can also prevent users from scrolling through the page while the step is visible.

Shadow

This option allows the darkening or blurring of the page, except for the required element for step completion.

• Select the Type of the shadow:

  • Off (shadow turned off)

  • Transparent

  • Blurred background.

• If you enable the Shadow option, you can apply a gradual transition Animation instead of an instant visual effect.

Border

• Add a solid or gradient border to the UI element linked to the step. Select Off to remove the border.

• If you enable the Border option, you can apply a gradual transition Animation instead of an instant visual effect.

Controls and indicators

Display the action button that allows advancing through a step.

• Display the Close action button to allow users to close the step.

• Display a Step counter indicating how many steps users have completed.

• Display a counter showing the total number of steps in the Walkthrough.

• Enable step encapsulation, which places the step inside its own iframe. This prevents interfering with the overall page structure during rendering.

• Display Arrow, a tooltip pointer that visually connects the tooltip to its associated interface element.

Step Overlay

Define the overall appearance of your Step and how it renders on the page.

• Tooltip is the standard Step appearance, a box that displays relative to the assigned element.

• Smart Page is a larger box in the center of the screen, recommended for video content and large images.

• Notice is a broad box at the bottom of the page, similar to a notification.

• Hidden removes the Step from the user view. This option is recommended for transitions between Steps where users are navigated to the correct page. Refer to Defining Walkthrough positioning options for more information.

• Sidebar occupies the left side of the page, top to bottom. This option is recommended for .pdf files or large amounts of content.

Animation

• Step: Add a Fade, Zoom or no animation to the step as it appears or disappears.

• Element: When users reach or complete the step, add a Fade, Zoom, or no animation to the assigned element.

• If you enable a zoom animation on either of the options above, define the Zoom strength.

Defining walkthrough Step positioning options

From the Adopt Editor left-side panel, access the Properties of a Step and open the Position tab:

Step position

Selected step

Preview the element associated with the Step on the web application page. If needed, Reselect the element. Refer to the Using Element Selector in Adopt Editor documentation.

• If the system cannot display your preferred position due to space constraints, Adopt places it in the most suitable position in a clockwise direction.

Key pages

• Navigation lets you direct users to a specific page when they reach the Step. The Location URL pattern makes pages with dynamic addresses more stable for Guide purposes.

• Target Key pages by ticking Show matches and/or selecting a key page from the list. You may also use the Search bar to filter the results by name.

  • Predefined key pages allow you to associate the step with a dynamic URL still recognizable by Nexthink Infinity, for example: https://impl.workday.com/*/d/home.htmld

  • If you have no matching key pages, refer to the Key pages documentation for more information.

  • Ignore key page selection and define a static URL under Navigation if needed.

Element location

Optionally, enable or disable Element selectors—configured by default in Nexthink Infinity Adoption settings—to make them specific to this step.

• The Element XPath selector override can be localized to a different language, given that it targets a specific block of text.

When using Adopt Editor within an application with iframes, the Show matches option cannot display the matching key page for the iframe in which the target element resides.

In these cases, Reselect the target element to display the matching key page.

Enable position recalculation when the user scrolls

Enable position recalculation when the user scrolls in cases where you have multiple containers with scroll bars aside from the main page. Generally, Adopt attempts to scroll through the main page to reach a step's associated element. Enable this option and specify a container by its element ID to restrict the scrolling to that container.

Guide defaults

Enable or disable Guide defaults present in the Nexthink Adoption settings to make them specific to this step:

• Navigate to URL address when step is shown: Enable this setting to automatically navigate to the configured URL address when this step is visible to the user.

  • This setting cannot be enabled on the first step of a Walkthrough.

• Ignore recorded query parameters: When a step navigates to a specific URL that contains a query, for example http://google.com/?query, enable this setting to disregard the query, meaning everything after/?, and only use the base URL.

• Display step when element is not covered: Generally, Adopt displays steps even when the associated elements are being overlapped by a modal window or dialogue. Enable this setting to ensure the step only displays when the element is not being overlapped by other elements.

• Scroll to view element: Enable this setting to automatically scroll the page until the associated element is visible.

  • Center element when scrolling: Generally, Adopt attempts to scroll to an element in a way that respects page spacing. Enable this setting to attempt to center it relative to the page.

• Set custom offset for scroll to view element: The nature of certain web pages can cause scrolling calculation errors. Enable this setting and add a value in pixels to add that much additional distance to the scrolling. This offset is added to the direction Adopt is scrolling towards during a given step.

• Select an Orientation to determine the direction from which the step renders, based on the associated element's position.

  • Auto is the default setting. Steps render from the top unless the element is at the top of the page, in which case they render from the bottom.

  • Select top, right, bottom or left to specify a rendering direction.

Use the Orientation, Custom region and z-index options to define the Step position relative to the selected element.

Custom region

Defining a Custom region allows you to expand or reduce the highlighted area of an element when the relevant step is visible.

• Crop to content allows Adopt to attempt to define an area that contains only the relevant content of the element, such as a text label, rather than the entire element.

  • This setting may not function due to improper page formatting.

• Define directional Padding, in pixels, to shape the custom region to suit your needs.

Z-index

Select a Z-index source to determine the z-index origin point from which the Nexthink extension renders the step.

• Theme uses the Nexthink default z-index value of 73999.

• Element uses the associated element's z-index value, determined via page formatting.

• Manual allows you to define z-index values for the shadow and step. Ensure the step has at least an increment of 1 over the shadow for correct display.

Defining walkthrough Step trigger options

From the Adopt Editor left-side panel, access the Properties of a Step and open the Triggers tab:

Define when a Step is started

• Spot/Unspot triggers work for elements visible on the page, while Present/Unpresent refer to elements that exist but may not be visible on the page—set as hidden in the CSS, for example.

• Spot in viewport triggers the Step when the element is visible on the employee screen.

• Fill select/value and move on triggers the Step for interactions with input fields on the page, such as typing a word in a search bar or selecting an option from a dropdown.

• Element loses focus triggers the Step when clicking away from a focused page elements. For example, click away to disable typing from a search bar.

• Set a timer for the Step to appear after previous Step completion, measured in seconds.

• Define custom external commands to receive as a trigger for Step appearance.

• Define a list of other Guides, causing the Step to apear only when those Guides are completed.

You must create custom external commands in the Triggers tab of the previous Step configuration.

Define when a Step is completed

• When the user presses the Next button.

  • Optionally, add a Next or Done label.

• When the user presses the Previous button.

  • Optionally, add a Previous label.

• Spot/Unspot triggers work for elements visible on the page, while Present/Unpresent refer to elements that exist but may not be visible on the page—set as hidden in the CSS, for example.

• Spot in viewport triggers the Step when the element is visible on the employee screen.

• Fill select/value and move on triggers the Step for interactions with input fields on the page, such as typing a word in a search bar or selecting an option from a dropdown.

• Element loses focus triggers the Step when clicking away from a focused page elements. For example, click away to disable typing from a search bar.

• Set a timer for Adopt to end the Step, measured in seconds.

• Define custom external commands to receive as a trigger for Step completion.

• Define whether the Step sends a custom external command on completion, and create the command.

• Define whether a Step persists after completion:

  • On URL address change causes the Step to persist after the Guide navigates to another page.

  • On page reload causes the Step to persist after users refresh the page.

  • Going back in history causes the Step to persist after users return to a previous page.

  • Any option causes the Step to persist when any of the above criteria is met.