How to create a product tour in a Lovable app without a developer
A guided walkthrough in a Lovable app in about twenty minutes: install one line, click through your own interface in the visual editor, and publish a tour that starts where new users need it.
- Time
- ● 20 minutes
- Price
- Free plan
- Who does it
- You and the Lovable chat
Example: a product tour in a Lovable app
A habit-tracker built in Lovable gets sign-ups, but new users don’t create a habit. On /dashboard a 3-step tour points at data-tour="create-button", the streak counter and the reminders toggle.
Free on the Clew Free plan — no card, no time limit: one site and up to 3 published tours or tooltips. Audience rules and A/B tests come with Pro.
How to build the product tour in a Lovable app, step by step
- Step 01
Copy your Clew snippet
Create a free account (or sign in), add your site and open Admin → Overview. Click the line in the “No signal from the widget yet.” card to copy it — it carries your real site key instead of the placeholder.
<!-- Clew: replace PASTE_YOUR_SITE_KEY with the site key from Admin > Overview --> <script src="https://tryclew.io/widget/PASTE_YOUR_SITE_KEY.js" async></script>
Step 1 · schematic illustration - Step 02
Open the project chat in Lovable
Open your project in Lovable. The chat edits the code directly; make sure you are on the main version you publish, not an old remix.
Step 2 · schematic illustration - Step 03
Send the prompt with your key
Copy the prompt, replace
PASTE_YOUR_SITE_KEYwith your key and send it. Besides the script tag it asks for what the product tour needs from the code.Add the Clew onboarding widget to this app. Insert this exact tag once so it loads on every page, including after client-side route changes: <script src="https://tryclew.io/widget/PASTE_YOUR_SITE_KEY.js" async></script> This is a Lovable project (React + Vite): put the tag in index.html right before </head>. Also add stable data-tour attributes to the elements a product tour will point at: the main navigation, the primary create/add button, the main filter or search, and the page heading — for example data-tour="create-button". Do not change their styles, text or behaviour. Rules: - Use the script URL exactly as given. Do not download it, bundle it or install an npm package. - If the project sets a Content-Security-Policy, allow https://tryclew.io in script-src and connect-src. - Change nothing else and show me the diff.
Step 3 · schematic illustration - Step 04
Check the change and publish
Open the code view: expect
index.htmlwith one added line, plus the small additions from the prompt. Then press Publish — the widget works only on the published app.
Step 4 · schematic illustration - Step 05
Build the tour on top of your page
In Clew open Flows → + New flow, keep Format at Step-by-step tooltips and press Edit on your site. On your page press Pick element and click the element for step 1, then write a title and one or two sentences. Repeat for 3–5 steps; the preview updates as you type.
Step 5 · schematic illustration - Step 06
Choose where, when and for whom it shows
In the same editor, set Where to show (page URL), When to show, Audience targeting and Frequency. These are the settings of the example above:
Setting Value Format Step-by-step tooltips Where to show (page URL) Section by prefix /dashboardWhen to show Right on page load Audience targeting No rules — everyone who opens the page Frequency Once per visitor 
Step 6 · schematic illustration - Step 07
Publish and check it on the live site
Set Status to Published and save. Open the page in a private window — Clew remembers who has already seen a “once” item, so your usual browser may skip it. Views, completions and drop-offs appear in the tour stats.
Step 7 · schematic illustration
Pitfalls: product tour in a Lovable app
Supabase auth loads after the page
Lovable apps usually sign users in with Supabase, so the user is known a moment after load. That’s fine: Clew.identify() re-checks the rules whenever it is called, and the product tour appears then.
The editor preview is not your published app
Build and test the product tour on the published URL (or your custom domain). URL rules compare paths, so the same settings work for both.
Generated class names change on every rebuild
AI-built apps often use utility classes or hashed CSS modules. A selector like .bg-blue-600.px-4 breaks after the next prompt. That’s why the prompt above asks for data-tour attributes: pick those elements and the tour survives regenerations.
Questions and answers
Can I edit tour text without prompting Lovable?
Yes. The tour lives in Clew; Lovable only added the line and the attributes once.
Will the next Lovable prompts remove the line?
Usually not — it lives in index.html. If Admin → Overview stops showing “Widget is live” after a big regeneration, send the prompt again.
Is the product tour free?
Yes — tours are on the Free plan with up to 3 published. You only need Pro for audience rules, A/B tests and more tours.
Can’t I just ask the AI to build the tour?
You can, but then every text change is a new prompt, a new diff and a new deploy, and you get no stats. With Clew the AI adds one line and a few attributes once; the tour itself is edited in minutes by anyone on the team.