Best Product Tours Software for Webflow

Webflow and in-app guidance

Installing Produktly on Webflow

Paste the snippet into Project Settings > Custom Code > Head Code. Webflow injects it into every page automatically.

<!-- Webflow > Project Settings > Custom Code > Head Code -->
<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>

After saving, hit Publish. The snippet only goes live on the published domain, not in the Webflow Designer preview.

Things to watch out for on Webflow

• Snippets in the Designer don’t fire

  Webflow only runs custom code on the published site. To test a tour, publish to a staging subdomain and open that URL, not the Designer preview.

• Auto-generated class names change without warning

  If you didn’t name a class, Webflow generates one and may rename it on republish. Give every tour target a stable custom class or an attribute like data-tour="hero".

• Symbols inherit head code differently

  Code added inside a Symbol does not propagate to every page. Always add the Produktly snippet to Project Settings > Custom Code, not inside a Symbol.