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.
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?
FAQ: How to select an element within a dropdown?
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!