Help Center

When building a tour, you might need to connect your pointers to a specific element on your page. Otherwise, it would not be possible to place the pointer correctly aiming at your element, and darken the area around the element.

What are element selectors

Element selectors identify the element in the code of the webpage. 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. 

How to get element selectors with Usetiful plugin for Chrome

The easiest way to get element selectors is by using the Usetiful extension for Chrome. To get the Usetiful extension Click here.

When you have the extension installed and signed in to it using your Usetiful credentials, here are the 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 displayed.

3. 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. The element selection will be automatically copied to the tour element field. 

OR

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

2. Click "Open panel" and you will see the extension panel at 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 choose the element selector to use for the element - 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.

FAQ: How to work with dynamic element selectors?

Sometimes the elements do not have stable element selectors but have their selectors generated dynamically. This is common for design systems, such as ANT Design or MUI. This causes a complication when linking pointers to the elements - a connection that works for you now might break in the future when the selectors refresh.

Usetiful enables you to link elements using alternative selectors, such as Attribute selectors. Here is how:

1- Click on the gear button and enable selection mode.

2- Once you click on the element in the selection mode, you can see the bubble with selections. Click on it and have the selector copied.

FAQ: 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 the 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!