Modern frameworks like React use build tools like react-style that generate dynamic css. This is great for developers because it couples presentation and interactivity more closely. It can also be a better end-user experience for customers. However, it makes it impossible for Appcues' Hotspots to reliably find an anchoring element and therefore provide a great onboarding experience for new users.
Instead of positioning itself relative to a specific element, like a button, a hotspot can align itself relative to an entire section, like a sidebar. This makes it possible for the hotspot to still appear next to the button, even if the button has a dynamic class, like .button-12z.
To define a region for Appcues, simply add an attribute to that element called appcues-region, and give it a unique value. Here's how it'd look in a standard layout:
<body>
<div class='header-39z navigationHeader-9f' appcues-region='header'>
<ul>
<li>Nav 1</li>
<li>Nav 2</li>
<li>Nav 3</li>
</ul>
</div>
<div class='sidebar-1a' appcues-region='sidebar'>
<a class='button-5r'>Sign up</a>
</div>
<div appcues-region='main-content'>
<p>Hello there.</p>
</div>
</body>Now, instead of binding directly to .button-5r, Appcues hotspots will position themselves relative to the sidebar region you defined in your code. The same is true for the header and main-content regions.
You can create as many regions as you want. Adding more regions increases how flexible hotspots are, particularly on multiple resolutions (desktop, mobile, etc.) if your application's layout adjusts for those different screen sizes.
Just let us know at folks@appcues.com!