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:

There a couple of reasons you might want to edit the CSS, when choosing a website element:

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.

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.
​
​

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=”...”. 

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:

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: