Best Roadmaps Software for Framer

Framer and in-app guidance

Installing Produktly on Framer

Paste the snippet into Site Settings > Custom Code > Head so it loads on every page.

<!-- Framer > Site Settings > Custom Code > Head -->
<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>

Publish the site after saving. Custom Code only runs on the published domain, not the Framer preview.

Things to watch out for on Framer

• Class names change on every publish

  Framer regenerates class hashes when you publish. Use the Attributes panel to add data-tour="step-1" to every element a tour targets.

• Custom Code only runs on the published site

  You won’t see Produktly in the Framer canvas or preview. Open your real published URL to test.

• Smooth page transitions are in-app

  If you turned on Framer’s smooth navigation, cross-page tours need Produktly’s SPA redirect handling enabled.