How to add an onboarding checklist in a Lovable app without a developer

Example: an onboarding checklist in a Lovable app

How to add the onboarding checklist in a Lovable app, step by step

1. 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>

   Copy

   

2. 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.

   

3. Step 03

   Send the prompt with your key

   Copy the prompt, replace PASTE_YOUR_SITE_KEY with your key and send it. Besides the script tag it asks for what the onboarding checklist 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>.
   
   After the signed-in user is loaded, and whenever these values change, call Clew.identify() with a few non-personal properties as strings — for example { plan: "trial", role: "owner", onboarded: "false" }. If the widget may not have loaded yet, first define the queue stub: window.TutorKit = window.TutorKit || { q: [], identify: function (p) { this.q.push(["identify", p]); } }; and call window.TutorKit.identify(...). Never pass names, emails or other personal data.
   
   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.

   Copy

   

4. Step 04

   Check the change and publish

   Open the code view: expect index.html with one added line, plus the small additions from the prompt. Then press Publish — the widget works only on the published app.

   

5. Step 05

   Write the checklist items in Clew

   In Clew open Flows → + New flow and choose Onboarding checklist. Fill Checklist title, then add 3–5 Checklist items: a title that is an action, one line of explanation and in Link URL the page where it is done. No selectors are needed.

   

6. 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	Onboarding checklist
   Where to show (page URL)	Section by prefix /dashboard
   When to show	Right on page load
   Audience targeting	Property onboarded not equals true
   Frequency	Once per visitor

   

7. 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.

   

Pitfalls: onboarding checklist in a Lovable app