# Defining walkthrough Step

### Creating walkthrough step

After [creating a Walkthrough-type guide](https://docs.nexthink.com/platform/user-guide/adopt/guide-creation-and-management-from-nexthink-applications/creating-guides) in Nexthink Applications and [accessing the guide in Adopt Editor](https://docs.nexthink.com/platform/user-guide/adopt/guide-content-development-from-in-app-adopt-editor/..#accessing-specific-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](https://docs.nexthink.com/platform/user-guide/adopt/guide-content-development-from-in-app-adopt-editor/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.

<figure><img src="https://268444917-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxJSUDk9NTtCHYPG5EWs3%2Fuploads%2Fgit-blob-6f3de1365a5cd4e7b199e5515a8a6a6e101de974%2Fstep_creation.png?alt=media" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
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.
{% endhint %}

2. 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](#adding-text-and-content-to-walkthrough-step)
   * [Define walkthrough step appearance](#defining-walkthrough-step-appearance)
   * [Define walkthrough step positioning options](#defining-walkthrough-step-positioning-options)
   * [Define walkthrough step trigger options](#defining-walkthrough-step-trigger-options)

<figure><img src="https://268444917-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxJSUDk9NTtCHYPG5EWs3%2Fuploads%2Fgit-blob-782b39276977b292bd3eff149dfb7c9eb3dba5cc%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

## Adding text and content to walkthrough step

From the [Adopt Editor left-side panel](https://docs.nexthink.com/platform/user-guide/adopt/guide-content-development-from-in-app-adopt-editor/developing-walkthrough-guides/..#understanding-adopt-editor-for-walkthroughs), access the **Properties** of a Step and open the **Content** tab to add the content visible and/or audible to employees using the guide.

<figure><img src="https://268444917-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxJSUDk9NTtCHYPG5EWs3%2Fuploads%2Fy4CEPupwwbeHQrflu1qI%2Fimage.png?alt=media&#x26;token=48c2507c-ee3d-46f1-bc60-e22fa7cf170c" alt=""><figcaption></figcaption></figure>

### Step content

* Write and format the text using the **Tooltip content** editor.
* Optionally, add images, from an URL or the [Asset library](https://docs.nexthink.com/platform/user-guide/adopt/guide-creation-and-management-from-nexthink-applications/managing-adoption-assets-with-the-asset-library).
* 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,](https://docs.nexthink.com/platform/user-guide/adopt/guide-content-development-from-in-app-adopt-editor/developing-walkthrough-guides/..#understanding-adopt-editor-for-walkthroughs) access the **Properties** of a Step and open the **Appearance** tab:

<figure><img src="https://268444917-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxJSUDk9NTtCHYPG5EWs3%2Fuploads%2F54vV3UEIn6o5y5GjMNfF%2FWalkthrough_step_appearance_050120261445.jpg?alt=media&#x26;token=b5c44a6a-1785-4283-916c-84c20963de1e" alt=""><figcaption></figcaption></figure>

<details>

<summary>Buttons and actions</summary>

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**](https://docs.nexthink.com/platform/user-guide/adopt/guide-content-development-from-in-app-adopt-editor/developing-walkthrough-guides/defining-walkthrough-step/configuring-actions-buttons-within-a-walkthrough-step).
* Enable the **close cross button**, allowing users to exit a step without completing it.

</details>

<details>

<summary>Step appearance</summary>

* 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](#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](#controls-and-indicators)).

</details>

<details>

<summary>Step interaction</summary>

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

</details>

<details>

<summary>Shadow</summary>

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.

</details>

<details>

<summary>Border</summary>

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

</details>

<details>

<summary>Controls and indicators</summary>

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.

</details>

<details>

<summary>Step Overlay</summary>

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](https://docs.nexthink.com/platform/user-guide/adopt/guide-content-development-from-in-app-adopt-editor/developing-walkthrough-guides/broken-reference) 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.

</details>

<details>

<summary>Animation</summary>

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

</details>

## Defining walkthrough Step positioning options

From the[ Adopt Editor left-side panel,](https://docs.nexthink.com/platform/user-guide/adopt/guide-content-development-from-in-app-adopt-editor/developing-walkthrough-guides/..#understanding-adopt-editor-for-walkthroughs) access the **Properties** of a Step and open the **Position** tab:

<figure><img src="https://268444917-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxJSUDk9NTtCHYPG5EWs3%2Fuploads%2Fgit-blob-6306b83c7f7dc583415eee12ed8ba79a24893df3%2FPosition%20tab.png?alt=media" alt=""><figcaption></figcaption></figure>

### **Step position**

<details>

<summary>Selected step</summary>

**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](https://docs.nexthink.com/platform/user-guide/adopt/guide-content-development-from-in-app-adopt-editor/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.

</details>

<details>

<summary>Key pages</summary>

* **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 lis&#x74;**.** 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](https://docs.nexthink.com/platform/user-guide/applications/configuring-applications/configuring-web-applications/key-pages) documentation for more information.
  * **Ignore key page selection** and define a static URL under **Navigation** if needed.

</details>

<details>

<summary>Element location</summary>

Optionally, enable or disable **Element selectors**—[configured by default in Nexthink Infinity Adoption settings](https://docs.nexthink.com/platform/user-guide/guide-creation-and-management-from-nexthink-applications/configuring-adoption-settings#defining-element-selectors)—to make them specific to this step.

* The **Element XPath** selector override can be [localized](https://docs.nexthink.com/platform/user-guide/guide-creation-and-management-from-nexthink-applications/creating-guides#localizing-content) to a different language, given that it targets a specific block of text.

{% hint style="warning" %}
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.
{% endhint %}

</details>

<details>

<summary>Enable position recalculation when the user scrolls</summary>

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

</details>

<details>

<summary>Guide defaults</summary>

Enable or disable **Guide defaults** present in the [Nexthink Adoption settings](https://docs.nexthink.com/platform/user-guide/guide-creation-and-management-from-nexthink-applications/configuring-adoption-settings#setting-guide-defaults) 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.

{% hint style="info" %}
Use the **Orientation**, **Custom region** and **z-index** options to define the Step position relative to the selected element.
{% endhint %}

</details>

### **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.

<figure><img src="https://268444917-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxJSUDk9NTtCHYPG5EWs3%2Fuploads%2Fgit-blob-5232671768184c8367347136bdce83e5399c6b4f%2Fz-index.png?alt=media" alt=""><figcaption></figcaption></figure>

## Defining walkthrough Step trigger options

From the [Adopt Editor left-side panel](https://docs.nexthink.com/platform/user-guide/adopt/guide-content-development-from-in-app-adopt-editor/developing-walkthrough-guides/..#understanding-adopt-editor-for-walkthroughs), access the **Properties** of a Step and open the **Triggers** tab:

<figure><img src="https://268444917-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxJSUDk9NTtCHYPG5EWs3%2Fuploads%2Fgit-blob-b438546d4da38abdc03f8ca5ccc8ca6f39e1ab17%2Ftriggers.png?alt=media" alt=""><figcaption></figcaption></figure>

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

{% hint style="info" %}
You must create custom external commands in the **Triggers** tab of the previous Step configuration.
{% endhint %}

### Define **when a Step is completed**

* When the user presses the **Next** butto&#x6E;**.**
  * Optionally, add a **Next** or **Done** label.
* When the user presses the **Previous** butto&#x6E;**.**
  * 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.