Add onboarding to your Lovable app

Set it up in five steps

1. 1

   Create a Produktly account and copy your token

   Start a 14-day trial, then open Settings > Installation and copy your Client Auth Token. This token is public: it sits in your app's HTML and only tells the script which account to load.

2. 2

   Ask Lovable to install the script

   Paste this into the Lovable chat, with your token in place of YOUR_CLIENT_TOKEN. Lovable projects created since May 13, 2026 use TanStack Start and older ones use React + Vite. The prompt covers both. If you prefer to do it by hand in Code mode, the snippet goes in index.html in a React + Vite project.

   Prompt for Lovable

   Add the Produktly script to this app so it loads on every page.
   Put it in the document head of the root layout (index.html if this
   is a React + Vite project). Use this snippet exactly as it is, and
   do not change the id or clientToken lines:
   
   <script>
     (function (w, d, f) {
       w.Produktly=w.Produktly||new Proxy(function(){},{get:function(_,n){return function(){w.ProduktlyQ=(w.ProduktlyQ||[]).concat([[n,Array.prototype.slice.call(arguments)]])}},apply:function(_,__,a){w.ProduktlyQ=(w.ProduktlyQ||[]).concat([["apply",a]])}})
       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_CLIENT_TOKEN";
       a.appendChild(s);
     })(window, document, "https://public.produktly.com/js/main.js");
   </script>

   To check it worked, open your published app, open the browser console and type window.Produktly. It should be an object. Run window.Produktly.debug() for verbose logging while you test.

3. 3

   Tell Produktly who is signed in

   Identifying users lets you show a tour only to new signups, keeps tour progress across devices, and lets you target by plan or signup date. Adjust the field names to match your auth, whether that is Lovable Cloud, Supabase or something else.

   Prompt for Lovable

   When a user is signed in, call
   window.Produktly.identifyUser(user.id, { email: user.email, createdAt: user.created_at })
   and call it again when a session is restored on page load.
   When the user signs out, call window.Produktly.clearCurrentUser().

   Any extra fields you pass (plan, role, company) become targeting attributes in the Produktly dashboard automatically.

4. 4

   Give the important elements stable names

   Lovable rewrites components as you keep prompting, so generated class names change. A tour step pinned to a class name breaks on the next edit. A data-produktly attribute is part of your code rather than generated styling, so it stays put as long as the element does. Name the elements your tour will point at:

   Prompt for Lovable (use your own elements)

   Add data-produktly attributes to these elements and change nothing else:
   - the "New project" button: data-produktly="new-project-btn"
   - the project list: data-produktly="project-list"
   - the settings link in the sidebar: data-produktly="settings-link"

   In the tour editor you then target a step with a selector like [data-produktly='new-project-btn'].

5. 5

   Build the first tour

   Create a product tour in the Produktly dashboard, add highlight steps with the selectors from step 4, and preview it on your published app with the Produktly Chrome extension. Target it at new users on the page they land on after signup. Keep it short: in our 2026 benchmarks, tours with 1 to 2 steps had a median completion rate of 73%, against 8% for tours with 9 or more.

What to add after the first tour

The same script runs all of these. There is nothing else to install.