How to add a paywall upgrade prompt in a Bolt.new app without a developer

Example: an upgrade prompt in a Bolt.new app

How to add the paywall prompt in a Bolt.new 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 in Bolt.new

   Open the project at bolt.new. Bolt runs it in the browser and edits files from the chat.

   

3. Step 03

   Send the prompt with your key

   Replace PASTE_YOUR_SITE_KEY with your key and send the prompt below. It covers the tag and what the paywall upgrade prompt needs.

   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 Bolt.new project (usually Vite): put the tag in the root index.html right before </head>; if it is Next.js, use next/script in the root layout.
   
   After the signed-in user is loaded, and whenever the subscription changes, call Clew.identify({ plan: <the user's current plan id as a string, e.g. "free"> }). 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]); } }; then call window.TutorKit.identify(...). Add a data-tour attribute to the buttons of paid features (for example data-tour="export"). Do not add any payment, gating or paywall logic of your own and do not change what the buttons do.
   
   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

   Review the files and deploy

   Check that index.html got one line and nothing was installed from npm, then press Deploy (Netlify or Bolt hosting). The preview inside Bolt doesn’t count as the live app.

   

5. Step 05

   Write the upgrade prompt

   In Clew open Flows → + New flow and choose Modal window. One step: a title with the benefit (“Export to CSV is on Pro”), one sentence of value, and in Link text / Link URL the button and your pricing or checkout URL.

   

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	Modal window
   Where to show (page URL)	Section by prefix /projects
   When to show	On click on an element: [data-tour="new-project"]
   Audience targeting	Property plan equals starter
   Frequency	Every visit

   

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: paywall upgrade prompt in a Bolt.new app