How to create a product tour with Claude Code without a developer

Example: a product tour with Claude Code

How to build the product tour with Claude Code, 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

   Start Claude Code in the project

   Run claude in the project folder (or open Claude Code in your IDE). It works on your real repository and asks before editing files.

   

3. Step 03

   Send the prompt with your key

   Replace PASTE_YOUR_SITE_KEY with your key and send the prompt.

   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>
   
   Find the root HTML file or root layout of this project (index.html for Vite, app/layout.tsx with next/script for Next.js App Router, nuxt.config.ts app.head.script for Nuxt, src/app.html for SvelteKit, the base template for server-rendered apps) and add the tag there.
   
   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.

   Copy

   

4. Step 04

   Approve the edits and ship

   Approve the proposed edits after reading them, then commit and deploy as usual — or ask Claude Code to open a pull request.

   

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

   

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	Step-by-step tooltips
   Where to show (page URL)	Section by prefix /invoices
   When to show	Right on page load
   Audience targeting	No rules — everyone who opens the page
   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: product tour with Claude Code