When designing a Product Tour, you can choose specific website elements, like buttons or headers, to point your messages to. Intercom uses CSS selectors to let you choose these elements.
When you choose an element, the tour will automatically generate a CSS Selector that tells it how to point at the element. You can see the CSS for the selected element in the bottom left corner:
You may want to manually add the CSS selector for a few reasons, which we'll cover later in this article. If you’d like to manually edit the CSS selector that’s automatically chosen, click ‘Advanced’ after you’ve selected the website element.
Here, you can manually enter the CSS Selector you’d like to select:
Why would I edit a tour’s CSS?
There a couple of reasons you might want to edit the CSS, when choosing a website element:
Your product has changed
If your product or site has changed since you published your tour, you may find the original CSS no longer works. This might be either because the element it references doesn’t exist anymore, or it has moved to a significantly different place. In this case, you can choose to select a new element using the tour builder, or manually enter a new selector.
Your product uses dynamically generated classes
CSS is used to apply styles to elements on your website. Some web frameworks dynamically generate the CSS classes to apply these styles. This means that the CSS selectors may change every time a user accesses your product or site. In this case, you won’t be able to use the automatic CSS selector to build your tour. You can edit some of the selectors to use a wildcard so that it ignores the dynamically generated piece of the CSS selector. This means editing the CSS so the selector only identifies the static/generic parts that would be in place for all users. In the example below, we edit the selector to look for button__ rather than button__2kbli, as that part of the CSS appears to all users.
How can I ensure my tour sends properly?
The best way to ensure your tours send correctly is to annotate the HTML on your site with a special attribute that Intercom can look out for.
Note: You’ll need to edit HTML to do this.
If you know what elements on your site you want to use in a tour, you can add a special data attribute to these elements in the form: data-intercom-target=”...”.
<div data-intercom-target="Login button">
...
</div>
For example, if you wanted to point to your login button in a tour, you could add data-intercom-target=”Login button” to this element. By annotating your HTML in this way, it’s much more likely that small changes to your product will have no affect on your tours.
If you annotate the HTML as shown above, then, the tour builder will be able to highlight the elements with the data-intercom-target annotation, so you can select them using the tour builder:
Advanced Developer-Driven Solutions
For complex issues such as dropdowns and side navigation:
Dropdowns: Instead of targeting individual dropdown items, highlight the dropdown menu itself and provide instructions for users. Follow up with a new tour after the selection.
Side Navigation: Update your page’s CSS to include the
data-intercom-targetattribute. For example:<div data-intercom-target="Side navigation button">Button Text</div>
This provides stability to navigational targets, ensuring the product tour aligns with the intended elements.
Common Issues with Product Tour Element Targeting
When setting up Product Tours, you might encounter issues with element targeting. Here are some common problems and what causes them:
Selectors breaking due to website changes: Website structural changes can invalidate existing CSS selectors, causing them to stop working. Intercom uses a library called Finder to generate these selectors, which can become outdated when your website's layout or elements change.
Dynamic or generic selectors: Using generic selectors, such as
.d-xl-inline, or dynamically generated ones can lead to targeting failures because they might not consistently point to the correct elements across different sessions or page loads.Missing or hidden elements: If a targeted element isn't visible or hasn't rendered when a tour step begins, it can cause the step to fail or display the message "element isn’t visible here." Always ensure all targeted elements are present and visible during their respective tour steps.
Troubleshooting Steps
When you encounter issues with Product Tour element targeting, follow these troubleshooting steps:
Check Element Visibility
If you see the "element isn’t visible here" message:
Save the step again in the Product Tour builder. This can sometimes refresh the targeting.
Verify that the element is present across all versions of your site, including different screen sizes and user states.
Add the
data-intercom-targetattribute to the element. This makes the element significantly easier for Intercom to target reliably.
Resolve Targeting Errors
Review and update CSS selectors for consistency. Generic or dynamic selectors are often the cause of instability.
Replace broken selectors with references to static and universal elements. For example, update selectors like
[href='#/sheets/...']to reliably point to persistent elements that are less likely to change.
Test and Preview
After applying any fixes, always preview the tour to confirm that all steps are working as intended and the elements are being targeted correctly.
Got questions?
If you have any more questions about editing CSS in Product Tours, just chat to us in the Messenger and we’ll help you out. Here are more resources to ensure your tours deliver:
Need more help? Get support from our Community Forum
Find answers and get help from Intercom Support and Community Experts