Manually Build CSS Selectors

This document talks about CSS selectors. If you're not sure what those are, check out this guide on CSS Selectors.

Hotspots or tooltips may not appear if our SDK cannot identify the specific elements which the hotspots or tooltips are set to attach to.  

This usually happens for three reasons:

  1. The particular element doesn't exist in all instances of the same URL
  2. The CSS selectors your tooltips or hotspots are attached to are dynamically generated
  3. The element is being identified by too generic of a CSS selector that also refers to other elements on the same page

1. Missing elements

If you place a tooltip or hotspot on an element that doesn't exist in all instances, your flows will not show up when those elements don't appear.

For example, in the image below we have a tooltip placed on Project 2. If a user doesn't have two projects, the tooltip would not appear on this page as it would be seeking a CSS selector for the second project.

2. Auto-generated selectors

Sometimes your elements will be visible in all instances, but they might have auto-generated attributes (classes, IDs, etc). In this case, elements in your HTML markup will look like this: 

Auto-generated attributes (like "core___2PzPF" above are common in certain javascript frameworks like React.js and Ember.js. These IDs are randomly generated on each page load. As such, Appcues won't be able to automatically determine the best CSS selector to use when building your Appcues hotspots or tooltips.

In order to get your tooltips/hotspots to display properly, remove the auto-generated portion of the CSS selector.

In the Appcues editor, click on the cog icon next to the tooltip or hotspot you would like to adjust:

You will now see the auto-generated CSS selector being used to position your step. Here are instructions on other methods of representing an attribute. For instance, if you had the following CSS selector > header

You could replace the auto-generated portion by adjusting it to:

div[class^=menu-panel__] > header

Alternatively, you can build your own selector from other attributes associated with the targeted element.  The Appcues editor will gather and list out the following attributes when available: HTML tag type, id, class, href, src, alt, title, type, name, and placeholder:

3. Generic CSS selectors

If CSS selectors are too general and can be referred to more than one element on your page, tooltips or hotspots cannot identify which element to appear on and therefore will not show: 

To get your flows appearing on the correct elements, identify a more unique selector by inspecting the element on your page. Once you have a more specific selector, click on the cog icon of the hotspot or tooltip you would like to adjust and then add the unique identifier in the Selector field, or select another attribute in the list: 

You can also select By Order if you have multiple objects with the same CSS header!

Messaging in the Element Selector will alert you that your selector, whether inputted automatically or manually, is 1) unique and valid, 2) valid, but not unique, or 3) not found. Choose a selector that is both unique and valid. Save your new selector and preview your flow to make sure it works.

4. Selectors that change on empty state

Another thing to keep in mind is that a selector may be slightly different when someone looks at a part of your page in its empty state (vs with it populated). So be sure to run through the flow with a clean slate as a new user would and ensure that the selector is the same in both states. Usually, we find that in this case, there is some part of the selector that is consistent.

Please reach out to support@appcues if you have questions on the above. =)