How to set up user onboarding with ChatGPT Codex without a developer

Example: user onboarding with ChatGPT Codex

How to set up user onboarding with ChatGPT Codex, 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

   Connect the repository to Codex

   In ChatGPT open Codex and connect the GitHub repository of your app (or run the Codex CLI in the project folder). A regular ChatGPT chat or canvas only shows code — it doesn’t change your repository.

   

3. Step 03

   Start a task with the prompt

   Replace PASTE_YOUR_SITE_KEY with your key and start a Codex task with the prompt below.

   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 repository (index.html for Vite, app/layout.tsx with next/script for Next.js App Router, nuxt.config.ts app.head.script for Nuxt, the base template for server-rendered apps) and add the tag there.
   
   After sign-in, call Clew.identify() with non-personal properties as strings that tell a new user from an existing one — for example { signup_source: "web", onboarded: "false", role: "owner" } — and update onboarded to "true" when the user completes the key action. 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(...). Also add data-tour attributes to the main navigation and the primary create button. Never pass names or emails.
   
   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 pull request and merge

   Codex returns the change as a diff you can open as a pull request. Check that it touches the root file and the small additions only, merge, and let your hosting deploy.

   

5. Step 05

   Create the three onboarding items

   In Clew create three items in Flows: a Modal window with one welcome sentence and a link to the key screen; a Step-by-step tooltips tour of 3–4 steps on that screen, built with Edit on your site and Pick element; and a Onboarding checklist with the remaining setup tasks.

   

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
   Welcome popup
   Format	Modal window
   Where to show (page URL)	Exact path /board
   When to show	Right on page load
   Audience targeting	No rules — everyone who opens the page
   Frequency	Once per visitor
   Product tour
   Format	Step-by-step tooltips
   Where to show (page URL)	Section by prefix /board
   When to show	On click on an element: [data-tour="new-task"]
   Audience targeting	No rules — everyone who opens the page
   Frequency	Once per visitor
   Checklist
   Format	Onboarding checklist
   Where to show (page URL)	Section by prefix /board
   When to show	On the Nth visit: 2
   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: user onboarding with ChatGPT Codex