# Nexthink Adopt (classic)

## Overview&#x20;

Successfully deploying an application goes beyond the initial rollout. Even with perfect execution, challenges can arise if employees do not engage with the application, struggle with tasks, or encounter performance issues. Traditional support methods often fail to address these problems effectively. Organizations need a solution that provides greater control and visibility into how an employee interacts with web applications to ensure seamless adoption and optimal performance of enterprise applications like HCM, ERP, ITSM, and CRM. &#x20;

**Nexthink Adopt** offers this solution by enabling organizations to monitor employee interactions with their software and provide real-time, in-app guidance. By overlaying applications with Nexthink Adopt, organizations can deliver exceptional user experiences, simplify software adoption, and maximize their applications' potential.&#x20;

<figure><img src="/files/IZI9co7gpozPo4moGGAb" alt=""><figcaption></figcaption></figure>

Nexthink Adopt empowers organizations to take control of their application deployments, ensuring success by improving data quality, boosting productivity, and enhancing user satisfaction. This digital adoption solution helps overcome application limitations and is crucial in driving effective usage across the organization.

## Capabilities

### In-application Guidance

The nature of enterprise software involves frequent updates and new feature releases. Communicating these updates to users, collecting feedback, and encouraging adoption can be an ongoing challenge. On-demand content and pop-up communications can guide your employees to value faster, helping build application knowledge, keeping them up to date, and ensuring your business gets the most out of its software investments.

<figure><img src="/files/k5Onq72KzNreCBHOcY59" alt=""><figcaption></figcaption></figure>

### Core Analytics &#x20;

Maximizing software adoption can be challenging, especially when users have to switch between multiple applications and deal with their different interface. Users lose confidence, administrative burden increases, and adoption rates begin to decline. Through monitoring how users interact with your in-app guidance, you can quickly identify where isupport may be needed. Using this data to target your adoption efforts means you can deploy guidance where it will have the greatest impact. &#x20;

### Advanced Analytics

Advanced Analytics adds the capabilities for customers to understand how users are interacting with technology. \[DW1] \[AS2] Our powerful machine learning and analytics capabilities mean you can pre-empt adoption challenges and deploy the relevant support before issues occur.&#x20;

<figure><img src="/files/hhndzudkr1QK98zQAXBN" alt=""><figcaption></figcaption></figure>

#### Experience Mining

Many organizations know they have a digital adoption problem. The trouble is that they cannot identify the areas within their digital landscape that are causing the problem. This results in misinformed and often ineffective fixes. Not only are your digital experience teams wasting time creating support content that’s not needed, but they are potentially adding to digital friction. Deploying Adopt in ‘Experience Mining mode’ alleviates this issue and pinpoints your adoption problems. See exactly where users spend their time, take too long on tasks, or appear to be stuck, all before configuring any support material. So, rather than peppering applications with random help and guidance, you can proactively place support where it will have the greatest impact. 

## Key benefits

* Solve every application challenge with DEX-backed digital adoption solution
* Make digital transformation efforts a success with proven AI-driven predictive analytics and insights
* Demonstrate ROI on application investments with control over end-to-end application success
* Boost user productivity with contextual in-app guidance
* Reduce errors and process inefficiencies with moment in time support
* Expert guidance from a Center of Excellence of digital adoption experts


# Getting started with Adopt


# Understanding Adopt Modes

There are three Adopt modes:&#x20;

1. [Editor](#adopt-editor)
2. [Agent ](#adopt-agent)
3. [Management Console](#adopt-management-console)

## **Adopt Editor**

**Adopt Editor** can only be accessed by authorized editors. You can create, edit, manage, or delete the contextual and visual guides that aid your users or visitors to navigate throughout all business application processes.

<figure><img src="/files/4xV7JjtX1x2lyiRljzgv" alt=""><figcaption></figcaption></figure>

***Note:** As you can see above, Adopt conveniently locates the toolbar either on the left or right side of your application screen. Adopt automatically provides a preview of the steps as you click on the steps. However, you can only preview the **Context Help** and the **hot-spot** type of widgets in Agent mode. Turn off the Adopt Editor to switch to Agent mode.*

## Adopt Agent

The **Adopt Agent** mode is where the created guides will be visible to anyone who visits your application: it is the view that your users and visitors will see. Users and visitors are not able to edit any guide or its steps, so if changes are required, content editors should open the Adopt Editor mode by clicking on the Adopt Chrome Extension Icon.

<figure><img src="/files/vNswlZfKBAZJZaJIUZTj" alt=""><figcaption></figcaption></figure>

***Note:** Agent mode is where the Adopt widget (a question mark by default) is visible in your application.*

## Adopt Management Console

This is the management console where administrators can see and manage how Adopt works.&#x20;

In the console, you can: \
• Manage Adopt users \
• Holistically view and manage guides \
• Define the Context Help options \
• Change various settings \
&#x20;  o localization and language settings \
&#x20;  o integration settings \
&#x20;  o visual settings (themes) \
• See analytical reports \
• Track the user behavior \
• Display the digital adoption performance

<figure><img src="/files/h7PMyq76tzq2fCFDXoOC" alt=""><figcaption></figcaption></figure>


# Understanding Overlay Types

Overlays are a graphical user interface (GUI) element of interaction, such as a button or a pop-up bubble. \
Adopt empowers you to use these Overlays to navigate a user or a visitor throughout the application where they can get or edit information.

## Context help

Context Help is always available and easily accessible in the Agent mode to all users or visitors. They can use the Context Help widget anytime they need any help/guidance by clicking on the Context Help widget. \
***Note:** By default, the Context Help icon is a question mark, but if you wish to customize and change the appearance, for example to your company logo, contact us for details.*

Context Help consists of:

1. A search bar
2. Journey Tracker
3. List of available Tours

<figure><img src="/files/FO8c961rHu1KOFWnpfLK" alt=""><figcaption></figcaption></figure>

## Journey Tracker

The Journey Tracker shows progress across multiple guides. You can set up the Journey Tracker to be embedded in the Context Help widget, or you can keep it as a separate widget right beside the Context Help.

<figure><img src="/files/dbnFofKRvRuS5syc8xTq" alt=""><figcaption></figcaption></figure>

## Notice

This widget is designed to inform the user or the visitor in the form of a tip without interruption. It attracts users’ attention to notify them and to highlight some elements without putting the background into shadow. The tip widget does not require the user to take any action and can be set up to be closed automatically after a couple of seconds. You can provide text which will be displayed on the bottom of the screen wherever the widget is created. This is a brilliant way to boost user awareness and can also be used to create a good first impression without interrupting them.

<figure><img src="/files/n7q7M5ubA35eH9KzMfJk" alt=""><figcaption></figcaption></figure>

***Note:** It is not possible to set a preferred position for the tip widget. Depending on the theme you have chosen, the tip can be displayed in different parts of the application; however, the default and the most usual position is at the bottom of the application screen.*

## Sidebar

This widget is like the tip; however, it will always be displayed vertically either on the left or on the right side of the application screen. You can use the Sideout widget to provide a sizable chunk of text or a customized picture.

<figure><img src="/files/S7TheBUo15SoghydBhmw" alt=""><figcaption></figcaption></figure>

***Note:** It is not possible to set a preferred position for sideout, and depending on the theme the sideout widget will always be positioned either on the left or the right side of the application screen.*&#x20;

***Note:** A use case of sideout can be when the step is related to the element that covers most of the screen and there is no space available for the bubble. In that case, sideout is used.*

## Smart Page

Unlike the other widgets, a Smart Page is not positioned based on the selected element. Instead, it's always displayed in the centre of the screen while blurring the background. We recommend using this as a welcome screen for new users or highlighting news/changes in the application.

<figure><img src="/files/cOwW8R9ks8Qi5hLLS3EC" alt=""><figcaption></figcaption></figure>

## Tooltip

A **Tooltip** is usually a small window associated with an element in your application. It draws the user’s attention and describes the element's purpose. It is displayed when the user hovers the mouse cursor over the object or clicks on an element.&#x20;

Tooltips are helpful for new users because they enable the users to learn about each icon or object via basic interaction with the app.

The tooltip is fully customizable, as the layout and visual style can be changed. It may stay on the screen only until users or visitors interact with it. Like most of the other widgets, by default, the Tooltip shows the step title, a brief description, step counter (like step 1 of 12), and action buttons (next or previous).

<figure><img src="/files/CgbMiqowXYRY6v05yKDK" alt=""><figcaption></figcaption></figure>


# Accessing the Adopt Management Console

The Nexthink Support team grants access to Nexthink Adopt. If you are the first user of Nexthink Adopt, your login credentials will be sent to you before you log in for the first time.

## Adding more users&#x20;

Nexthink Support Team grants access to all Adopt users.&#x20;

1. Reach out to the Support team and specify the need for access.
2. The Support team will verify your access request with the main administrator of Nexthink Adopt in your organization and send you the login credentials.&#x20;

<figure><img src="/files/Ie04wNxK3Jt7IJZ7PBHj" alt=""><figcaption></figcaption></figure>


# Navigating the Management Console

Adopt Management Console allows editors to view and manage content assigned to their SaaS applications. This documentation will introduce you to the basics of the Adopt Management Console including how to manage content whilst also walking you through the key area objectives.

## Navigating between Spaces

After logging in, select the Space you want to work in.&#x20;

***Note:** Best practice is to create Spaces based on the customer application and environment. Within the advanced configuration, application url(s) are assigned to ensure that any DAP guidance is applied only to the correct Space. Within an organization, Spaces can be divided into deployment types such as Production & UAT, enabling administrators to move content across their spaces for testing or deployment purposes.*

<figure><img src="/files/ILfDMX5ojx0NAKolKu8S" alt=""><figcaption></figcaption></figure>

## Navigating through the Guides Administration page

Guides are where all your Tours, Tooltips and Playlists are available for you to either manage existing guides or create new content for your users. This is the default work area within a Space. Content can be filtered using the Search bar, whilst key information such as the publishing status can be viewed for each guide.&#x20;

<figure><img src="/files/sKZVWaxkCcAuH9P8rsFk" alt=""><figcaption></figcaption></figure>


# In-application Guidance


# Creating and managing Guides

Guides are how you deliver Tour, Tooltips or Playlist content to your end users. This document will introduce you to the basics of Guide Management including how to create and manage content by walking you through the following:

## **Document Sections**

\
Click any of the below links to jump to that section of the document.

1. [Creating a Guide](/in-application-guidance/creating-and-managing-guides/creating-a-new-guide)
2. [Editing an existing Guide](/in-application-guidance/creating-and-managing-guides/editing-or-deleting-an-existing-guide)
3. [Configuring Guide Settings](/in-application-guidance/creating-and-managing-guides/configuring-guide-settings)
4. [How to Duplicate a Guide](/in-application-guidance/creating-and-managing-guides/duplicating-guides)
5. [View Rules](/in-application-guidance/creating-and-managing-guides/viewing-rules-applied-to-the-guide)
6. [Understanding Indicator Icons](/in-application-guidance/creating-and-managing-guides/understanding-indicator-icons)


# Creating a new Guide

Sign in to the Adopt Management Console with your credentials

1. Click on the name of the Space you want to work on
2. Click Guides from the menu pane on the left
3. Click **Create Guide** in the top right corner of the screen&#x20;

You will be given options to choose from.&#x20;

• Tour&#x20;

• Tooltips&#x20;

• Playlists

<figure><img src="/files/tAY3ZM6y1cWZ35Vjapyd" alt=""><figcaption></figcaption></figure>

## **Guide Settings**

The process for configuring a Tour, Tooltip or Playlist guide is the same. In this example we will use a Tour.

1. From the Create Guide button, select **Tour**
2. Name the Guide
3. Provide an initial URL&#x20;

***Note:** This URL will be used to navigate to the application where you can start modifying your guide in **editor mode**. We recommend you add a brief description for your future reference. This will come in handy to keep track of the guides as you add more to cover all the journeys that a user might take in your application.*

4. Once you have filled the information in, click **Create**

<figure><img src="/files/PmnMD43AWVoKV6tpWfQq" alt=""><figcaption></figcaption></figure>

The created guide will now sit here:

<figure><img src="/files/FfW6fwbIXx4ppOWVgXsX" alt=""><figcaption></figcaption></figure>

Now that you have created a new guide, either repeat the process to create other guides for different parts of your application or add steps to the guide and define its parameters. Click **Open in Editor** and you will be redirected to the Adopt Editor where you can modify your guide with many personalization settings provided.

<figure><img src="/files/3cXOeUdQiVi7TfXywiW0" alt=""><figcaption></figcaption></figure>

***Note:** At this stage, newly created guides do not have any steps, meaning the guide does not yet know where to start or what the next step is.*


# Editing or deleting an existing Guide

## **Editing a guide**

1. From the Guides page, click **Edit** on the guide you want to amend

<figure><img src="/files/RsYS5dDZzKUJoZJa6hpq" alt=""><figcaption></figcaption></figure>

Here you can:&#x20;

• Rename a guide, \
• Change the initial URL that you are navigated to when you open the Editor \
• Add or change the guide description&#x20;

***Note:** We recommend you provide a brief description of the guides as they will be easier to track.*

<figure><img src="/files/FnJbVPbTIxKrzhn767eY" alt=""><figcaption></figcaption></figure>

• Under the **Rules** tab, define rules to be applied to the guides, which will be shown to either the visitors or the users of your application \
*Info For further details , refer to the Getting Started - **Guide Rules** module* \
• Under the **General** tab, turn Unpublished Mode on or off. All new guides are automatically set as Unpublished.

<figure><img src="/files/W835xkL0EIeh63J1jHjg" alt=""><figcaption></figcaption></figure>

The following options are available when clicking on the **Ellipsis (…)**

<figure><img src="/files/yTwRNplZff60fHFkUQey" alt=""><figcaption></figcaption></figure>

## **Deleting a guide**

1. From the Guides page, click **Delete** on the guide you want to remove
2. In the popup box, confirm the request by clicking the **Delete** button

<figure><img src="/files/p6POwhgKgd9UMYDV8k6I" alt=""><figcaption></figcaption></figure>

***Note:** You can stop the guide’s deletion by selecting **Cancel** in the popup box. Once a guide is deleted, there is no way to restore it, so take care when choosing which guides you want to remove.*


# Configuring Guide settings

The process for configuring a Tour, Tooltip or Playlist guide is the same in this example we will use a Tour.

1. From the Create Guide button, select **Tour**
2. Name the Guide
3. Provide an initial URL

***Note:** This URL will be used to navigate to the application where you can start modifying your guide in editor mode. We recommend you add a brief description for your future reference. This will come in handy to keep track of the guides as you add more to cover all the journeys that a user might take in your application.*

4. Once you have filled the information in, click **Create**

<figure><img src="/files/XiRz0l3sadPnH67WnNgy" alt=""><figcaption></figcaption></figure>

The created guide will now sit here:

<figure><img src="/files/rM9FDkcuDflDf28mzkz8" alt=""><figcaption></figcaption></figure>

Now that you have created a new guide, either repeat the process to create other guides for different parts of your application or add steps to the guide and define its parameters. Click Open in Editor and you will be redirected to the Adopt Editor where you can modify your guide with many personalization settings provided.

<figure><img src="/files/patuAEkRRRo0SJPvf0Ng" alt=""><figcaption></figcaption></figure>

***Note:** At this stage, newly created guides do not have any steps, meaning the guide does not yet know where to start or what the next step is.*


# Duplicating Guides

From the **Ellipsis (…)** dropdown, click the **Duplicate** guide option

<figure><img src="/files/fv3giePpAClZ7H1wuOnC" alt=""><figcaption></figcaption></figure>

***Note:** The copied guide will have – Copy after the name. This way, you can distinguish the copied guide from the original*

<figure><img src="/files/TZPFjtmYeNuakb9FVPhm" alt=""><figcaption></figcaption></figure>


# Viewing rules applied to the Guide

Click the **Show configuration** option from the Ellipses dropdown, then select the **Rules** tab to see the applied rules in the guide.

<figure><img src="/files/9molzf8DJwKmI6Dbmn14" alt=""><figcaption></figcaption></figure>


# &#x20;Understanding Indicator Icons

Indicator Icons indicate which features have been enabled for a particular guide.

<figure><img src="/files/ANKkkfHKm7koza1hTWdn" alt=""><figcaption></figcaption></figure>

These icons are **Tour, Playlist, Tooltips, Unpublished, Context, Journey** and **Capture**.

1. **Tour, Playlists, Tooltips** This icon indicates the guide type .
2. **Unpublished** This icon indicates that the guide is in Unpublished mode, meaning all the changes are not visible to application users while it is being edited.
3. **Context** This icon indicates that the guide is visible in the Context Help for end users
4. **Journey** This icon indicates that the Journey Tracker feature is turned on. The Journey Tracker shows the user’s progress across the application, including multiple guides.
5. **Capture** This icon indicates that the guide is a saved collection of steps and text that has been taken from within an application.


# Creating and managing Tooltips

Tooltips can be applied to any field, button or element on a page. Tooltips are triggered via a hint icon, meaning that users must interact with the icon in order to see the Tooltip. This means that Tooltips aren’t as disruptive on the screen, but users know that help is there if needed.&#x20;

Tooltips are managed in 3 key areas:

1. Adopt Management Console – How new Tooltip guides are created, or existing ones are managed
2. Tooltip Editor – Can be launched from any Tooltip guide within the Management Console. This is where the creation of Tooltips is performed within the application
3. Tooltip Guide Settings - how you can control the targeting and global display settings&#x20;


# Launching Tooltip editor and creating a tooltip

Access any new or existing Tooltips within the Guide view, highlight the required Tooltip Guide (Guide types are distinguished indicator icons) and click **Open in Editor.** You will now be redirected to the Adopt Editor where you can modify your configuration within the assigned application.

<figure><img src="/files/Pe3KfkOiMS3M8ZHrIJgL" alt=""><figcaption></figcaption></figure>

## **Tooltip Editor**

When you open Tooltips in Editor mode, the In-Application Editor appears. Below you can see how this will appear on-screen.

<figure><img src="/files/qWDkP78VMfdOM0lrf1Sc" alt=""><figcaption></figcaption></figure>


# Adding text and content to the Tooltip

## Properties: Content

From the Editor, access the **Properties** of a Tooltip, then click the **Content** tab. Below are some of the key features:

<figure><img src="/files/mc4TugrXmG2F73eZHCoZ" alt=""><figcaption></figcaption></figure>


# Defining Tooltip appearance

From the Editor, access the **Properties** of a Tooltip, then click the **Appearance** tab. Below are some of the key features:

<figure><img src="/files/g5kdoKUXfbkkIrXJwlrP" alt=""><figcaption></figcaption></figure>


# Defining tooltip positioning options

From the Editor, access the **Properties** of a Tooltip, then click the **Position** tab. Below are some of the key features:

<figure><img src="/files/UWMK5Flxx9Rsuu7YuQma" alt=""><figcaption></figcaption></figure>


# Defining Hint display and trigger options

From the Editor, access the **Properties** of a Tooltip, then click the **Hint** tab. Below are some of the key features:

<figure><img src="/files/2mCuWiR4QY0HeDdDJQJp" alt=""><figcaption></figcaption></figure>

## Trigger: Start and Completion

Triggers can be used to control how Tooltip hints are displayed to end users, below is a table of the most common use cases.

<figure><img src="/files/jCXMUrYSHjaJkybAMs2g" alt=""><figcaption></figcaption></figure>


# Configuring Tooltip settings

From the Editor, access the **Guide Settings.** Below are some of the key features:

## Theme tab

<figure><img src="/files/mpWft45bcnn0OCRUgqgh" alt=""><figcaption></figcaption></figure>

## **General tab**

<figure><img src="/files/EQw66rZuLnCg9Gohxxjq" alt=""><figcaption></figcaption></figure>

## Rules tab

<figure><img src="/files/l5vGtEBeOzOuYc0Or1is" alt=""><figcaption></figcaption></figure>

## **Defaults tab**

The Defaults tab is where all the common defaults for the steps within the Tooltips guide are configured.

<figure><img src="/files/0ab8aYrNiQVUmrS1kmnD" alt=""><figcaption></figcaption></figure>


# Creating and managing Tours

A Tour is a series of sequential steps leading the user through important points of the application. Tours are simply a sequence of guides.


# Creating a new Tour

## Creating a new guide

1. Sign in to the Adopt Management Console with your credentials
2. Click on the name of the Space you want to work on
3. Click **Guides** from the menu pane on the left
4. Click **Create Guide** in the top right corner of the screen&#x20;

You will be given two options to choose from.&#x20;

* **Tooltip -** one guide
* **Tour -** a sequence of guides

<figure><img src="/files/VfdD9A2SMwuad2hfxuWO" alt=""><figcaption></figcaption></figure>

5. From the Create Guide button, select **Tour**
6. Name the Guide
7. Provide an initial URL

***Note:** This URL will be used to navigate to the application where you can start modifying your guide in **editor mode**.*

***Note:** We recommend you add a brief description for your future reference. This will come in handy to keep track of the guides as you add more to cover all the journeys that a user might take in your application.*

8. Once you have filled the information in, click **Create.**

<figure><img src="/files/wO9U1mtAZWAYsAu012By" alt=""><figcaption></figcaption></figure>

The created guide will now sit here:

<figure><img src="/files/F1gs9js6gYRRUScBVFbs" alt=""><figcaption></figcaption></figure>

Now that you have created a new guide, either repeat the process to create other guides for different parts of your application, or add steps to the guide and define its parameters.

Click **Open in Editor** and you will be redirected to the Adopt Editor where you can modify your guide with many personalization settings provided.

<figure><img src="/files/R9UOy9Bk3m4xgcd7Y1ub" alt=""><figcaption></figcaption></figure>

***Note:** At this stage, newly created guides do not have any steps, meaning the guide does not yet know where to start or what the next step is.*

## Adding a step

1. Open your chosen guide in the Adopt Editor
2. Click **Add a Step**, or alternatively click the **+** icon

<figure><img src="/files/V0KCvKRUYXiuWfDPmO35" alt=""><figcaption></figcaption></figure>

3. Click **Step** from the dropdown, or use the keyboard shortcut **Shift + A** \
   ***Note**: This will activate the element picker where you can choose an element on the page to associate to this step*
4. Either hover the cursor over your page and choose an element by clicking on it, or using the **Shift + S** keyboard shortcut. This will create a step assigned to the chosen element \
   ***Note: Shift + S** keyboard shortcut is handy, especially when an element can’t be chosen by a mouse. This may happen when you want to pick an element in a pop-up menu which isn’t visible when clicked. In such cases, you can use the keyboard shortcut.*

Now that you have created a new guide and added a new step, you can add as many as necessary to cover every possible scenario where a user might need guidance.&#x20;

You can also customize the Step by clicking on the gear icon of the step.

<figure><img src="/files/rTjEusx4cEAkwBC046An" alt=""><figcaption></figcaption></figure>


# Configuring Tours

Tours provide contextual guidance directly within the flow of an application, they can be single or multi-step walkthroughs to assist end users through business processes. They can also contain Rules and Trigger logic to create a seamless experience.&#x20;

A Tour configuration is managed in 3 key areas:

1. Adopt Management Console – How new Tours are created, or existing ones are managed.
2. Step Editor – Can be launched from any Tour within the Management Console. This is where the creation of steps within the Tour are configured
3. Tour Guide Settings - how you can control the targeting and global display settings&#x20;


# Launch Step editor and creating a step

Access any new or existing Tours within the Guide view, highlight the required Tour and click **Open in Editor**. You will now be redirected to the Adopt Editor where you can modify your Tour configuration within the assigned application.

<figure><img src="/files/MuUrgstTXEznFQuX2fiU" alt=""><figcaption></figcaption></figure>

***Note:** This will activate the element picker where you can choose an element on the page to associate to this step.*

## **Adding a Step**

1. Open your chosen guide in the Adopt Editor
2. Click **Add a Step**, or alternatively click the + icon

<figure><img src="/files/LpiO99FsenbsOWr7SK7f" alt=""><figcaption></figcaption></figure>

3. Click **Step** from the dropdown, or use the keyboard shortcut **Shift + A**&#x20;

***Note:** This will activate the element picker where you can choose an element on the page to associate to this step.*

4. Either hover the cursor over your page and choose an element by clicking on it, or using the **Shift + S** keyboard shortcut. This will create a step assigned to the chosen element&#x20;

***Note: Shift + S** keyboard shortcut is handy, especially when an element can’t be chosen by a mouse. This may happen when you want to pick an element in a pop-up menu which isn’t visible when clicked. In such cases, you can use the keyboard shortcut.*

Now that you have created a new guide and added a new step, you can add as many as necessary to cover every possible scenario where a user might need guidance.

Once all steps have been created, you can access Step customization by clicking the gear icon of an individual step.

<figure><img src="/files/CmScTPGOCbNMyLaNF0FT" alt=""><figcaption></figcaption></figure>

## **Step Editor**

When you open a Tour in Editor mode, the Step Editor appears. Below you can see how the Step Editor appears on-screen.

<figure><img src="/files/lmZQvzCOOtXS1Hd5LsxE" alt=""><figcaption></figcaption></figure>


# Changing content, overlay type and appearance

From the Step Editor, access the **Properties** of a step, then click the **Content** tab. Below are some of the key features:

<figure><img src="/files/fPHWDHltsZFvve7s9slU" alt=""><figcaption></figcaption></figure>

From the Step Editor, access the **Properties** of a step, then click the **Appearance** tab. Below are some of the key features:

<figure><img src="/files/zO43dLOotFd5GXlge4ZF" alt=""><figcaption></figcaption></figure>


# Defining positioning options

From the Step Editor, access the Properties of a step, then click the Position tab. Below are some of the key features:

<figure><img src="/files/iPpAyHmLZUZGagTv3dDT" alt=""><figcaption></figcaption></figure>


# Understanding Start and Completion triggers

From the Step Editor, access the **Properties** of a step, then click the **Triggers** tab. Below are some of the key features:

<figure><img src="/files/qo4TnJlQWQI2ArEScElT" alt=""><figcaption></figcaption></figure>


# Understanding interaction options for triggers

As an alternative, or in conjunction with the Previous and Next buttons, you can configure how a user transitions between steps via end-user interactions.

<figure><img src="/files/Y8P69SLFwfycteK8iwnT" alt=""><figcaption></figcaption></figure>


# Defining Tour theme settings

From the Step Editor, access the **Guide Settings**, then click the **Theme** tab. Below are some of the key features:

<figure><img src="/files/xvpwfJP0tmLC48mr50z1" alt=""><figcaption></figcaption></figure>


# Configuring Context Help and general publishing options

From the Step Editor, access the **Guide Settings**, then click the **General tab**. Below are some of the key features:

<figure><img src="/files/tWwbm6KJirwGhHEEh0V6" alt=""><figcaption></figcaption></figure>


# Including a Tour within a Journey

From the Step Editor, access the **Guide Settings**, then click the **Track** tab. Below are some of the key features:

<figure><img src="/files/MZczOJYKaVnQlbI4I07B" alt=""><figcaption></figcaption></figure>


# Configuring Guide rules

From the Step Editor, access the **Guide Settings**, then click the **Rules** tab.&#x20;

Within Guide Rules are 2 sections, Profile and Visitor. This enables the configuration of guides depending on whether your Space has been configured with an API profile integration or not. For the purposes of the training, we will be using Visitor rules.&#x20;

***Note:** API profile configuration is not covered within the “Getting Started” modules*&#x20;

Below are the key features:

<figure><img src="/files/BONrtnPV9M2m12bIcicb" alt=""><figcaption></figcaption></figure>


# Configuring Tour defaults

From the Step Editor, access the **Guide Settings**, then click the **Defaults** tab. The Defaults tab is where all the common defaults for new steps within the Tour are configured.

<figure><img src="/files/txAytnBRRhdXDMG6hoUA" alt=""><figcaption></figcaption></figure>


# Capturing Tour Steps

Adopt has a feature that automates will the recording of guides and their steps. You can quickly turn on recording mode and Adopt will automatically and continuously take a screenshot every time a step is triggered. Once you have captured the whole process, you can turn the recording mode off and download the captures as a Microsoft Word document file to your computer. The document will include the guide’s name, the text contained in the step, the date and time of recording, and the screenshot where the step bubble is displayed. Adopt will store the recording in the cloud and it will be available to download as a Word document on-demand.&#x20;

***Note:** Guides and their steps must already exist in the Management Console before you can record them*

***Note:** The recording process can be initiated and stopped from the Agent mode. You do not need to open the Adopt Editor for this. However, if the Adopt Editor is open at that moment (when the step is triggered), the screenshot will include the Adopt toolbar as well.*

## Recording a guide

***Note:** Make sure you are in Agent mode. Turn off the Adopt Editor so that it doesn’t appear in the recording.*

1. From your system webpage, click on the Adopt extension icon on the Google Chrome toolbar
2. From the list, find the guide you want to record and click on the **camera icon** to start recording

<figure><img src="/files/xfhSwKecKojNRji9Kmc7" alt=""><figcaption></figcaption></figure>

***Note:** When recording, the Stop button will be visible instead of the camera icon.*

3. Walk through the system and click all of the steps that form the guide&#x20;

***Note:** Once started, Adopt continuously records the whole process until the Stop button is pressed. A single recording can contain multiple guides and their steps, meaning that you can capture a complex process in one recording.*

***Note:** If you are using decisions in your guides, it means there is more than one way a guide can be completed. Do not forget to initiate a recording for the other flows.*

4. When you have finished, click the **Stop** button

<figure><img src="/files/KuaN8NAWEFsbU6D8SGYE" alt=""><figcaption></figcaption></figure>

***Note:** Stopping the recording progress does not affect any previously recorded guides. You can continue downloading previously recorded guides in the Adopt Management Console. You can use this functionality to record the guides when desired by starting or stopping whenever needed.*

## Generating and downloading the recording

***Note:** Adopt keeps the recordings on its cloud servers. You can download the recording anytime. If you deployed Adopt on-premise (on your local cloud storage) or Microsoft Azure Cloud Storage, the progress does not change; however, where the recordings are kept will change accordingly.*&#x20;

1. Sign in to the Management Console with your credentials
2. Click on the name of the application you want to work on
3. Click **Guides** from the menu pane on the left
4. Find the guide with the prefix “**Capture**”

***Note:** The recording will also have a grey label so you can distinguish it from the original guide*

5. Click on the **ellipsis**

<figure><img src="/files/UGzAynLKq2cXoWgJuGji" alt=""><figcaption></figcaption></figure>

6. Click **Generate** and Adopt will generate the document

<figure><img src="/files/jRqzOOLfUo9JwJ7QPBW5" alt=""><figcaption></figcaption></figure>

7. Refresh the page

***Note:** You must refresh the page before you can download the document. A message prompting you to refresh will appear in the bottom right corner*

8. Click on the ellipsis again
9. Click Download and the document will automatically download to your computer

***Note:** A message will appear in the bottom right of the screen stating that the download was successful*

<figure><img src="/files/ptM3LwjpBINthHQLkHs5" alt=""><figcaption></figcaption></figure>

10. Find the generated document in the Downloads folder of your computer. It will have a name starting with **capture-output**- followed by system generated letters and numbers
11. Open the document to see the recorded guide

<figure><img src="/files/rzZ0G5MWkaSZgpXYtlkv" alt=""><figcaption></figcaption></figure>


# Creating and managing Playlists

Playlists enable organizations to embed existing Media or Articles within their SaaS applications.  Playlists can be accessed within the Adopt Context Help panel based on the configuration of Adopt contextual guidance rules and conditions.

A Playlist configuration is managed in 3 key areas:

1. Adopt Management Console – How new Playlists are created, or existing ones are managed
2. Playlist Editor – Can be launched from any Playlist within the Management Console. This is where the creation of Media items within the Playlist are configured
3. Guide Settings -  how you can control Rules targeting and global display settings

<figure><img src="/files/fkPnYmEsvB5KYXYxi15N" alt=""><figcaption></figcaption></figure>


# Creating a new Playlist

## Adding a new playlist

From within your required Space’s homepage, follow the steps below.

<figure><img src="/files/dMRx4u6XukzJtGhR5Q8J" alt=""><figcaption></figcaption></figure>

## Opening Editor

Access any new or existing Playlist within the Guide view, highlight the required Playlist and click **Open in Editor**. You will now be redirected to the Adopt Editor where you can modify your configuration.

<figure><img src="/files/EKVpdxW8Q7wZ6HUy66AY" alt=""><figcaption></figcaption></figure>

## Understanding Playlist Editor

When you open a Playlist in Editor mode, Adopt will launch the initial URL for the specific Playlist. Below you can see how the Editor appears on-screen.&#x20;

<figure><img src="/files/r0iXcXh77LlwF5GQa6GJ" alt=""><figcaption></figcaption></figure>


# Defining Playlist settings

## Theme tab

From the Step Editor, access the **Guide Settings**, then click the **Theme** tab. Below are some of the key features:

<figure><img src="/files/4RIVKCj39yUOvQND9Q42" alt=""><figcaption></figcaption></figure>

## General tab

From the Step Editor, access the **Guide Settings**, then click the **General** tab. Below are some of the key features:

For Playlists, by default the option to Include within Context Help will be enabled.  This can be enhanced by using URL and Element matching for scenarios when you only want the Playlist available on specific areas of the application.

<figure><img src="/files/mlRn2EGmC8c47SfbPDAS" alt=""><figcaption></figcaption></figure>

## Rules tab

From the Step Editor, access the **Guide Settings**, then click the **Rules** tab.

Within Guide Rules are 2 sections, Profile and Visitor.  This enables the configuration of guides depending on whether your Space has been configured with Adopt 2.0 Profile integration or not (if so, choose the Profile rule set, otherwise select rules from the Visitor rules)&#x20;

***Note**: API profile configuration is not covered within the “Getting Started” modules.*

Below are the key features:

<figure><img src="/files/78V1pnSEwyxy6U9fcRKf" alt=""><figcaption></figcaption></figure>

## Context Help Rules

Within every Playlist rule you b set the Context Help display behaviour for users who do not evaluate as TRUE.  We advise for Playlists rules that Administrators should set the Context Help option to Invisible.  This would achieve the following behaviour:

• **Invisible** - If you choose invisible for Context Help and the rule is NOT evaluated as TRUE, then the Playlist will be hidden within the panel.  If the rule is evaluated as TRUE, then the Playlist will be displayed in the guides section of Context Help.

<figure><img src="/files/xdpv1bRd4hbdWohJCMQ3" alt=""><figcaption></figcaption></figure>

**Example**: In the rule above, the Playlist would only be available within Context Help Panel to users who have not seen the Playlist previously. After viewing the Playlist once, it will no longer be available to those users.


# Adding media to a Playlist

## Understanding Media tab

From the Playlist Editor, access the **Properties** of an item, then click the **Media** tab. Below are the key features:

<figure><img src="/files/KTemWrM8Qj7fExglNqQW" alt=""><figcaption></figcaption></figure>

## SharePoint: Creating Playlist media

Within the Playlist editor it is possible to embed content from your existing content libraries. The steps below demonstrate how you can add media to a playlist from SharePoint (Office 365) and the display options available.

<figure><img src="/files/h3WFafeALRzRL5eIl09y" alt=""><figcaption></figcaption></figure>


# Playlists FAQ

<details>

<summary>Will the product handle authentication with Media hosted within SharePoint via Office 365?</summary>

Not fully,  if the user has a valid token for Office 365 then they will be able to view the Media within the configured Overlay.  However, If the user has not authenticated, Office 365 will show a message similar to the image on the right, once the user has authenticated, they will be able to view the media.

<img src="/files/VXodizbXJ3PmzZExjjBk" alt="" data-size="original">

</details>

<details>

<summary>Which Overlays are recommended for use with Playlists?</summary>

If you are embedding the Media within the same browser window, the "Panel" Overlay is usually the best fit for PDFs and Videos.  However, if you experience issues with embedding media, the "Link" Overlay is the best choice as this will launch in a new browser tab.

</details>

<details>

<summary>Are there any pre-requisites for media included within a Playlist?</summary>

The URL that is used by Adopt must be capable of being embedded within an iframe. Depending on the security restrictions of the host site, this may not be possible in all cases.  You will find that most of the common video hosting platforms provide embed code (like the SharePoint example on previous page).  As an alternative, the Link Overlay will launch the URL within a new tab.

</details>

<details>

<summary>Is there no option to upload Media content to Adopt 2.0 for use within Playlists?</summary>

Feedback from our customers has indicated that hosting Media content within Adopt can lead to duplication of administration effort to manage, when ordinarily the content will already be hosted within the organizations existing environment. Playlists 2.0 is the first of several integration updates that will connect Adopt to an organizations existing knowledge repositories.

</details>


# Using Context Help

Context Help provides contextual information and guidance as users navigate through an application. It helps directly at the point of need, empowering and guiding end-users to complete tasks correctly and efficiently.&#x20;

Include any guide, tour, playlist and journey in the Context Help to provide targeted and relevant guidance to all users who can access the resources by clicking on the Context Help icon.

{% hint style="info" %}
By default, the Context Help icon is a question mark, but if you wish to customize and change the appearance, for example to your company logo, contact us for details.
{% endhint %}

Below are the basic customizations that can be applied.&#x20;

<figure><img src="/files/Orsej6dw9hXAgkhtuzLi" alt=""><figcaption></figcaption></figure>

## The Search Bar

Context Help contains a search bar where users can input keywords to find appropriate guidance.&#x20;

***Note:** By enabling users to search within the system, they don’t have to swap to different tabs to find information.*

<figure><img src="/files/s0anCb4Yz8it2rc1vT6P" alt=""><figcaption></figcaption></figure>

## Journey Tracker

If you have opted to turn on the Journey Tracker function, Context Help will display the journey and the completion rate so users can track their progress. For further information, refer to Adopt’s **Journey Tracker** guide.&#x20;

<figure><img src="/files/S2eveJVZ6eW2MdpRSAJb" alt=""><figcaption></figcaption></figure>

## List of Available Tours

Context Help contains the available tours relating to the current user context and segment. The available tours are ordered alphabetically, or the order can be defined manually.

<figure><img src="/files/bz95zER3H4SlKAsrgeiF" alt=""><figcaption></figcaption></figure>


# Editing Context Help settings

You can fine-tune the appearance and the content of the Context Help (CH). \
***Note:** When in Editor mode, your Context Help icon and any other Adopt content won’t be visible on your system screen as you edit.*&#x20;

To edit the appearance and content of Context Help:

1. Sign in to the Adopt Management Console with your credentials
2. Click on the name of the Space you want to work on
3. Click **Context Help** from the menu pane on the left and the Settings page will open \
   ***Note:** After you have applied any changes, remember to click **Save** at the bottom of the Settings page.*

<figure><img src="/files/ftjHwEVPZIdsTDlg0Vo9" alt=""><figcaption></figcaption></figure>

Here you can: \
• Rename the title of the Tour List

<figure><img src="/files/1UFv7DjeZL1MLEeGSvXN" alt=""><figcaption></figcaption></figure>

And the change will appear here:

<figure><img src="/files/6WZF9SckY84YglEZTHKt" alt=""><figcaption></figcaption></figure>

• Rename the list title of the Journeys

<figure><img src="/files/96LvYKyYsKg7yPj0n1vz" alt=""><figcaption></figcaption></figure>

And the change will appear here:

<figure><img src="/files/TpskgEsmPBrwcvSPuWCl" alt=""><figcaption></figcaption></figure>

• Turn on a success notification which appears when a journey is completed

<figure><img src="/files/49omagTAMJooFy0Xd8sU" alt=""><figcaption></figcaption></figure>

• Define a confirmation question when a user wants to restart the process

<figure><img src="/files/dmXpbLkOjchlIGQt0FHA" alt=""><figcaption></figcaption></figure>

• Change the placeholder inside the Search Bar&#x20;

This message will tempt the user to start a search and disappear as soon as a user begins to type.

<figure><img src="/files/eyQzVPKYolDaZCQI0qEI" alt=""><figcaption></figcaption></figure>

And the change will appear here:

<figure><img src="/files/gDeNPZ65v2ifwRlytPhQ" alt=""><figcaption></figcaption></figure>

• Enable and disable guidance control&#x20;

When enabled, this places a slider within Context Help which users can turn on to view guidance, or turn off to hide Tooltip guidance

<figure><img src="/files/ZTEfcVVS313Mc8aZQiwY" alt=""><figcaption></figcaption></figure>

And the change will appear here:

<figure><img src="/files/J0ND8qQ8dDk6BKD5RYdR" alt=""><figcaption></figcaption></figure>


# Including a guide in the Context Help

***Note:** A guide must already be created before you can add it to Context Help.*

1. Click **Guides** from the menu pane on the left
2. Click **Open in Editor** to open the guide you want to include

<figure><img src="/files/g3ExS43WvDMa3JCOkL7c" alt=""><figcaption></figcaption></figure>

3. Open **Guide Settings**

<figure><img src="/files/fkwn09IXEvKl7mVW85x0" alt=""><figcaption></figcaption></figure>

4. Click the **General** tab

<figure><img src="/files/BXtSvo00c1h7IgixR8k1" alt=""><figcaption></figcaption></figure>

5. Check the **Include in Context** help box
6. **Save** the settings&#x20;

Now, this guide will be visible in the Context help widget on the List of Tours section.


# Defining conditions for guides in the Context Help

There are two conditions that you can set that will affect the appearance of the Context Help.

1. **Include the guide in Context Help when URL matches** \
   You can use this function if you would like to make the visibility of the guide dependent on the URL which the user is on. So, if this option is chosen, the guide will be listed in the List of Tours in Context Help only when the URL which the user is on matches the given URL.&#x20;

To turn it on:

1. Make sure that **Include in Context** help check-box is selected
2. Select the **Include guide in Context help when URL matches** box
3. Provide the URL where you wish this guide to be shown
4. **Save** the settings

<figure><img src="/files/Jfif3jhqgjnd95vvi5Gf" alt=""><figcaption></figcaption></figure>

Adopt will include this guide in the Context Help's list of tours section only when a user or visitor is on the provided URL.

2. **Include the guide in Context** **Help when the element is present** \
   You can use this function if you would like to make the visibility of the guide dependent on an element’s presence. So, if this option is chosen, the guide will be listed in the List of Tours in Adopt Context Help, only when the selected element is present. \
   ***Note:** In the sentence above, **“present”** does not only mean “visible” on the page. The element which the guide’s visibility depends on does not have to be visible. It can also be based on a hidden element on the system’s current stage/screen. This feature becomes useful when the system has the same URL for multiple screens. For example, you can create a guide named **Pay your balance** and make that guide visible if the user has any balance.*\
   \
   1\. Make sure that **Include in Context help** checkbox is selected\
   2\. Select the **Include guide in Context help when the element is present** box\
   3\. Click **Reselect** to choose the dependent element\
   4\. Click **Preview** to have a peek at the selected element\
   5\. **Save** the settings

<figure><img src="/files/H5LloJwGg2LETzOOqNsz" alt=""><figcaption></figcaption></figure>

***Note:** These settings are guide specific. This means you should repeat this process above for any other guide you would like to include in the Context Help, except for the search functionality as this will be visible throughout.*&#x20;

***Note:** You can include as many guides as you wish. These are extremely useful for system users or visitors; they will serve as on-demand guidance. If the guide is still not visible to users after the settings are completed, make sure the guide is not in Unpublished mode.* \
For further information, refer to Adopt’s **Unpublished Mode** guide.

***Note:** Use Adopt Analytics to help you decide which parts of the system are the most problematic for users so that you can ease the bottlenecks with **Context Help.***


# Using Element Selector

Creating dynamic guidance across all your SaaS applications is made easy with Adopt 2.0’s no-code Element Selector. Web elements are targeted interactively with 3 stages – Select, Refine and Confirm. <br>

## Element Selector Layout

<figure><img src="/files/F5u4jKyJYaiUYCzSfs1B" alt=""><figcaption></figcaption></figure>

## Configuration

### **Select**&#x20;

The Element Selector is activated within the Browser session whenever a New Step is created.

<figure><img src="/files/lwpxkAuwymfytmHarkSi" alt=""><figcaption></figcaption></figure>

Alternatively, the Element Selector can be re-launched via the Position tab of the Editor.

<figure><img src="/files/C3LVKfXbyykF67Vxtuf5" alt=""><figcaption></figcaption></figure>

Once the Element Selector has been launched, use the cursor to hover over the web element that you wish to assign guidance to.

<figure><img src="/files/vZkPdq5PvVS51Iz4qJe3" alt=""><figcaption></figcaption></figure>

The Control Panel provides several visual & functional options that can be used to sharpen the selection.

<figure><img src="/files/oO5SNEPWrdTqwme0fg5W" alt=""><figcaption></figcaption></figure>

### **Refine**

Use the Up & Down arrows within the control panel to adjust the captured element. This will also impact on the Element Strength that is indicated with the power bar. \
Captured attribute data is displayed within the control panel, this is useful to determine if any classes or IDs may be dynamically created. This type of attribute can impact the stability of the selection. \
Administrators can fine tune the attributes to be included / excluded within the Selector System area of the Management Console.

<figure><img src="/files/KOv9sLGAyG7BbPLbxcrA" alt=""><figcaption></figcaption></figure>

### **Confirm**

Click the tick icon within the control panel. This will return you to the Editor.

<figure><img src="/files/thNMSvsJZXU69tsBH15y" alt=""><figcaption></figcaption></figure>

## Selector Controls

<figure><img src="/files/LUAUdvKfpHxKdt12FwEc" alt=""><figcaption><p>Useful in scenarios when the element required is not available at initial visit. eg: Within a Menu drop-down list</p></figcaption></figure>


# Advanced Element Selector techniques


# Defining a Selector system

Selector systems allow you to influence how Adopt understands the internal rendering structure (DOM tree) within a web page. Adopt records multiple types of selectors to increase the chance of finding the element, but in some cases, additional information is required to ensure accuracy and reliability.

## When to consider configuring a Selector system

Administrators creating guides (Tours, tooltips, playlists) that depend on specific elements on a web page may find inconsistencies in element detection.  The Adopt element selectors could collect inconsistent element data across employees and/or time, such as randomized session IDs across user sessions.

## Identifying attributes for consideration

1. Launch the Chromium developer tools (F12) within MS Edge and Chrome browsers.
2. Click the <img src="/files/veeWxCR7MHVnHBhp0XOb" alt="" data-size="line"> icon within the Toolbar.
3. Select the required element with the mouse cursor.
4. From the right-hand Elements pane, you will see the related data to the selected element.
5. Evaluate if any attributes contain stable data (You should sample 5-6 elements as a comparison).
   1. In the example below, the `data-automation-id` attribute is a candidate for this purpose

<figure><img src="/files/NnxPepIEwqIuKmhwWamt" alt=""><figcaption></figcaption></figure>

## Configuring a Selector System

From the Management Console

1. Select the Space that you need to configure.
2. Choose Settings from the left-hand bar.
3. Choose the Selector system option from the sub-menu.

Here, you will see the specific options below:

* **Selector 'class only'** - This selector is constructed only from CSS class names.
* **Ignored element IDs** - This is the list of comma-separated identifiers of elements that should be excluded from the construction of the selector.
* **Ignored element class names** - This is the list of comma-separated class names of elements that should be excluded from the construction of the selector.
* **Included element custom attribute names** - This is the list of comma-separated custom attribute names of elements that should be included in the construction of the selector.
* **Dropdown list selector**

## Making a change to a Selector

The configuration may vary depending on the selector. However, each selector has helper text within the console to advise of the required syntax. For example, `Include specific element attributes` requires a comma-separated list, and the steps below show you how to apply them successfully.

### Include specific element attributes

1. Scroll to the section named "Included element custom attribute names."
2. Add the attribute names identified [earlier ](#how-to-identify-attributes-for-consideration)to a comma-separated list (see below).
3. Click Save.

<figure><img src="/files/wzoRGE4LLOCcwV5aDeNy" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
After making a Selector System change, be aware that this will only affect element selections that are made afterward.  This will not update any existing element selectors configured within Adopt content (Tour steps, Tooltips)
{% endhint %}

## Defining the optimal settings

We recommend the following settings should be applied to customers applying Adopt guidance within the following SaaS applications:

### Workday

<figure><img src="/files/jlZgEnwbHXPzBFUOETBL" alt=""><figcaption></figcaption></figure>

### SAP SuccessFactors

<figure><img src="/files/Cuk6kMDD3lv53n2tdT2g" alt=""><figcaption></figcaption></figure>


# Configuring Shadow DOM Selectors

[Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM) is a technique within SaaS applications that enables developers to attach a DOM tree to web elements in HTML, with its internals hidden from JavaScript and CSS running on the page.&#x20;

Nexthink offers a set of selectors that facilitate detecting these elements and delivering DAP content to them. In some instances, customizing a selector ensures better detection accuracy.

## Shadow DOM areas within SAP SuccessFactors

Below are some specific examples that Nexthink has identified and provided configuration for.

{% hint style="info" %}
Employees see the items in this list differently based on the user role and the current URL.
{% endhint %}

### Menu Button

Although the text of this button is different across pages, the required attribute data is consistent.\
Nexthink Adopt's System page targeting ensures the configuration only shows on the correct pages.

<figure><img src="/files/bqyQPnMjYS82bxpZknQQ" alt=""><figcaption><p> </p></figcaption></figure>

#### Configuration

1. Open the Adopt Editor from within the application.
2. Choose `Create step` and select the required element.
3. Within the Step Editor, click the `Position` tab.
4. Navigate to the `Element JSPath` selector.
5. Replace the existing element JSPath within the data below:

`[data-ui5-stable='sf-header-shellbar'],ui5-shellbar-sf-header#shellbar[data-ui5-stable='shellbar'],* *[data-ui5-stable='menu']`

### Menu Dropdown list

Several items are available when a user selects the Menu as shown in the image below. This area is contained within shadow DOM trees.

<figure><img src="/files/eAPxnO6NJtXvC8zuHmAw" alt="Example of Shadow DOM elements within the Menu drop-down list"><figcaption></figcaption></figure>

#### Configuration

To add a stable selector for any item within this list:

1. Open the Step Editor.
2. Create/edit a step and select the menu item element.
3. Navigate to the `Position` tab.
4. View the current `Element JSPath` selection.
5. Identify the module associated with the selection by searching for `[data-ui5-stable='Module-` within the text area.\
   For example, `[data-ui5-stable*="Module-TALENTREVIEW"]`is contained in the following image.

<figure><img src="/files/yS1xxpUDroQ6ZjOZhrBh" alt=""><figcaption></figcaption></figure>

6. Append the identified module data with the following:\
   `ui5-static-area-item-sf-header,* *`
7. The result should look like this:\
   `ui5-static-area-item-sf-header,* *[data-ui5-stable*="Module-TALENTREVIEW"]`

If you use the click trigger for step completion, add the following Element JSPath selector into that area.

<figure><img src="/files/E4ATGTOAy11ccJQRyyDF" alt="Preview the selection to make sure it is correct before saving the step"><figcaption></figcaption></figure>

#### Example selectors

The table below showcases the custom Element JSPath selectors required for the configured menu item:

| Item             | Element                                                                       |
| ---------------- | ----------------------------------------------------------------------------- |
| Home             | `ui5-static-area-item-sf-header,* *[data-ui5-stable*="Module-HOME"]`          |
| Admin Center     | `ui5-static-area-item-sf-header,* *[data-ui5-stable*="Module-ADMIN"]`         |
| Calibration      | `ui5-static-area-item-sf-header,* *[data-ui5-stable*="Module-CALIBRATION"]`   |
| Company Info     | `ui5-static-area-item-sf-header,* *[data-ui5-stable*="Module-COMPANY_INFO"]`  |
| Compensation     | `ui5-static-area-item-sf-header,* *[data-ui5-stable*="Module-COMPENSATION"]`  |
| My Employee File | `ui5-static-area-item-sf-header,* *[data-ui5-stable*="Module-EMPLOYEE_FILE"]` |
| Objectives       | `ui5-static-area-item-sf-header,* *[data-ui5-stable*="Module-GOAL"]`          |
| Performance      | `ui5-static-area-item-sf-header,* *[data-ui5-stable*="Module-PERFORMANCE"]`   |
| Presentations    | `ui5-static-area-item-sf-header,* *[data-ui5-stable*="Module-TALENTREVIEW"]`  |
| Recruiting       | `ui5-static-area-item-sf-header,* *[data-ui5-stable*="Module-RECRUITING"]`    |
| Reporting        | `ui5-static-area-item-sf-header,* *[data-ui5-stable*="Module-REPORT"]`        |
| Succession       | `ui5-static-area-item-sf-header,* *[data-ui5-stable*="Module-SUCCESSION"]`    |

### Menu tabs

Most areas of the system have a series of tabs available within the top menu section (highlighted below).\
All available tabs are within shadow DOM trees. Nexthink recommends configuring a custom Element JSPath for these areas.

<figure><img src="/files/paRuFc28fUWspCdjCvme" alt="Example of Shadow DOM within Menu tabs on the Job Requisitions page"><figcaption></figcaption></figure>

#### Configuration

To add a stable selector for any item within this list:

1. Open the Step Editor.
2. Create/edit a step and select the menu item element.
3. Navigate to the `Position` tab.
4. View the current `Element JSPath` selection.
5. Identify the module associated with the selection by searching for `[data-ui5-stable='bizxSubTab` within the text area.\
   For example, *`[data-ui5-stable='bizxSubTab_RECRUITING_EMAIL_CORRESPONDENCE_MESSAGE_CENTER'`*`]`is contained in the following image.

<figure><img src="/files/2ij8fcvz7sp25bur5He6" alt=""><figcaption></figcaption></figure>

6. Append the identified module data with the following:\
   `[data-ui5-stable='sf-header-shellbar'],ui5-tabcontainer-sf-header,* *`
7. The result should look like this:\
   `[data-ui5-stable='sf-header-shellbar'],ui5-tabcontainer-sf-header,* *[data-ui5-stable='bizxSubTab_RECRUITING_EMAIL_CORRESPONDENCE_MESSAGE_CENTER']`

If you use the click trigger for step completion, add the following Element JSPath selector into that area.

#### Example selectors

The table below showcases the custom Element JSPath selectors required for the configured elements:

| Item                       | <p><br></p>                                                                                                              |
| -------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
| Org Chart                  | `[data-ui5-stable='sf-header-shellbar'],ui5-tabcontainer-sf-header,* *[data-ui5-stable='bizxSubTab_COMPANY_ORG_CHART']`  |
| Position Org Chart         | `[data-ui5-stable='sf-header-shellbar'],ui5-tabcontainer-sf-header,* *[data-ui5-stable='bizxSubTab_POSITION_ORG_CHART']` |
| Company Structure Overview | `[data-ui5-stable='sf-header-shellbar'],ui5-tabcontainer-sf-header,* *[data-ui5-stable='bizxSubTab_ENTITY_ORG_CHART']`   |
| Directory                  | `[data-ui5-stable='sf-header-shellbar'],ui5-tabcontainer-sf-header,* *[data-ui5-stable='bizxSubTab_COMPANY_DIR']`        |

## Customizing a Selector System <a href="#successfactors-customisingaelementjspathselectorforshadowdomelements-workaround" id="successfactors-customisingaelementjspathselectorforshadowdomelements-workaround"></a>

The following sections describe the process of customizing a selector using the Management Console and Step Editor, focusing on SAP SuccessFactors. Note that this can also apply to any application using Shadow DOM.

### Identifying if an element uses Shadow DOM

Follow the steps below to confirm if web elements are contained within Shadow DOM.

1. Launch Developer Tools (F12 within Web Browser).
2. Click the <img src="/files/fuaZQbudZmq1yFUBeOKY" alt="" data-size="line"> icon.
3. Hover over the elements you wish to inspect.
4. Within the right-hand element pane, scroll up from the selected element.
5. Verify if the element is nested within a `shadow-root (open)` area.

<figure><img src="/files/XqdR3WPVCMwLDloh3dis" alt="How to identify elements contained within Shadow Root "><figcaption></figcaption></figure>

### Identifying stable element data

Adopt attempts to determine which element data is best suited for element detection. In some use cases, however, you may be required to create specific custom attributes to ensure the guidance works as expected for your users.  You can use the Developer Tools option within your Web Browser by inspecting the web element data to identify a stable identifier.&#x20;

In this example, you can add the recommended `data-ui5-stable` attribute to the application through the `Space` settings menu within the Management Console.

<figure><img src="/files/S7rdnQmNIzWlvY4K5iM2" alt=""><figcaption></figcaption></figure>


# Using Step Properties

Adopt guides users step-by-step on their journey throughout the application. You can change each of these steps in a variety of ways using Step Properties. There are four step property options that you can change: Content, Appearance, Position and Triggers.&#x20;

\
***Note:** You must have already created a guide and added steps in order to access step properties.*

## Overview

1. Sign in to the Console Management with your credentials
2. Click on the name of the application you want to work on
3. Click **Guides** from the menu pane on the left
4. Click **Open in Editor** for the guide that you want to access the step properties of

<figure><img src="/files/xQCroU7kF66fNKAbPeZ5" alt=""><figcaption></figcaption></figure>

5. Hover your mouse over the step you want to access and click the gear icon to open **Step Properties**

<figure><img src="/files/AmU3HfciGASa4rJp3Wlg" alt=""><figcaption></figcaption></figure>

## Content tab

Within Step Properties, select the **Content** tab. From here, you can add content which your users will see. We recommend keeping the content brief and informative.

<figure><img src="/files/JiMuyitQXUg75dCpp6OK" alt=""><figcaption></figcaption></figure>

You can add rich text, special characters, links to other relevant pages, images, audios, or videos that can be displayed to the users when they interact with the step.&#x20;

You can also set up a sound to be played, or have the text read out loud via text to speech when the user interacts with the step.

## Appearance tab

Within Step Properties, select the **Appearance** tab. From here, you can modify the appearance of the step.

<figure><img src="/files/kSkPrFZkaUBN4wzAI4mC" alt=""><figcaption></figcaption></figure>

You can change the step’s appearance, animations, shadow, border, user interaction limitations, visibility, and the layout of the step.

## Position tab

Within Step Properties, select the **Position** tab.

<figure><img src="/files/CpejPLDNlsFmKCeAU48Y" alt=""><figcaption></figcaption></figure>

If you have a preferred position of the step bubble you can define it here.&#x20;

If your preferred position can not be shown due to space constraints, Adopt would place it in the most suitable position in a clockwise direction.&#x20;

**Reselect** allows you to change the element that is associated with the step in the application. The **Preview** button allows you to preview the step’s element position exactly as a user would see it. You can reposition it by clicking on **Reselect** if needed.

## Triggers tab

Within Step Properties, select the **Triggers** tab.

<figure><img src="/files/HutuE8akXoun8EuqaMVW" alt=""><figcaption></figcaption></figure>

You can individually define the **trigger** parameters for both the starting and completion of the step. These parameters change the step’s behavior depending on what the user is expected to do, so the next step can be triggered.


# Configuring Themes

Adopt has different themes for you to choose from. However, only selected guides are visible in the Adopt Console/Editor. If any of the available themes do not fully fit the style of your application theme, contact our Professional Services team who will be happy to help create a unique, personalized theme for your organization.

#### To configure a theme:

1. Sign in to the **Management Console** with your credentials
2. Click on the name of the Space you want to work on
3. Click **Guides** from the menu pane on the left
4. Click **Open in Editor** for the guide where you want to change the Tooltip theme

<figure><img src="/files/zSkMVBCl9YroK0mwwOMF" alt=""><figcaption></figcaption></figure>

5. Open **Guide Settings**

<figure><img src="/files/oyBFmye4FM2aLzQHCIIJ" alt=""><figcaption></figcaption></figure>

7. Click on the **Themes** tab
8. Choose the desired theme from the dropdown menu
9. Click **Save** to save the settings

<figure><img src="/files/KqwvzI07klsRYCeX59Ol" alt=""><figcaption></figcaption></figure>


# Targeting System Pages

This document introduces System Pages functionality available within the Editor. System Pages ensure that guidance appears only in the required areas of your SaaS applications.&#x20;

## Feature Compatibility

Refer to the table below to understand where this feature is configured. Guide Level targeting is utilised to publish the Tour or Playlists to Context Help or Journey Tracker.

<figure><img src="/files/2RnzVjk02ED52BYjvdQB" alt=""><figcaption></figcaption></figure>

## Tours

System Page targeting can be used within 2 areas of Tour configuration:

1. Guide Settings – Set the System Page(s) where the Tour should be available via Context Help.
2. Step Position – When creating a new step, during the element selection process the editor will also assign a System Page mapping.  If no System Page mapping was detected, then either:
   * Search manually for the System Page
   * Contact our Support team, who will add the System Page as required.

When editing an existing step,  the current System Page Mappings will not be altered.  To change the mapping, you can select manually from the list within the Position tab.

## Playlists

System Page targeting is configured only at the Guide level. \
Assigning the Playlist to the required System Pages, controls where the Playlist is available in Context Help.

## Tooltips

System Page targeting is configured at the individual Tooltip level, when creating a new Tooltip, during the element selection process, the editor will assign the related System Page mapping. If no System Page mapping was detected, then either:

&#x20;\- Search manually for the System Page

\- Contact our Support team, who will add the System Page as required.


# Tours & Tooltips Overview

Following Element Selection on a new step, a matching System Page will be automatically chosen.  If one is not found, then this would require either a new System Page to be created (via our Customer Support) or the Administrator can subsequently choose from the available list.

The panel can be refined based on Search results, matches and selected pages.

&#x20; ![](/files/cK4asBv60ScUIJz5HBJP)

Search for specific System Page(s), this is useful if you are configuring the content from a different areas of the application.  You will be prompted if no System Pages are returned.

{% hint style="info" %}
When using the Step Editor within a SaaS application that uses iFrames extensively, the *Show Matches* option WILL NOT be able to display the matching system page for the iFrame that the target element resides in. To display the matching system page, the element will need to be reselected
{% endhint %}


# Playlist & Tour Settings Overview

Playlists and Tours can be accessed via Context Help Panel using System Page mappings.

This configuration is located within Guide Settings > General Tab.

<figure><img src="/files/R2LWZ8g57tk2yHAa1uLX" alt=""><figcaption></figcaption></figure>


# Analytics Insights

## **Core Analytics > Targeting Dashboard**&#x20;

Customers can access the Targeting Dashboard to view Adopt insights from a System Pages perspective and answer the following questions:

A. Where can users access Adopt guidance? \
B. What is the coverage of Adopt guidance?&#x20;

For this purpose, Targeting is now split between 2 metrics:&#x20;

• Available % - Pinpoint the System Pages that have content mapped to either Context Help/Journey Tracker or configured to “Start Automatically” \
• Mapped % - Highlight the System Pages that have Adopt content configured at Guide & Step Level


# Defining conditions for completing a step

Adopt guides your application visitors via step-by-step on-screen guides. You can define what user actions will trigger the step completion so they can move on to the next step. These requirements, or step completion conditions, usually consist of interacting with the step either by entering value or clicking on a provided button. There are multiple step completion conditions to choose from in the Adopt editor.&#x20;

<figure><img src="/files/4Z5nMZCyWGmhUEho5oYH" alt=""><figcaption></figcaption></figure>


# Accessing the guide

1. Sign in to the [Adopt Management Console](https://cloud.applearn.tv/console/) with your credentials
2. Click on the name of the application you want to work on
3. Click **Guides** from the menu pane on the left
4. Click **Open in Editor** for the guide where you want to define a step completion condition

<figure><img src="/files/qk5tq53CnuCYfphWbsDx" alt=""><figcaption></figcaption></figure>

5. Hover your mouse over the step you want to edit and click the gear icon to open **Step Properties**

<figure><img src="/files/boDAmzlSxEg51WGV6ZqY" alt=""><figcaption></figcaption></figure>

6. Click on the **Triggers** tab. On this tab, you can set up what are the triggers of this particular step. The left column represents the activators of the step and the right column represents step completion parameters.

<figure><img src="/files/O3wyLIbeiiXp3wVH6HV7" alt=""><figcaption></figcaption></figure>


# A step is complete when

To define conditions for completing a step, you should use the right column. The default step completion condition is pressing the NEXT or PREVIOUS buttons. You can also disable these buttons and force the visitor to complete a task to proceed to the next step.&#x20;

Let’s demonstrate each possible item with an explanation.


# The Next button is pressed

If this option is enabled, the Next button will appear inside the bubble and once the user clicks on it, the current step will be completed and the user will proceed to the next step. You can disable this step so that the user will not see the Next button.


# The Previous button is pressed

In some cases, you might need your users to go the previous step to complete a task, or you simply want to give your users the option to move freely. If you choose this option, the Previous button will be visible inside the bubble and the current step will be completed when the user clicks the button.

<figure><img src="/files/L1JyuUzEsvavYxazNRxM" alt=""><figcaption></figcaption></figure>

***Note:** Click the gear icon to edit the appearance of the Next or Previous buttons*

<figure><img src="/files/g5W6D10CSIxCigLF3N7A" alt=""><figcaption></figcaption></figure>


# Interaction Selection

In addition to the default Next or Previous buttons, the user’s mouse events can be used as a trigger to mark the step as complete. Using this method, you can define what type of interactions will be accounted for so the users can proceed to the next action/step. Ensure that the slider is enabled to choose an option from the interaction dropdown.

<figure><img src="/files/CFcGD6Np22qDIvJMPEUH" alt=""><figcaption></figcaption></figure>


# Mouse Click

<figure><img src="/files/OWWV74p36vKj47A6pKh3" alt=""><figcaption></figcaption></figure>

Clicking on an element triggers the event (in this case, the event is completing the current step). When a user clicks on an any element, the following three mouse events occur:

1. The **mouse down** command fires when you depress the mouse button on the element
2. The **mouse up** fires when you let go of the mouse button on the element
3. The click is fired when one **mouse down** and one **mouse up** are detected over the same element&#x20;

***Note:** You can combine the Next and Previous buttons and any of the triggers demonstrated here, so that the user will have an option either to complete the task at hand or skip it.*

<figure><img src="/files/plgTm3Y0iuf1Enjsif0M" alt=""><figcaption></figcaption></figure>


# Mouse Down

The mouse down event occurs when the user presses a mouse button over an element **(does not necessarily need to release the mouse click over the same element).**

1. The mouse pointer goes over an element
2. The mouse button is clicked over an element

<figure><img src="/files/mfSkCDtvOgTbVUgWSChA" alt=""><figcaption></figcaption></figure>

So, when the user’s mouse goes over the element within the application, the user proceeds to the next step. If the Next button is disabled, the user does not have any choice but to select the element.&#x20;

***Note: Mouse click** and **mouse down** are different. The **mouse click** event is fired only when a full click happens. Full click is when the mouse button is pressed and released while the pointer (mouse) is still over the same element. The **mouse down** fires as soon as the button is initially pressed even if the user does not release it or releases it over a different element.*


# Mouse Over

Also called **mouse over, mouse hover**, or **hover over**, this is a graphical control element that is activated when the user hovers the pointer over a trigger area, usually with a mouse, or with a pen or finger (for touch screen devices). It is enough to bring the pointer over the selected element to complete the step.

<figure><img src="/files/eXT4lDLofIA2VAZ8BDZR" alt=""><figcaption></figcaption></figure>

So, when the user’s mouse hovers over the selected element, the user proceeds to the next step without needing to click. We recommend making users’ jobs easier whenever and wherever possible by using this feature.


# Present

Present refers to the selected element being present on the user’s screen. If the selected element is present the user will automatically proceed to the next step. You can use this function to automate the guidance, i.e. If the element is present>continue to the next step.

<figure><img src="/files/usHm4flzzbovw40WSKDe" alt=""><figcaption></figcaption></figure>


# Unpresent

The Unpresent attribute takes into account that the selected element does not exist on the user's screen (visible or not).

<figure><img src="/files/K8lmf90YeMpUwnLSxvji" alt=""><figcaption></figcaption></figure>

This helps you create a flow that may require certain variables to not exist. For example, to allow the user to proceed to the next step, the element needs to be deleted. Only when the user deletes the element (it becomes unpresent), can they proceed to the next step.


# Spot

Spot defines a selected element to be rendered and made available for the user.

<figure><img src="/files/QttEhnGiIIoSHB5ElciV" alt=""><figcaption></figcaption></figure>

For Spot, it can be available on the screen (which may be in a drop-down menu or on a lower portion of the screen where the user may not have seen it yet). This means the element can be spotted if the user wants, searches, or scrolls for it. The difference between Spot and Present is that Present may or may not be a visible element. Spot needs to be visible.


# Unspot

This is similar to Unpresent. Whereas for Unpresent, the element should not exist on the page, for Unspot the element might be present but not rendered for the user.

<figure><img src="/files/xMZoWLnyJhf1jby2B1oJ" alt=""><figcaption></figcaption></figure>


# Spot in Viewpoint

For this rule, the element must be brought to the user’s actual screen and may not be folded away in a drop-down menu or on the other parts of the screen where the user cannot see. So, for the step to be considered as complete, the selected element must be brought to the users’ viewpoint. Consider using this option for long pages where the user needs to scroll down or unfold some menu items to reveal the element.

<figure><img src="/files/Y75hW8GGp2bAtk64ktoy" alt=""><figcaption></figcaption></figure>

***Note:***

<figure><img src="/files/vPRwbWO8Tmi1RN37lGhV" alt=""><figcaption></figcaption></figure>


# Fill/select a value and move off

You can use this as a trigger condition when the user is expected to provide data in an empty cell. Whenever the user enters a value (this can also be a predefined value), the step will be considered as complete and the user will proceed to the next step either by clicking outside the element area, pressing the Tab key, or pressing the Enter key.

<figure><img src="/files/0yLksAjzkUP9sbdQnyNn" alt=""><figcaption></figcaption></figure>


# Element loses focus

This trigger will complete the step and allow the user to proceed to the next step when the user’s pointer/mouse moves away from the selected element.

<figure><img src="/files/Pip9uqNs1VKnzPVHdEHY" alt=""><figcaption></figcaption></figure>

***Note:** This trigger should only be used on the steps where the user is expected to provide data.*


# The gear icon: Defining different element

Completion triggers can also be defined for a different element than that of the step element. To do this:

1. Click the Gear icon alongside the trigger you have chosen. This will expand further options
2. Click **Reselect** to choose a different element
3. **Save** your changes

***Note**: You can also click Preview to see how the step would appear to application users.*

This feature comes in handy when you need to bring the user’s attention to a different part of the application where their action or confirmation is required, such as showing where to fill in the information.

<figure><img src="/files/wmH8s9LnwPmISMG3bPst" alt=""><figcaption></figcaption></figure>


# The Gear icon: the Ripple effect

You can also alter the settings of the triggers, such as the appearance. To access:​

1. Click the Gear icon alongside the trigger you have chosen. This will expand further options&#x20;

<figure><img src="/files/kWPFEUl3gZj79zFFR47C" alt=""><figcaption></figcaption></figure>

2. Scroll down to the Appearance section. From the effect dropdown, select **Ripple**
3. **Save** your changes

***Note:** This effect draws the user’s attention to a specific part of the application*

<figure><img src="/files/2i8w4xlfBMNjAYxHFv2W" alt=""><figcaption></figcaption></figure>


# Defining length of time step appears for

If you want a step to only appear for a limited amount of time before disappearing, you can utilize this feature. Once the defined time is over, the step will be considered completed and the user will proceed to the next step.

1. Toggle the **Elapsed** feature on and enter a number for the amount of time that should elapse before the step gets completed
2. **Save** your changes

<figure><img src="/files/VdoBvnAZJ1HZKtR0d4im" alt=""><figcaption></figcaption></figure>

We recommend using this feature for the steps where only the users’ attention is required (without any action needed). This will speed up the overall completion process as once the time is up the step will complete itself and the user will proceed to the next step.

***Note:** If you are planning to use this functionality, keep in mind the **application or page load time** influenced by the users’ internet speed, computer processing power or number of simultaneous apps running. If you set the time elapsed too short, the step will complete before the user gets to interact with it.*

***Note:** You can also choose for the step to end immediately by toggling on the option.*


# Receiving custom external command

Toggle this feature on and define a command which the user needs to provide to be able to proceed to the next step. Remember to **Save** your changes.

<figure><img src="/files/GL7nYG1NXpBbixmz7zJc" alt=""><figcaption></figcaption></figure>


# Step will send external command

Toggle this feature on and define an external command which will be sent once the user interacts. Remember to **Save** your changes.

<figure><img src="/files/UWvZFyd0NjU2Lbhwsp7j" alt=""><figcaption></figcaption></figure>


# Persist step after completion

This option ensures that the step will continue to trigger even after it has been completed. From the dropdown, you can choose the action that will allow the step to persist. Remember to **Save** your changes.

<figure><img src="/files/9FZYNebRj7x574SyRni8" alt=""><figcaption></figcaption></figure>


# Using Journeys and Rules

Journeys enable you to assign several specific Guides to an objective (eg: User Onboarding). The progress of the Journey is available for the end user within the Context Help panel, informing them that they have guidance to complete. In the Adopt Console you can create new Journeys and their default behaviour, whilst assignment of a Guide to a specific Journey is controlled within the individual Guide settings.&#x20;

<figure><img src="/files/OGQsp9H8qGBzW7832gCa" alt=""><figcaption></figcaption></figure>

The Rule Engine is an Adopt feature where you can define rules to check all kinds of conditions, such as elements on the screen, the URL, the date and time, or even variables in your software. Adopt then uses these created logic statements to initiate actions or enable features only when the rule conditions are evaluated as true. Creating effective rules allow you to make Adopt responsive and contextual for your users. Contextual Guidance is content in the right place, at the right time, to the right audience, all of which can be established with Adopt Rule Engine.&#x20;


# Accessing Guide rules

You can create different rules for generic visitors and for application users separately. For example, you can set up a selected guide so it starts when the user is on a particular URL. To set it up;

1. Sign in to the Management Console with your credentials
2. Click on the name of the Space you want to work on
3. Click **Guides** from the menu pane on the left
4. Click **Open in Editor** to open a guide in editor mode
5. Open **Guide Settings**

<figure><img src="/files/9DOSUV8Zt3XHDGAJInwE" alt=""><figcaption></figcaption></figure>

6. Click the **Rules** tab

<figure><img src="/files/rtHzh4tTAqsZeiOjJZoz" alt=""><figcaption></figcaption></figure>

7. Click the **+** icon for either Identity or Visitor&#x20;

***Note:** You can define separate settings for application users and generic visitors. The left column represents the users identified by their identifiers, and the right column represents the visitors to the site.*


# Configuring Guide rules

Adopt Guide rules can be configured either within the Editor or Management Console, they provide personalized guides to users if the rules are set up correctly. For instance, you can create a rule if a user has already seen or completed a guide, then the guide will not be shown to them. This will decrease the possibility of being bothered by redundant and repetitive content.&#x20;

The most common rules you can set up for your users are detailed below;

<figure><img src="/files/381bIbzU1wBXv6yCZ5BW" alt=""><figcaption></figcaption></figure>

**Do not start automatically**&#x20;

This rule is required if you only want the Guide to be launched via the Context Help panel. Without this rule, your guide will launch automatically based on page/element/trigger detection.&#x20;

**The user has not seen the guide**&#x20;

When you set this rule, the guide will be shown only on the user’s first login to the application. The guide will not be shown again after the first visit when Adopt determines the user has seen it already.&#x20;

**The user has not yet completed the guide**&#x20;

When you set this rule, the guide will only appear to those who haven't yet completed it.

**The number of times the user has seen the guide**&#x20;

With this option, you can stop displaying the guides after a certain number of times the user has seen the guides.&#x20;

**The number of times the user has closed or completed the guide**&#x20;

As some users prefer not to use guides and close them, you can define a number here, after which the guides will not be displayed. Adopt would still track them down.

**The user faces the guide**&#x20;

Schedule your guides to only be visible before, after or on a specific date. This allows guides to only be available at dates within the organizations calendar (eg: End of quarter objectives).

**The number of times the user has visited**&#x20;

With this option, you can stop or start displaying the guides after the same user does a certain number of visits. Adopt will read the user’s digital footprints, follow their progress, and stop guiding them. You can as well use;&#x20;

• ... is more than (or is not less than) which will start showing the guide after a certain number of visits. \
• ... is less than (or is not more than) which will stop showing a guide after a certain number of visits. \
• ... is exactly - which will display the guide on the specific visit. • ... is not exactly - which will display the guide all the time except on a specific visit.

**The user has seen the related guide**&#x20;

You can use this option if you would like some guides’ display to be conditional and depend on other guides’ visibility. This rule forces the user to at least see the guide but does not force them to complete it until the end.&#x20;

**The user has completed a related guide**&#x20;

You may choose to make it so that some guides’ display is conditional and dependent on the completion of others. You may have guides created for different levels. It normally isn't the best idea to make all the guides available to everyone. We aim to incrementally build up knowledge. To accomplish this, you can use this rule to sequence the guides from basic to more advanced, where a user needs to finish one guide before moving up to a higher level.

***Note:** You can create many rules and tie them to action. However, for that action to happen and be available to your users; all the combined rules need to be fulfilled. So the rules are tied to each other with **AND** not **OR** operators.*


# Using Journey Tracker

**Journey Tracker** aids system users or visitors by providing an easy visualization of the steps they have completed. Users can get easily puzzled and frustrated when they do not know how far away the end of the task is, so the Journey Tracker provides encouragement as users can see their progress during a dynamic process.

The Journey Tracker indicates progress along a user’s application journey, and encourages them to continue by providing a visual indication of the progress made and the number of tasks yet to be completed. This feature itself improves user engagement, reduces anxiety, and increases your application’s conversion rate.

## Enabling Journey Tracker

1. Sign in to the Management Console with your credentials
2. Click on the name of the Space you want to work on&#x20;
3. Click **Guides** from the menu pane on the left
4. Click **Open in Editor** for the guide where you want to turn the Journey Tracker on

<figure><img src="/files/L0fGI2OylM4VFbvvZ9Ng" alt=""><figcaption></figcaption></figure>

&#x20;5\. Open **Guide Settings**

<figure><img src="/files/7sep0THPDz6q6e5AYYxR" alt=""><figcaption></figcaption></figure>

6. Click on the **Track** tab&#x20;
7. Select the box next to **Track** to turn on the Journey Tracker

<figure><img src="/files/dXaFUT3IsThz7lXfqHpe" alt=""><figcaption></figcaption></figure>

### Displaying the Journey Tracker as a Separate Widget Beside the Adopt Context Help

Once you have turned on the Journey Tracker in the Guide Settings, you can **Save** at this point. However, if you save your settings and don’t select the **Embed in Context Help** box, the Journey Tracker will be visible to the users as a separate widget beside the Context Help, and will disappear when the Journey is completed.

### Embeding Journey Tracker into Context Help

If you would like the Journey Tracker to be included in Adopt Context Help instead of a separate widget, select the **Embed in Context Help** box.

<figure><img src="/files/n0G0PoZWFMOTvX2N01Oo" alt=""><figcaption></figcaption></figure>

As the user progresses through the guides, the completion rate inside Context Help will adjust accordingly.

<figure><img src="/files/BJT4eCkxA8rKMaa9kpD2" alt=""><figcaption></figcaption></figure>

***Note:** The default behavior for completed guides in Journey Tracker is that they are marked as complete and disappear from Context Help. However, this can be changed in the Adopt console if you would like to give users the option to restart the completed guides.*

***Note:** Journey Tracker cannot be restarted in the Adopt console; only the default behavior can be changed.*

## Setting up the Journey Tracker

Once you have turned on the Journey Tracker in the Guide Settings and chosen either a separate widget or embedding in Context Help:

1. Provide an appropriate **Title** which will be visible to the end users
2. Choose an appropriate identifier from the **Journey tracker** dropdown\
   The Journey Tracker will tag them all together as a batch if you choose the same identifier for the selected guides. This enables you to create multiple Journey Trackers by defining different identifiers and categorizing them appropriately. For example, some guides will be part of Journey Tracker A, and some guides will be part of Journey Tracker B.
3. Journey sequences can be defined by assigning a number in the **Order in journey** field. The smaller the number, the higher the priority

***Note:** Consider assigning a negative number to increase the priority. For example, -1 would have higher priority than +5. If you have created multiple Journey Trackers, you can sort them in the Adopt Context Help widget by defining a number for Order in the journey. The lower number gets listed higher.*

4. Create rules, such as if you want Journey Tracker visibility to depend on an element on the same page;\
   a. Select the **Include guide in Journey Tracker when the element is present** box\
   b. Click **Reselect** to choose an element

<figure><img src="/files/Kz5W3jP4U1605wKPMLa5" alt=""><figcaption></figcaption></figure>

This way, the Journey Tracker will only be visible when the chosen element is visible.

***Note**: For further information, refer to Adopt’s **Rule Engine Possibilities** guide to learn how to create rules that will define when, for whom, with which dependencies the guides will be visible.*

5. **Save** your changes

The **Journey Tracker** will then be **visible** to the application users and visitors. The users or visitors can now track their progress via the Journey Tracker.

***Note:** As the Context help is not visible while the Adopt Editor is running, you should turn off the editor to see Context Help in Agent Mode. To do this, click the checkmark icon in the Guide Settings.*

<figure><img src="/files/fVBjoSUwJq4xbKRNRUky" alt=""><figcaption></figcaption></figure>

## Managing a Journey

As explained above,  you can create multiple Journey Trackers by defining different Journey Tracker identifiers and categorizing them appropriately. As in, you can include some guides that will be part of ”Journey Tracker Example A,” and some guides will be part of ”Journey Tracker Example B. ” To create such Journey Tracker Identifiers:

1. Sign in to the Management Console with your credentials
2. Click on the name of the Space you want to work on&#x20;
3. Click **Journeys** from the menu pane on the left
4. Click the **+ Create Journey** button

<figure><img src="/files/nly3z2on8WKzTatmDeo1" alt=""><figcaption></figcaption></figure>

5. Provide an appropriate **Title** for the new Journey Tracker identifier&#x20;
6. Choose an **Action after journey is complete** from the dropdown. **No action** means that the Journey Tracker will disappear once the journey is complete , or you can choose to **leave the journey tracker visible**&#x20;
7. Choose an **Action after a tour in a journey is complete** from the dropdown. **No action** means that the Journey Tracker will remain visible, or you can choose to **open Context Help**&#x20;
8. Click the **Create** button

<figure><img src="/files/zrWaeVlRO1mx4YdywUov" alt=""><figcaption></figcaption></figure>

***Note:** There will be a **Your journey was created** message in the bottom right corner of the screen*

## Deleting a Journey

1. Sign in to the Management Console with your credentials&#x20;
2. Click on the name of the Space you want to work on&#x20;
3. Click **Journeys** from the menu pane on the left&#x20;
4. Click the ![](/files/Li5oGl6N2EEMKZHnsuZC) in the Actions column of the Journey you want to delete

<figure><img src="/files/u09yQD7ItGasZ6Wl62Xu" alt=""><figcaption></figcaption></figure>

5. Confirm the deletion by clicking **Delete**

<figure><img src="/files/HcwYH44Ms710S9D0C733" alt=""><figcaption></figcaption></figure>

6. If you change your mind, select **Cancel** to stop the deletion

***Note:** You will see a message confirming the deletion on the bottom right corner of the screen*


# Controlling Journey Tracker and Context Help behavior

## **Journey Tracker and Context Help**

Under the Guide Rules, you can set up the conditions under which the guide will be part of the Journey Tracker or Context Help. If and when these conditions match, then the preset behavior will be applied.&#x20;

The guide/tour will be available in the Journey Tracker only for visitors who visited the page more than two times. In other cases, the guide/tour will still be part of the Journey Tracker, but it will be disabled.&#x20;

Journey Tracker and Context Help both have three options you can separately set. These are **on-off**, **disabled**, and **invisible**. You can choose one of six combination options listed below. For the created rule;

1. Journey Tracker; On, or Off
2. Journey Tracker; Disabled
3. Journey Tracker; Invisible
4. Context Help; On, or Off
5. Context Help; Disabled
6. Context Help; Invisible

## **Journey Tracker Rules**

1. **Disabled** \
   If you turn the Journey Tracker on and select the disabled option, then the guide will be visible and disabled (greyed out) as long as the rule matches the current user's context. The user will be able to see but will not be able to select it.
2. **Invisible** \
   If you choose the invisible option for the Journey Tracker, the guide will not be shown to the user.

&#x20;For further information, refer to Adopt’s **Journey Tracker** guide.

## **Context Help Rules**

1. **Disabled** \
   If you turn the Context Help **on** and select the **disabled** option for Context Help when the rule is NOT evaluated as TRUE, then the guide in the tours section will be disabled (greyed out) but it will be visible. The rule is also related to the tours section in Context Help if disabled is chosen.
2. **Invisible** \
   If you choose invisible for Context Help and the rule is NOT evaluated as TRUE, then the guide in the tours section will be hidden. If the rule is evaluated as true, then the guide will be displayed in the tours section of Context Help.&#x20;

For further information, refer to Adopt’s **Context Help** guide.

<figure><img src="/files/brQTrC3BwMbf7muLQAnV" alt=""><figcaption></figcaption></figure>

Using the same example above; the rule is set up as the number of times the visitor has visited the application is more than two. If the rule matches, the guide will play automatically after a visitor has visited the page more than two times. Journey Tracker disabled means that after fulfilling this rule and after more than two visits of the page, the guide will be visible in Journey Tracker, but the user will not be able to select it (greyed out).&#x20;

To do that;

1. Open Guide Settings
2. Click on the Track tab
3. Tick the box for Track
4. Tick the box for Embed in Context Help
5. Save your settings

<figure><img src="/files/5962dBQjfJ4xsnSKRUV9" alt=""><figcaption></figcaption></figure>


# Using Content Localization

Content localization is a feature that gives your application users the option of being guided through the walkthrough screens in their local or preferred language. When running a digital adoption program, it is crucial to inspire confidence in the workplace and communicate in the language that users feel comfortable in.​

Adopt supports a multilingual environment. You can change the language to allow content editors to enter the text in the desired language.​

Adopt automatically checks if there is a translated version of the guides in the user’s language. If there is, then Adopt displays those guides to the user. If there is not, it displays the original language, called “fallback language.”​

***Note:** English is the default language for Adopt. If you want to guide your users through the app in other languages, follow the instructions below on adding languages, or check out the Guide Translation article for more information.*&#x200B;​

## Document Sections​

Click any of the below links to jump to that section of the document. ​

1. [Add a New Language​](/in-application-guidance/using-content-localization/adding-a-new-language)
2. [Add the Localized Content ​](/in-application-guidance/using-content-localization/adding-localized-content)
3. [Preview of the Steps in Different Languages](/in-application-guidance/using-content-localization/previewing-the-steps-in-different-languages)​
4. [Automate the Language Selection ](/in-application-guidance/using-content-localization/automating-the-language-selection)​\
   a.[ Let Adopt Read from the User’s Browser​](/in-application-guidance/using-content-localization/automating-the-language-selection/letting-adopt-match-languages-with-your-identity-api)\
   b. [Fallback Language​](/in-application-guidance/using-content-localization/automating-the-language-selection/setting-fallback-language)\
   c.[ Let Adopt Match the Guide’s Language with your Application Language​](/in-application-guidance/using-content-localization/automating-the-language-selection/aligning-guide-and-application-languages)​
5. [Change the Context Help Content to Reflect the Newly Added Local Language​](/in-application-guidance/using-content-localization/adopting-context-help-content-to-local-language)
6. [Change Guide Names to Reflect the Newly Added Local Language​](/in-application-guidance/using-content-localization/adopting-guide-names-to-local-language)


# Adding a new language

1. Sign in to the Management Console with your credentials
2. Click on the name of the application you want to work on&#x20;
3. Click **Settings** from the menu pane on the left
4. Click **Language** from the available Settings options
5. Choose the language you want to add from the dropdown menu
6. Click **Add**
7. Click **Apply** to save and use the new settings

<figure><img src="/files/BC1Nv9hBtuw3vMzIa6oa" alt=""><figcaption></figcaption></figure>

You can then add guides in the new language. This way, even if users are not proficient in the original application language, they can still use your application.


# Adding localized content

1. Sign in to the Management Console with your credentials
2. Click on the name of the application you want to work on
3. Click **Guides** from the menu pane on the left
4. Click Open in Editor for the guide that you want to add localized content to

<figure><img src="/files/gRrt9Ux9lRSaN3HUm3MS" alt=""><figcaption></figcaption></figure>

5. Hover your mouse over the step you want to access and click the gear icon to open **Step Properties**

<figure><img src="/files/jkbUG1MKMJWJXURiLkUB" alt=""><figcaption></figcaption></figure>

6. Click the **Content** tab
7. Choose the language from the **Content language** dropdown
8. Edit the Step Content by providing content in the chosen language
9. **Save** your settings

<figure><img src="/files/emDuD7PrMkYNnpMZkth1" alt=""><figcaption></figcaption></figure>

Localization of content will allow you to create guides to accommodate content for that language.

***Note:** Adopt does not automatically translate the step contents to the newly added language. You must add the translated content and there are two ways of doing this. Firstly, you can do it manually for each language, or secondly is via an import and export of the step's content. This way, you can download the guide’s content in CSV format, translate them externally into the desired languages and upload them back to Adopt.*


# Previewing the steps in different languages

While the Adopt Editor is open, you can preview how the content would be visible to your users in the different languages. If any change is needed, you can open the steps properties, make necessary changes, and save them.

1. In the Adopt Editor, click the globe icon
2. Choose the desired language from the list

<figure><img src="/files/lM4ryGqMEERe37Fy1486" alt=""><figcaption></figcaption></figure>

3. Click the step to preview it in the chosen language

<figure><img src="/files/Ng62dCWelHIrqk2t9HTF" alt=""><figcaption></figcaption></figure>


# Automating the language selection

When you have created your guides in different languages, you can automate the language selection so that Adopt displays each guide in the appropriate language. You can either use a language from the user’s browser or one of our Application Integrations to auto-select the correct translation.


# Letting Adopt match languages with your Identity API

This feature is available to customers who have setup an API configuration to source User Context (eg: Role, Language, Location) from a 3rd party provider (eg: Azure AD, Workday, Cornerstone, SAP etc).&#x20;

By enabling the steps below, the guidance language will match the configuration accessed via API.  For example: if a user's “Workday” language is set to French and their organization has configured Workday API integration for User Context. Then all the user's guidance will be in French.

1. Sign in to the Management Console with your credentials
2. Click on the name of the application you want to work on&#x20;
3. Click **Settings** from the menu pane on the left
4. Click **Language** from the available Settings options
5. In the **Read language** from dropdown, select Space Settings
6. In the **Localization is identified by dropdown**, select **User Provided**
7. Click **Apply** to save&#x20;

<figure><img src="/files/g17yTfpNu5UPmX30rD4M" alt=""><figcaption></figcaption></figure>

***Note:** Adopt recommends adding local languages so that your application users can be guided in their preferred language. However, keep in mind that you will need to add content to the guides for each language(s) that you add.*


# Setting fallback language

If the user’s language is not in the list of offered languages, Adopt displays the guides in the predetermined **fallback language.**

***Note:** Adopt recommends that you add as many languages as you wish (depending on the application user or visitor profiles) while setting the fallback language as the most commonly used language. The fallback language can only be selected from the default language or the languages you have added. If you need to choose a different fallback language than what is available in the list, you must add it first.*&#x20;

You can set the fallback language by selecting it from the dropdown menu amongst the languages added.

<figure><img src="/files/blikWPwSng9B2AiJFtyd" alt=""><figcaption></figcaption></figure>


# Aligning guide and application languages

Use this option if you want to the guide languages to match the application language. By enabling this, the language will be the same as the application regardless of the user’s browser language or their system settings.&#x20;

1. Sign in to the Adopt Management Console with your credentials
2. Click on the name of the application you want to work on
3. Click **Settings** from the menu pane on the left
4. Click **Language** from the available Settings options
5. In the **Read language from** dropdown, select space settings
6. Click **Apply** to save and use the new settings

<figure><img src="/files/zkHVdgHs6wBeKvImT3dS" alt=""><figcaption></figcaption></figure>

7. There are six localization options listed under the **Localization is identified by** the drop-down menu. You can define where Adopt should find your application language settings by selecting one of these options: [Cookies](#cookies), [Local Storage](#local-storage), [JavaScript Variable](#javascript-variable), [CSS Selector,](#css-selector) [URL Query](#url-query), [URL Regex.](#url-regex)

<figure><img src="/files/lqW37vM7A1EcBwjsiLPn" alt=""><figcaption></figcaption></figure>

8. Paste the value into the corresponding area of the Adopt Console &#x20;
9. Click **Apply** to apply the settings

<figure><img src="/files/F1IWie0jTxQQQZJ9JCSH" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/gRiPt01ObGiMP1dihhyK" alt=""><figcaption></figcaption></figure>

From the six options listed above, there is just one you need to choose based on your application’s characteristics, then provide a path. Adopt will then read and learn your application’s language from that source and display the guides accordingly.

## Cookies

If your application’s language is locally stored in its cookies, find its path, and copy the name of the cookie and paste it to the Adopt Console.

1. Select **Cookie** from the **Localization** **is identified** by dropdown
2. To find the cookie, press the **F12** function key on the keyboard (or CTRL + Shift+ I key combination or right-click on the application window) and select **Inspect**
3. On the opened window, click the **Application** tab and expand the **Cookies** section
4. Click on the available cookie URLs and find the language cookie name from the table on the right
5. Copy the language cookie name&#x20;

## Local Storage

If your application’s language is stored in local storage, provide its name of the local storage property.

1. Select **Local Storage** from the **Localization is identified** by dropdown
2. To find the local storage key, press the F12 function key on the keyboard (or CTRL + Shift+ I key combination or right-click on the application window) and select **Inspect**
3. On the opened window, click the **Application** tab and expand the **Local Storage** section
4. Click on the available local storage URLs and find the language key from the table on the right
5. Copy the language key

<figure><img src="/files/p4gvVfCl8GlBnny7SltO" alt=""><figcaption></figcaption></figure>

6. Paste the value into the corresponding area of the Adopt Console&#x20;
7. Click **Apply** to apply the settings

<figure><img src="/files/ok4anbP1s9GOMf3RPTMW" alt=""><figcaption></figcaption></figure>

## JavaScript Variable

Use this option if the application’s language parameter is stored as a JavaScript variable. For example:**“window\.Xrm.\_applicationContext.DataSource.\_userContext.\_userSettings.\_formatInfoCultureName”** for Microsoft Dynamics 365 Customer service.

If you are not sure where to find it, you can contact your application manager.

1. Paste the value into the corresponding area of the Adopt Console
2. Click **Apply** to apply the settings

<figure><img src="/files/ZhnCmkBI7PEGToRoJ8wa" alt=""><figcaption></figcaption></figure>

## CSS Selector

In some cases, the language is displayed on the user interface of the application as an option that can be selected, either via choosing a country or language initials. In that case, you can define a CSS selector that selects that particular element and reads language from there. If your website or application has the same CSS language selector, you can find the language information in this way .&#x20;

1. Paste the value into the corresponding area of the Adopt Console
2. Click **Apply** to apply the settings &#x20;

<figure><img src="/files/HzuxqYXH9Ytcg19JlvnX" alt=""><figcaption></figcaption></figure>

## URL Query

A query string specifies values for parameters in a Uniform Resource Locator (URL). If your application’s language is stored in an URL query, provide the name of the URL query parameter, which holds the language value.&#x20;

<figure><img src="/files/UVgZGTL21p9Y4djVHNMl" alt=""><figcaption></figcaption></figure>

1. Enter the value into the corresponding area of the Adopt Console
2. Click **Apply** to apply the settings

***Note:** Please note that the language value should be provided as a lower case* [*with two digits country code*](https://en.wikipedia.org/wiki/List_of_ISO_3166_country_codes)*. For example, sk - for Slovak language or en- for the English language. All other formats used would lead to Adopt not being able to read the language properly. Some invalid examples to avoid: en-US, English, ENG.*

<figure><img src="/files/f08LY0YbL0dINoSyd6Dw" alt=""><figcaption></figcaption></figure>

## URL Regex

You can as well guide Adopt to read it from your application’s URL. by using regular expressions (regex). Read more [here](https://regexone.com/).

<figure><img src="/files/ctq5W1R4gHkbXLWubggT" alt=""><figcaption></figcaption></figure>

For example, <\<app\_domain>>/(.\*) will match "en" language from <\<app\_domain>>/en URL"

That means, <https://www.example.com/(.\\>\*) will determine language as a series of characters coming after <https://www.example.com/>

1. Enter the value into the corresponding area of the Adopt Console
2. Click **Apply** to apply the settings

<figure><img src="/files/J8j3Frnb78dxMnHxcbEi" alt=""><figcaption></figcaption></figure>


# Adopting Context Help content to local language

When you introduce a new language to Adopt, Context Help content needs to be provided in the recently added language as well. If you don’t, your guides will still be working and guiding your application users or visitors properly; however, Context Help items will have blank spaces and guide names will be displayed in English.

To provide Context Help content in the newly added language:

1. Sign in to the Management Console with your credentials
2. Click on the name of the application you want to work on
3. Click **Context Help** from the menu pane on the left
4. From the **Settings** tab, go to the top right corner of the screen and click on the downward-pointing arrow corresponding to **Content Language**
5. Choose the newly added language from the dropdown menu
6. Replace the English placeholders with the translated content
7. Click **Save** to save and use your new settings

<figure><img src="/files/TQ6AjLHIopqPJWiPbQBN" alt=""><figcaption></figcaption></figure>


# Adopting Guide names to local language

When you add a new language, guide names will not be automatically translated (as there is a need for a professional translation, preferably by a native). Instead, they will be displayed in English.

To provide guide names in the newly added language;

1. Sign in to the Management Console with your credentials
2. Click on the name of the application you want to work on
3. Click **Guides** from the menu pane on the left
4. Go to the top right corner of the screen and click on the downward-pointing arrow corresponding to **Content Language**
5. Choose the newly added language from the dropdown menu
6. Click **Edit** on the guide where you want to change the name

<figure><img src="/files/wrrcnJ4TcrxINdegVme1" alt=""><figcaption></figcaption></figure>

***Note:** The guide names appear in English, even though the content language has been changed. This allows you to distinguish between guides as you amend their names.*

7. Enter the translated guide names and descriptions
8. Click on the **Save** button
9. Repeat the process for all the guides

You can test the results by logging in to the application using the newly created language and see how the Adopt guides appear to those who use that language.


# Translating Guide content

This functionality is useful if you have already created several guides in one language, and want to recreate those guides in different languages. This would potentially mean editing them one by one and would take some time and effort. With the Translation feature, you can export the guides and their steps into either a Comma-Separated Values (CSV) or Microsoft Excel file, then make the required Translation changes before re-importing the files back to the Adopt Console.

**Note:** Tooltip guides are not currently included in the export/import process.

## Exporting

1. Sign in to the Management Console with your credentials
2. Click on the name of the application you want to work on&#x20;
3. Click **Settings** from the menu pane on the left&#x20;
4. Click **Language** from the available Settings options &#x20;
5. Scroll to the bottom of the page and from the Translations section, click **Export**&#x20;

<figure><img src="/files/sX3KALs1MAE3HZgLcNPI" alt=""><figcaption></figcaption></figure>

6. For CSV file downloads to your computer, you will need to **Extract** the contents from zip file

## Editing

1. Open the xlsx or .csv file within a Spreadsheet application such as MS Excel&#x20;
2. The first part includes the original information provided by the Adopt editor

<figure><img src="/files/fyONiP2YD9w9lsr2Zptz" alt=""><figcaption></figcaption></figure>

3. Fill in the translated information of the original guide into the spaces between the brackets “><”

<figure><img src="/files/VXLNwSEYyFqRXa4QhG5N" alt=""><figcaption></figcaption></figure>

4. Repeat the steps above until you have provided all the guide’s steps in the additional language&#x20;
5. Save your changes

## Importing

* Sign in to the Management Console with your credentials&#x20;
* Click on the name of the application you want to work on &#x20;
* Click **Settings** from the menu pane on the left&#x20;
* Click **Language** from the available Settings options&#x20;
* Scroll to the bottom of the page and from the Translations section, click Import &#x20;
* Select the .csv/.xlsx file from your computer that you have edited


# Core Analytics


# Introduction to Core Analytics

## Overview

Maximizing software adoption can be challenging, especially when users have to switch between multiple applications and deal with their different interfaces. Users lose confidence, administrative burden increases, and adoption rates begin to decline.&#x20;

Through monitoring how users interact with your in-app guidance, you can quickly identify where improvements and further support may be needed. Using this data to target your adoption efforts means you can deploy guidance where it will have the greatest impact.

## Overview Dashboard and Key Insights

The Overview dashboard shows stats from all your supported applications in one place.

Key Insights provides a focus on business outcomes. Each tab offers a quick way of visualizing guidance usage to help make fast business decisions.

<figure><img src="/files/YdIyKr0n24MWxYsOeFTq" alt=""><figcaption></figcaption></figure>

## Targeting Dashboard & Targeting Insights

The Targeting dashboard exposes mapping and configuration information, as well as Adopt consumption, all on one page. Using this, you can clearly identify users who are targeted for specific content, as well as the engagement level, or see where Adopt isn’t currently targeted within your application.

## Adopt Support & Intervention Insights

The Adopt Support dashboard shows how well your support content within Adopt’s modules is performing, with the ability to drill down using Intervention Insights. Use filters to search by module or individual content.

## Content Export

The Content Export dashboard shows an output of specified content which can be downloaded in Excel or CSV format. Choose to view by single rows per content item or by Targeting type.

## Benefits

* “One click” away from actionable insights
* View all your configuration within one Dashboard, which can be exported to MS Excel or CSV format
* Dashboards are focused on business outcomes
* Key Insights within each Dashboard to increase focus on usage, targeting and recent content changes
* Enhanced filtering capabilities - refine dashboards and quickly view relevant information, all in one place


# Core Analytics Key Concepts

The purpose of the Core Analytics module is to evaluate system utilisation data, identify support needs across your SaaS application, interrogate individual business processes and assess content and communication effectiveness both as part of retrospective analysis and future activity planning.

This document aims to support the interpretation of Core Analytics:

* **Page Loaded Event** - This event fires every time a web page loads, or for Single Page Application, every time the Adopt platform updates its context
* **Adopt Loaded Event** - This relates to a group of events, one for each Module, that determine if an Adopt Module has loaded for the user on a page e.g. Split Screen Loaded (means SS is made available to the user)
* **Intervention** - Is the term used to group all Content I.e. Tooltips, under one description to make it easier to interpret the items created in, or loaded into, Adopt
* **Adopt Viewing Event** - This relates to a group of events that determine if a user has viewed or clicked on the specific Intervention e.g. Content Viewed (means a user has clicked on a piece of Content in order to view it)
* **Users** - A unique count of users, so a user is only counted once in the context of the Filters or Dimensions that are applied to the Page
* **Targeted User %** - A calculation for the Number of Users who have an Adopt Loaded Event DIVIDED BY the Number of Users who have a Page Loaded Event
* **Adopt User %** - A calculation for the Number of Users who have an Adopt Viewing Event DIVIDED BY the Number of Users who have an Adopt Loaded Event
* **Adopt Views** - The number of times we have recorded an Adopt Viewing Event
* **Adopt Users** - The number of users we have recorded having an Adopt Viewing Event
* **Duration** - The Number of seconds between an Adopt Viewing Event and the next Event e.g: \[Adopt Viewing Event] user 1234 views an item of Content at 09:48:00 \[Next Event] user 1234 has a Page Loaded Event at 09:49:30 Duration is calculated at 1 minute 30 seconds
* **Av. Duration** - The Average Duration WHERE the Duration is BETWEEN 3 AND 1800 seconds. We apply this clamping technique to mitigate the impact of users becoming inactive on their device, where we would be unable to detect next event and which would exaggerate the average.
* **Adopt Engagement %** - The Number of Adopt Views which had a Duration of >=3 seconds (for Smart Pages and Content) OR >= 2 seconds (for Tooltips) DIVIDED BY The Number of Adopt Views


# Overview Dashboard

The Overview Dashboard shows usage across your Adopt Supported Applications. Use the Filtering to focus on a specific Domain or Time Period for analysis. The Key Insights section gives you simple to access Insights about your DAP.

## Adopt Supported Systems

<figure><img src="/files/EAJx4CADmOd0ZitTG3Fe" alt=""><figcaption></figcaption></figure>

**What it shows:** Where Adopt is enabled using the Page Loaded Event Data. The System Names are defined by the Adopt Platform and the Domain Names are detected using the URL captured in the events data.

**How it’s used:** Use this section to understand how many users have accessed these applications (over the selected time period) and what % have been Targeted by the Adopt platform e.g. one of the Adopt Modules has been loaded to the page ready for them to view. This will also show what % of the Targeted Users have also Interacted with the Adopt Interventions.

**Common Question:** This won’t always be 100% as we may have users who have visited the application so we recorded an event, but no Adopt Module was either targeted for them (because of Role, Language, Location OR the System Page they landed on wasn’t Targeted with anything) OR the user visited the page but NO Adopt Loading Event was recorded (this could be an infrastructure issue or the user left the page too quickly and before Adopt loaded).

## User Profiling

<figure><img src="/files/8x9xoXH8BogJr2NAXxHI" alt=""><figcaption></figcaption></figure>

**What it shows:** This chart shows the % of Users split by the available Profile Data within Adopt. Role, Language and Location (from the Adopt platform) and Browser, Country & Operating System (from the Browser and user IP Address).

**How it’s used:** This data can be used to understand the distribution of users that have an enabled extension for a given System (over the selected time period).

**Common Question:** Why I am seeing users with a Role of X, we don’t pass that Role to you anymore. The answer is Analytics is a historic view of what has happened, therefore we capture the data as it was at the time and so this is expected. If we previously classified someone as Role X and now as Role Y and the report date period crosses this change, they may naturally appear twice in this chart under both Roles.

## Key Insights

**Overview of Adopt Targeting**

* This view shows a list of all System Pages where we have seen an Adopt Loading Event in the selected time period. It is ranked by the highest Number of Users we have seen by System Page
* It can be used to understand where the Adopt Application was targeted for the selected time period

**Overview of Adopt Usage**

* This view shows a list of all Interventions which have had an Adopt Viewing Event in the selected time period. It is ranked by the highest Number of Adopt View we have seen by Intervention
* It can be used to understand what content is most frequently being consumed

**Pages without Targeting**

* This view shows all System Pages that have NOT had an Adopt Loading Event in the selected time period. It is ranked by the highest Number of Users we have seen by System Page
* It can be used to determine which System Pages have high user numbers (or high durations) but there is no targeted content supporting users

**Recently Updated Content**

* This view shows any Intervention that has an Updated Date in the selected time period

**Pages with Usage Change**

* This view shows any System Pages which have seen a change in the Number of Users vs. the Previous Period of +/- 20%. e.g. if you selected Last 100 Days, then we would be comparing the Number of Users between 101-200 Days ago vs. 1-100 Days expressed as a % change

**Content with Usage Change**

* As above but relating to Interventions and using Adopt Views rather than User Numbers

**Targeted Content with No Views**

* This view will show any Content that is currently showing as Targeted in the configuration data (e.g. it is published and mapped to a System Page), but in the time period selected has No Adopt Views


# Targeting Dashboard

The Targeting Overview Dashboard allows you to see how content is performing across the targeted pages in your Adopt supported application.

**What it shows:** This shows the Number of Users that have accessed each System Page in the selected time period, what % of them have been Targeted and what % of those who were Targeted have Used Adopt

**How it’s used:** This data can be used to understand how the current targeting across an application is configured and at a detail level, which profiles are most likely to be interacting with Interventions on the page

**Common Question:** Why I am seeing only 29% of users Targeted on the ‘Time Off Balance’ Page (in the example here). By selecting on that row (or applying a Filter on the top of the page). You will see the Targeting Insights highlight which User Populations have been targeted. In this example Managers have been Targeted but not HR / Employees

## System Pages

<figure><img src="/files/tUBXGAKKlwkKZnUXZU3q" alt=""><figcaption></figcaption></figure>

**What it shows:** This shows the Number of Users that have accessed each System Page in the selected time period, what % of them have been Targeted and what % of those who were Targeted have Used Adopt​.

**How it’s used:** This data can be used to understand how the current targeting across an application is configured and at a detail level, which profiles are most likely to be interacting with Interventions on the page​.

**Common Question:** Why I am seeing only 29% of users Targeted on the ‘Time Off Balance’ Page (in the example here). By selecting on that row (or applying a Filter on the top of the page). You will see the Targeting Insights highlight which User Populations have been targeted. In this example Managers have been Targeted but not HR / Employees​.

## Targeting Insights

#### Profiling View

* This view shows you how Targeting and Adopt Usage varies by User Profile - you can use the filtering on the right hand side to switch between profiles
* This view can be helpful for determining if certain User Profiles aren’t being targeted on a page and also understand the dynamic of which users are most likely to be accessing the selected page

**Adopt Support View**

* This view highlights all of the Interventions that have been viewed whilst users were on the selected System Page

***Note:** Through Split Screen, Users may have searched for, and viewed, Interventions (PDF/Video) that weren’t directly targeted to the system page*

**Targeting Detail**

* This view will show you which Interventions are currently targeted at the selected System Page
* It is particularly useful to quickly assess targeting configuration across all Adopt Modules


# Adopt Support Dashboard

The Support Overview Dashboard allows you to see how your targeted Support Content is performing across applications.

<figure><img src="/files/Vywe5HlDKeExy4RupB2Q" alt=""><figcaption></figcaption></figure>

**What it shows:** This shows the Number of Views and the Number of Users that have accessed each Intervention in the selected time period. It also shows the Adopt Engagement % and Av. Duration for that Intervention

**How it’s used:** This data can be used to understand how each Intervention is performing. There are extensive filters to allow the admin to focus on Module, Content Types, System Pages, Date the Interventions were added or updated

**Common Question:** What it the Adopt Engagement % (please see reference at the top of the page)

## Intervention Insights

**Profiling View**

* This view shows you how Usage varies by User Profile - you can use the filtering on the right hand side to switch between profiles
* This view can be helpful for determining if certain User Profiles are more likely to be engaging with the Intervention

**View Detail**

* This view highlights any greater granularity that there is for this Intervention, for example on a Smart Page it will show the buttons that have been clicked, on a Trail it will show the different Trail Steps, on a Validation Tooltip it will show the Validation results

**Targeting Detail**

* This view will show you where this Intervention is currently targeted by System Page, Role, Language and Location
* It is particularly useful to quickly assess targeting configuration across all Adopt Modules


# Content Export

The Context Export Dashboard shows the Adoption Interventions configured within your DAP. The configuration data is updated on a daily basis and shows content targeting configuration data as at the previous day. You can export the content configuration data by clicking the 3 dots at the top right hand corner of the data-table.

## Adopt Support Status - (Active / Inactive)

* Active Status is present when an Adoption Intervention is set as Published.
* Inactive Status is present when an Adoption Intervention is set to anything other than Published.

## Targeting Status - (Active / Inactive)

* Active Status is present when an Adoption Intervention is mapped to one or more system pages within an Adopt supported application.
* Inactive Status is present when there are no mappings for the Adoption Intervention to any system pages.

## Adopt Module

* This list relates to the different types of Adoption Intervention that are available within the Adopt Platform. “Content” relates to any Intervention that is managed via Content Cloud. Smart Pages, Trails and Tooltips all relate to the module namesake.


# Advanced - OKRs

The purpose of the Advanced Analytics module is to provide deeper insight into user behaviours across Adopt supported applications. Using the Adopt OKR framework we enable you to track Outcome Focused Objectives and Key Results centred around investment in Technology and Digital Adoption.

This guide aims to support the interpretation of Advanced Analytics.

## Objectives & Key Results Dashboard

**Objective:** The OKR Dashboard shows the performance of each of the configured Objectives and Key Results. Use the Filtering to focus on a specific Time Period for analysis. The OKR Insights section gives you simple to access Insights about each OKR

**Summary Table:** Shows the performance of each OKR for the selected time period. "Eligible Users" are those users that have met the criteria to be tracked for the specific OKR. The "OKR Users" are those that have fulfilled the target criteria

* **Interpretation:** OKRs track desired user behavior e.g. an Organisation desires that all of its employees know how to access Adopt to view support content in the flow of work. OKR 4 in the below example tracks all of the employees that enter the target application in the selected time period (last 100 days in this example) and observe how many of those employees pro-actively engage with the Adopt platform (open Split Screen, view a Tooltip or a Trail step etc.). In this example 49% of users have done this. We can see that this is down -25% on the previous period (previous 100 days)…

<figure><img src="/files/B4XS7cr5HgfVeaNRbBwE" alt=""><figcaption></figcaption></figure>

As only 49% of users are fulfilling the desired behaviour, we will look to the Influencers section to understand what is driving the performance on this OKR. The OKR Influencers compares all the profiling data we have about users to determine which User Types are most influential in the performance of the OKR.

In the example below we can see that the Job Family of Sales are most influential. This is because the Sales team adherence to this OKR is 20% (vs. 49% overall) and they also represent a significant population of users (13% of the total eligible users). This gives them a high Weighted Influence and we would therefore recommend targeting this population with an Adoption Intervention to drive positive performance on this OKR.

<figure><img src="/files/YiuVgMhv3IOsLkd5OYha" alt=""><figcaption></figcaption></figure>

* OKR Definition: To see how OKRs are calculated you can click on the OKR Definition Tab - this will provide you with the definition along with the targeting information. An OKR is always calculated as a % of Users who are fulfilling an Objective. To do this we determine a:

1. Denominator: This is the logic that makes you eligible to be considered for the OKR, in this example the Denominator is a user who visits a targeted application (Page Loaded event), they can visit any Area of the application, they must have a role of “employee”, but they can have any language or location set
2. Numerator: The Numerator targets the events we will observe to identify a user fulfilling the objective. In this example we are again looking for “employees” in any area of the system but we will only count them if they Open Split Screen, View a Tooltip, View a Trail Step or View Training Pages. If we needed to observe a specific order in which these events occur the “Order” column will be populated
3. OKR Calculation: Numerator / Denominator x 100 = % of OKR Users

<figure><img src="/files/ckemrZP5IsMqVppHLFyE" alt=""><figcaption></figcaption></figure>




---

[Next Page](/llms-full.txt/1)

