Guides and Surveys - Finding Element Selectors on Your Website

When building a tour or smart tip, you may 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, drawing the user's focus to the intended area while darkening the background.

In this article:

• What are element selectors
• Using the Guides and Surveys Chrome extension
• Working with dynamic element selectors
• Finding selectors with Fullstory Inspect Mode
• Finding selectors with Chrome DevTools
• Frequently Asked Questions

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 Guides and Surveys Chrome extension

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

Selecting elements from the tour editor

This method guides you directly from the content editor:

1. In the content editor, locate the element selector field for 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 navigates to the URL, and the extension opens automatically.
5. Hover over the desired element to highlight it.
6. Click the element to copy the selector directly into the tour editor.

Using the extension directly

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

1. Navigate to the desired webpage.
2. Click the Guides and Surveys extension icon in your Chrome toolbar.
3. Select Open panel to display the extension panel at the bottom of the screen.
4. Ensure Element Selection Mode is enabled (it is usually enabled by default).
5. Hover over the element you want and click it. The selector is copied to your clipboard.
6. Paste the selector into the editor field.

Selecting elements in dropdown menus and modals

Elements hidden inside dropdown menus or pop-up modals can be challenging to select because they disappear when you interact with the extension. Use Navigation Mode to work around this:

1. Switch to Navigation Mode in the extension panel (or press Shift+Enter).
2. Use your mouse to open the dropdown menu or trigger the modal so the target element is visible.
3. Switch back to Selection Mode (or press Shift+Enter again).
4. Click the desired element within the dropdown or modal to copy its selector.

Because Navigation Mode prevents the extension from intercepting your clicks, you can interact with the page normally to reveal hidden elements before switching back to select them.

Working with dynamic element selectors

Some elements do not have stable selectors — their selectors are generated dynamically each time the page loads. This is common with design systems such as Ant Design or MUI. A selector that works today may break in the future when the generated classes or IDs change.

Using attribute selectors

One way to handle dynamic elements is to use attribute selectors instead of the default CSS selector:

1. Open the Guides and Surveys Chrome extension and enable Selection Mode.
2. Click the desired element.
3. In the selection bubble, look for an alternative attribute-based selector and copy it.

Attribute selectors target stable properties (such as data-testid or aria-label) rather than dynamically generated class names, making your pointers more reliable as the design evolves.

Automatic dynamic selectors

The Guides and Surveys Chrome extension gathers metadata about each element you select, including its tag name, text content, index, attributes, and parent structure. If the default selector fails to find the element at runtime, the system automatically applies alternative matching strategies to locate the correct element based on this metadata.

You can review and modify the collected metadata under the Edit element details toggle in the content editor. This is useful if you need to fine-tune which properties the system uses to identify the element.

Targeting elements by text

Another approach for dynamic elements is to filter by text content. This matches the element based on its visible text, which is useful when classes are not stable but the text content is consistent.

1. Open the Guides and Surveys Chrome extension and enable Selection Mode.
2. Click the desired element.
3. In the step settings, enable Filter element by text.

With this option enabled, the element is matched by its text content rather than its CSS selector alone, providing a more stable connection even when the underlying HTML structure changes.

Finding selectors with Fullstory Inspect Mode

If your organization uses Fullstory Analytics, you can use Inspect Mode to find CSS selectors for any visible element in a recorded session. This is helpful when you want to identify an element without visiting the live page or installing the Chrome extension.

1. Open a session replay in Fullstory and navigate to a point where the target element is visible.
2. Click Page Insights in the top right of the playback screen.
3. Toggle to Inspect Mode.
4. Click the element you want to target. Fullstory displays the Optimized and Full CSS selectors for that element.
5. Copy the selector and paste it into the element selector field in the Guides and Surveys content editor.

For more details on choosing between Optimized and Full selectors, see Tips for choosing CSS selectors.

Finding selectors with Chrome DevTools

If the Chrome extension does not produce a suitable selector, you can find one manually using Chrome DevTools:

1. Navigate to the page containing the element.
2. Right-click the element and select Inspect from the context menu.
3. In the DevTools Elements panel, the corresponding HTML code is highlighted.
4. Right-click the highlighted code and choose Copy > Copy selector.
5. Paste the copied selector into the element selector field in the content editor.

DevTools is also useful for verifying selectors. After copying a selector, you can test it in the DevTools Console by running document.querySelector('your-selector') to confirm it matches the intended element.

Frequently Asked Questions

What is the difference between Selection Mode and Navigation Mode?

Selection Mode lets you click any element on the page to copy its selector. Navigation Mode disables element selection so you can interact with the page normally — for example, opening a dropdown menu or triggering a modal. Press Shift+Enter to toggle between the two modes. See Selecting elements in dropdown menus and modals for the full workflow.

Do I need the Chrome extension to find element selectors?

No. The Chrome extension is the recommended method, but you can also find selectors using Chrome DevTools or Fullstory Inspect Mode. DevTools works on any webpage without additional tools, and Inspect Mode lets you find selectors directly from Fullstory session replay.