Add a product tour to a React app — one script, no library

Step by step

1. Step 01

   Copy your snippet from Clew

   Sign up or sign in and open Admin → Overview. The card “No signal from the widget yet.” shows your line with the real site key. Click it to copy. The key is public by design: it ends up in your HTML anyway, and it only works on the domains you list in the site settings.

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

   Add the line once, at the root of the app

   Put the script where every route loads it, and nowhere else. Don’t add it inside a component or per route: the widget follows client-side navigation itself, and a second copy is ignored.

   • Vite: index.html in the project root, inside <head>.
   • Create React App: public/index.html, inside <head>.
   • Next.js: the root layout, with next/script. See Next.js App Router and Pages Router below.

   <!-- Vite: index.html in the project root. Create React App: public/index.html -->
   <!doctype html>
   <html lang="en">
     <head>
       <meta charset="UTF-8" />
       <title>My app</title>
       <script src="https://tryclew.io/widget/PASTE_YOUR_SITE_KEY.js" async></script>
     </head>
     <body>
       <div id="root"></div>
     </body>
   </html>

   Copy

   Keep async: the browser downloads the widget in parallel without blocking the page. Don’t install it from npm or copy the file into your bundle: loading it from its own URL means fixes reach your app without a rebuild.

   

3. Step 03

   Tell Clew who the user is, after login

   Tours usually target people, not pages: new users, admins, the Free plan. Pass those facts with identify() once the user is known. Call it again whenever they change. The values stay in the visitor’s browser, and only the property names reach Clew, so the editor can offer them in audience rules. Pass what targeting needs, not personal data.

   // src/ClewIdentify.jsx: render it once, inside your auth provider
   import { useEffect } from 'react';
   
   export function ClewIdentify({ user }) {
     useEffect(() => {
       if (!user) return;
       // if the widget hasn't loaded yet, this stub queues the call and the widget replays it
       window.TutorKit = window.TutorKit || { q: [], identify(p) { this.q.push(['identify', p]); } };
       window.TutorKit.identify({
         plan: user.plan,            // 'free' | 'pro' …
         role: user.role,            // 'admin' | 'member' …
         signedUpDaysAgo: Math.floor((Date.now() - new Date(user.createdAt).getTime()) / 864e5)
       });
     }, [user]);
     return null;
   }

   Copy

   The call is safe before the widget has loaded: the stub queues it and the widget replays it on start. When identify() runs and nothing is on screen yet, the widget checks the rules again, so a tour for “new users” can start right after sign-up without a reload.

   

4. Step 04

   Give key elements a stable data-tour attribute

   React builds often generate class names (CSS modules, styled-components, Tailwind variants), and a selector built on them breaks on the next deploy. When you click an element in the Clew editor, it looks for a data-tour attribute first and uses [data-tour="new-project"]. Add the attribute to the handful of elements tours will point at.

   // stable anchors survive CSS-module hashes and redesigns
   <button data-tour="new-project" onClick={createProject}>New project</button>
   <nav data-tour="sidebar">…</nav>

   Copy

   

5. Step 05

   Build the tour and check it across routes

   Open the app, go back to Admin → Overview and wait for “Widget is live.” Then create a tour: the editor opens on top of your running app, you click the elements and write the copy. Set the page rule to the route where the tour belongs, for example /projects as an exact path or a prefix.

   Navigate between routes the way a user would. On every client-side URL change the widget closes the tour that belonged to the previous page (without marking it as seen) and checks the rules for the new URL.

   

Next.js: App Router and Pages Router

// app/layout.tsx (Next.js App Router)
import Script from 'next/script';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script src="https://tryclew.io/widget/PASTE_YOUR_SITE_KEY.js" strategy="afterInteractive" />
      </body>
    </html>
  );
}

// pages/_app.tsx (Next.js Pages Router)
import Script from 'next/script';
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <Script src="https://tryclew.io/widget/PASTE_YOUR_SITE_KEY.js" strategy="afterInteractive" />
    </>
  );
}

// src/clew.d.ts: lets TypeScript accept window.Clew and window.TutorKit
export {};
declare global {
  interface Window { Clew?: any; TutorKit?: any }
}

How the widget handles React routing

Connect tours to your own code (optional)

// tick the "Invite a teammate" checklist item when the invite really succeeds
await api.invite(email);
window.Clew?.complete('invited');

// a "Take the tour" item in your help menu
<button onClick={() => window.Clew?.show('welcome-tour')}>Take the tour</button>

Cookie consent

<!-- tours show, but nothing is sent until the visitor agrees -->
<script src="https://tryclew.io/widget/PASTE_YOUR_SITE_KEY.js" data-no-track async></script>

// call this from your consent banner's "accept analytics" handler
export function enableClewTracking() {
  if (window.Clew) window.Clew.setTracking(true);
  else window.addEventListener('tutorkit:ready', () => window.Clew.setTracking(true), { once: true });
}

Testing

// in the browser console, to see a "once per visitor" tour again
Clew.reset('welcome-tour');

// or open any page with the tour forced on:
// https://app.example.com/dashboard?tutorial=welcome-tour

Troubleshooting and FAQ

Other ways to install