Help Center

When building a tour, you might need to connect your pointers to a specific element on your page. This allows the pointer to be aimed accurately and activates the 'spotlight effect,' effectively drawing the user's focus to the intended area while darkening the background.

What Are Element Selectors?

Element selectors are unique identifiers in the HTML code of your webpage that help pinpoint elements. Examples:

• Classes: .help-button or class="help-button"
• IDs: #login_bttn or id="login_bttn"
• Attribute combinations: These can include multiple properties to ensure unique identification.

Using the Usetiful Plugin for Chrome (Recommended)

The easiest and most reliable way to get element selectors is by using the Usetiful extension for Chrome. This tool simplifies the process significantly, even for complex or dynamic elements.

• Installation: Click here to get the Usetiful extension. You must be signed in with your Usetiful credentials once installed.

Note: If the Usetiful plugin doesn't open, ensure it's active. Click the puzzle icon (Extensions) in your Chrome browser's toolbar, locate the Usetiful extension, and activate it.

Option A: Selecting Elements While Creating a Tour

This method guides you directly from the Usetiful Editor:

1. In the Usetiful editor, locate the element selector field from your tour step.

2. Click the crosshair button next to the field.

3. Enter the page URL where the tour step is displayed and click "Open page".

4. The browser will navigate to the URL, and the Usetiful extension will open automatically.

5. Hover over the desired element to highlight it.

6. Click the element to copy the selector directly into the tour editor.

Option B: Manually Opening the Usetiful Plugin

Use this method when you want to quickly grab a selector for later use or outside the tour creation flow:

1. Navigate to the desired webpage.

2. Click the Usetiful extension icon in your Chrome toolbar.

3. Select "Open panel" to display the plugin panel at the bottom of the screen.

4. Ensure Element Selection Mode is enabled (it usually is by default).

5. Hover over the element you want and click it. The selector will be copied to your clipboard.

6. Paste the selector into the editor field.
   
   

Further Guidance

The Usetiful plugin is highly effective, but sometimes you might need more advanced techniques:

• To learn how to handle elements that change (dynamic selectors), click here to learn about How to Work with Dynamic Element Selectors.

• To select elements that are temporarily displayed, click here to learn about How to Select Elements in a Dropdown menu or Pop-up Modal.

• If you need to find selectors without the plugin, you can use built-in browser tools: How to Manually Find Element Selectors Using Chrome DevTools.