Best Roadmaps Software for Bubble

Bubble and in-app guidance

Installing Produktly on Bubble

Paste the snippet into Settings > SEO/metatags > "Script in the header" so it loads on every page of your Bubble app.

<!-- Bubble > Settings > SEO/metatags > Script in the header -->
<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>

In Bubble’s Settings > General, make sure "Expose the option to add an ID attribute" is checked, so you can name elements for stable selectors.

Things to watch out for on Bubble

• Auto-generated IDs change between deploys

  Without manually-set ID attributes, every Bubble element gets a random ID that may shift. Set custom ID attributes on every tour target.

• Page navigation is in-app, not full reload

  Bubble apps run on a single page even when the URL changes. Turn on Produktly’s SPA redirect handling so tours can chain steps across "pages".

• Development vs Live versions diverge

  Code in the Dev version doesn’t carry to Live until you deploy. After pasting the snippet, deploy to Live or you’ll see no tours on your production domain.