5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T92f,

Product Tour Pro is an interactive product walkthrough component for Framer designed to showcase websites, apps, dashboards, SaaS products, and digital products through step-by-step tours. Turn any interface screenshot into an interactive presentation with hotspots, focused areas, smooth zoom transitions, and informative content cards.

Create custom tour stops with titles, descriptions, images, links, positions, highlight areas, and zoom levels. Visitors can follow a guided walkthrough or freely explore hotspots, making interfaces easier to understand.

Key Features

Interactive product walkthroughs
Guided and free exploration modes
Custom interactive hotspots
Smooth focus and zoom transitions
Custom titles and descriptions
Images for tour steps
Custom links and link labels
Adjustable hotspot positions and focus areas
Pulse, number, and plus marker styles
Autoplay product tours
Adjustable duration between steps
Optional continuous looping
Start tour automatically when in view
Next, back, done, and exit navigation
Browser, rounded, and bare screen frames
Adjustable tour card width and radius
Custom colors, typography, and spacing
Responsive layout and positioning

Where to Use

Product Tour Pro is ideal for SaaS websites, software products, dashboards, web apps, product landing pages, feature showcases, onboarding pages and interactive case studies.

Use it to explain product features, demonstrate software workflows, introduce new functionality, create interactive onboarding experiences, highlight important interface areas, or give potential customers a visual walkthrough.

It works especially well for analytics dashboards, productivity tools, CRM platforms, AI products, finance apps, project management tools, developer products, and B2B SaaS platforms.

I hope you enjoy using Product Tour Pro! For custom work & Framer-related projects reach out to me at oddframeworks@gmail.com

5a:[["$","$L5d",null,{"post":{"id":"01a11589-62ee-718d-b1b4-7cac2b059f27","title":null,"body":"

Product Tour Pro

Showcase Products Step by Step

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Product Tour Pro","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Showcase Products Step by Step"}]}]},"author":{"framerUserId":"5a06d82f-2719-499a-95b4-257f169a0ff6","name":"Oddframe","slug":"oddframe","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/5a06d82f-2719-499a-95b4-257f169a0ff6/vzf7d4ja","followed":false,"followsYou":false},"media":[],"resources":[{"id":"q8OroAisk8LUgsETLwjz","resolved":true,"title":"Product Tour Pro","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Product Tour Pro","marks":[{"type":"bold"}]},{"type":"text","text":" is an interactive product walkthrough component for Framer designed to showcase websites, apps, dashboards, SaaS products, and digital products through step-by-step tours. Turn any interface screenshot into an interactive presentation with hotspots, focused areas, smooth zoom transitions, and informative content cards."}]},{"type":"paragraph","content":[{"type":"text","text":"Create custom tour stops with titles, descriptions, images, links, positions, highlight areas, and zoom levels. Visitors can follow a guided walkthrough or freely explore hotspots, making interfaces easier to understand."}]},{"type":"customHeading","content":[{"type":"text","text":"Key Features"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive product walkthroughs"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Guided and free exploration modes"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom interactive hotspots"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth focus and zoom transitions"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom titles and descriptions"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Images for tour steps"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom links and link labels"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable hotspot positions and focus areas"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pulse, number, and plus marker styles"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Autoplay product tours"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable duration between steps"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional continuous looping"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Start tour automatically when in view"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Next, back, done, and exit navigation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Browser, rounded, and bare screen frames"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable tour card width and radius"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom colors, typography, and spacing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive layout and positioning"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Where to Use"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Product Tour Pro is ideal for "},{"type":"text","text":"SaaS websites, software products, dashboards, web apps, product landing pages, feature showcases, onboarding pages and interactive case studies","marks":[{"type":"bold"}]},{"type":"text","text":"."}]},{"type":"paragraph","content":[{"type":"text","text":"Use it to explain product features, demonstrate software workflows, introduce new functionality, create interactive onboarding experiences, highlight important interface areas, or give potential customers a visual walkthrough."}]},{"type":"paragraph","content":[{"type":"text","text":"It works especially well for "},{"type":"text","text":"analytics dashboards, productivity tools, CRM platforms, AI products, finance apps, project management tools, developer products, and B2B SaaS platforms","marks":[{"type":"bold"}]},{"type":"text","text":"."}]},{"type":"paragraph","content":[{"type":"text","text":"I hope you enjoy using Product Tour Pro! For custom work & Framer-related projects reach out to me at "},{"type":"text","text":"oddframeworks@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:oddframeworks@gmail.com","target":"_blank"}},{"type":"bold"}]}]}]},"introduction":"Showcase Products Step by Step","slug":"product-tour-pro","author":{"framerUserId":"5a06d82f-2719-499a-95b4-257f169a0ff6","name":"Oddframe","slug":"oddframe","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/5a06d82f-2719-499a-95b4-257f169a0ff6/vzf7d4ja","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/5a06d82f-2719-499a-95b4-257f169a0ff6/01a11588-fb43-7039-810c-7a4b83a4b3fa.png","metadata":{"tint":{"h":0,"s":0,"l":58},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-07T08:44:47.107Z","updatedAt":"2026-10-07T08:44:47.107Z","publishedAt":"2026-10-07T08:44:47.104Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://re.chujiqiqi.com/m/Wayfinder-jV42gj.js@eMdCWDQzVcATCF08zBWU","previewUrl":"https://producttourpro.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"eMdCWDQzVcATCF08zBWU","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":9,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-07T08:44:47.726Z","updatedAt":"2026-10-07T08:44:47.726Z","reported":false}}],"$L5f"]

Suggested for you