Industry-Leading Product Tours for Framer

Best Product Tours Software for Framer

Join 2,200+ companies using Produktly to create exceptional product tours that simplify learning curves and increase feature adoption on Framer.

Produktly Capterra rating 4.7/5.0Produktly Capterra Best Ease of Use Badge
Start free trial
See demo

Why Produktly Product Tours is Perfect for Framer

Guide visitors through your Framer sites. Enhance your high-fidelity mockups or published sites with interactive tips.

Supercharge Your Framer Experience

Create engaging product tours that drive adoption and retention. Guide your users through even the trickiest parts of your product.

Interactive Tours

Highlight functionality and advance tours based on click or hover events.

No-Code Editor

Build all your tours without writing a single line of code.

Detailed Analytics

Understand how your tours are performing with deep insights.

Simple Integration with Framer

Getting started with Produktly product tours on your Framer project is quick and easy.

How to integrate:

  1. 1

    Copy your Produktly script snippet.

  2. 2

    In Framer, go to Site Settings > Custom Code.

  3. 3

    Paste the snippet into the "Head" field.

  4. 4

    Publish your site and start creating onboarding flows.

Produktly highlighting features in Framer

Framer and in-app guidance

Framer is a design-first website builder that publishes static sites with optional dynamic components. Class names are auto-generated and can change between publishes, so you can’t rely on them for targeting. Framer does expose an "Attributes" panel where you can add custom HTML attributes to any layer, which is what you should use.

Framer sites are mostly multi-page with full reloads unless you’ve enabled smooth page transitions, in which case navigation happens in-app.

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.

Why teams on Framer pick Produktly

Framer teams pick Produktly because the editor is visual and matches the design-first workflow Framer users expect. The snippet lives in Site Settings, integrates in two minutes, and there’s no Framer-specific package or plugin to maintain.

Similar Platforms for Product Tours

Webflow

Best product tours software for your Webflow app.

Wix

Best product tours software for your Wix app.

Squarespace

Best product tours software for your Squarespace app.

Carrd

Best product tours software for your Carrd app.

Weebly

Best product tours software for your Weebly app.

Duda

Best product tours software for your Duda app.

Jimdo

Best product tours software for your Jimdo app.

View all 103 platform guides