Best Roadmaps Software for React

React and in-app guidance

Installing Produktly on React

Drop the snippet in public/index.html so it loads on first paint. If you can't touch the HTML directly, load it from a top-level component inside a useEffect.

<!-- public/index.html -->
<script>
  (function (w, d, f) {
    var a = d.getElementsByTagName("head")[0];
    var s = d.createElement("script");
    s.async = 1; s.src = f;
    s.setAttribute("id", "produktlyScript");
    s.dataset.clientToken = "YOUR_TOKEN";
    a.appendChild(s);
  })(window, document, "https://public.produktly.com/js/main.js");
</script>

Replace YOUR_TOKEN with the value from your Produktly dashboard. The script is async and does not block React hydration.

Things to watch out for on React

• Selectors break when components remount

  Class names and DOM positions change between renders. Target elements with stable data-* attributes like data-tour="step-1" instead of auto-generated CSS classes.

• Route changes don't reload the page

  React Router and TanStack Router use the History API, so no full reload happens. Enable Produktly’s SPA redirect mode so tour steps follow client-side navigation.

• StrictMode doubles dev-mode analytics

  React 18 StrictMode mounts components twice in development. Tour start counts will look inflated locally. Production builds report correctly.