When building a tour, you will need to add element selectors to pointer steps. Unless you add an element selector to a pointer, it will be impossible to darken the area around the focus point and place the pointer with your help information in a specific location on the screen. 


TABLE OF CONTENTS


What are element selectors

Element selectors are identifiers of an element in the code of the page. Classes (for example .help-button or class="help-button" as seen in the code) and element ID's (for example #login_bttn or id="login_bttn" as seen in the code) and their combinations are classic examples of element selectors. Selectors are used to identify an object on the screen - such as a button, a block of text, a box with some content etc. Tours use element selectors to correctly place tour steps and darken the area around element, bringing the user's focus to the desired part of the page. 



How to get element selectors with Usetiful plugin for Chrome (recommended)

The easiest way to get element selectors is by using the Usetiful extension for Chrome. Here's a detailed article on how to get it. 

When you have the extension installed and signed in to it using your Usetiful credentials, here are three basic steps to use it


1. When creating a tour, you will see the element selector required field - click the crosshair button right next to the input field


2. Click the crosshair button and you will be asked to type the URL - here please type the URL where the tour step must be displayed3. Once you type the URL - click "OPEN PAGE" and you will be taken to the typed URL, where the extension will open.

4. Find the desired element and when you hold the pointer over it - the extension will highlight it for you to ensure you select the correct element.

5. Click once again and you will be automatically taken back to the tour editor - and the extension will fill in the selector in the field for you.


OR

1. Open the page and click on the Usetiful extension in the Chrome browser's right top corner - you will see a box with two buttons



2. Click "Open panel" and you will see the extension panel in the bottom of the screen



3. If it is not enabled, click on the element selection button to start selecting an element


4. Hover the mouse pointer over the desired element and click on it - the element selector will be copied to the clipboard. You can then go back to the editor and paste the element selector in the corresponding field. 


Special case - how to select an element within a dropdown

What if you need to use the extension to select an element that is not visible unless you click on some button or open a drop-down menu with a click? 

For that - use the ability to switch between navigation and selection modes

Navigation mode provides the ability to click on any element on the screen without copying its selector and observing the natural behavior of that element. 


Let us consider an example

We need to get the selector of a drop down. 

1. Switch from select mode to navigation mode in the bottom plugin bar (shortcut - shift+enter)2. Use your mouse pointer to open the drop-down menu

3. With the drop-down menu opened click on the selection mode in the bottom bar(shortcut - shift+enter)

4. Use selection mode like before to click on an element have the selector copied.




How to get element selectors manually

In some cases the Chrome extension doesn't copy the unique selector that is needed to properly place the pointer. There are many reasons for this, but to work around this problem - follow the steps described below. This procedure should be fairly similar in most browsers. 


1. Go to the desired page in the browser
2. Locate the desired element and right click on it

3. In the opened contextual menu click "Inspect"

4. You will notice that the browser inspector opens, and in the code the desired element is highlighted



5. Right click on the highlighted piece of code, select Copy > Copy element selector - this action will copy the element selector to your computer's clipboard. From here, you can go to the tour editor and paste it in the selector field for a pointer. 


That's it, you have manually copied the element selector!