Add popups, product tours and checklists without a developer
Want a welcome popup, a guided tour of your app or an onboarding checklist — but the developers are busy? Clew needs one line on the site, added the way you already manage it: a tag manager, an AI coding assistant or a site builder. After that every format is built in a visual editor, no releases.
What do you want to add?
Choose the result you need. Every page explains when the format helps, how to set it up in Clew and what it costs — the pricing is taken straight from the plan grid.
How to add a popup to your website without a developer
A modal window with your offer, announcement or help — shown on the right page, at the right moment, once per visitor.
14-day free trial, no cardOpen guide →Product tourHow to create a product tour without a developer
Step-by-step tooltips that walk a user through a screen: point at the button, explain, go to the next step.
Free planOpen guide →Onboarding checklistHow to add an onboarding checklist to your app without a developer
A progress list in the corner of the app: the first tasks a new user should do, each linking to the right page.
14-day free trial, no cardOpen guide →User onboardingHow to set up user onboarding without a developer
A first-session flow: a welcome popup, a short tour of the key screen and a checklist for the next visit.
Tours free · rest 14-day trialOpen guide →TooltipHow to add tooltips and hints to your website without a developer
A single hint next to a field or button — shown when the visitor gets there, or when they click.
Free planOpen guide →Interactive guideHow to create an interactive product guide without a developer
A help checklist whose items launch tours on the right pages — a how-to guide inside the product.
14-day free trial, no cardOpen guide →Paywall promptHow to add a paywall upgrade prompt without a developer
A targeted upgrade modal for free users who reach a paid feature, linking to your own pricing page.
14-day free trial, no cardOpen guide →Rating popupHow to add a rating popup to your website without a developer
Ask “How do you like us?” with stars or 0–10, then thank the happy customer with a link to your review page and ask the unhappy one what to fix.
14-day free trial, no cardOpen guide →Choose your route
Google Tag Manager
A Custom HTML tag on All Pages, a check in Preview, publish. For sites that already use GTM.
Open guide →Vibe codingAI coding assistants
One prompt for Claude Code, Cursor, Lovable, Bolt.new, v0 and Replit that puts the line in the right root file.
Open guide →No-codeWebsite builders & CMS
WordPress, Webflow, Shopify, Wix, Squarespace, Framer, Tilda or plain HTML: where the head code field is and what to press.
Open guide →CodeReact and Next.js apps
One line in index.html or the root layout, identify() after login and stable data-tour anchors. Vite, Create React App, Next.js.
Open guide →Installed? Now test what works
Split visitors between two versions of a tour, tooltip or checklist and keep the one that gets finished more often.
Let an AI assistant manage your tours
Connect Claude, Cursor or ChatGPT’s Codex to Clew: draft tours from a sentence, read their stats and fix broken steps without opening the admin.
Popular combinations
- ShopifyHow to add a popup to a Shopify store without a developer
- WordPressHow to add a popup to a WordPress site without a developer
- WebflowHow to add a popup to a Webflow site without a developer
- WixHow to add a popup to a Wix website without a developer
- Google Tag ManagerHow to add a popup to your website with Google Tag Manager without a developer
- WordPressHow to add a tooltip on WordPress without a developer
- Google Tag ManagerHow to create a product tour via Google Tag Manager without a developer
- LovableHow to create a product tour in a Lovable app without a developer
- LovableHow to set up user onboarding in a Lovable app without a developer
- WordPressHow to add a rating popup to a WordPress site without a developer
- ShopifyHow to add a rating popup to a Shopify store without a developer
- ShopifyHow to add a tooltip on Shopify without a developer
- WordPressHow to create a product tour on WordPress without a developer
- FramerHow to add a popup to a Framer site without a developer
By platform
Which guide fits you
- Your site already has Google Tag Manager and you can publish in itGoogle Tag Manager →
- You build the app with Lovable, Bolt.new, v0, Replit, Cursor or Claude CodeAI coding assistants →
- The site runs on WordPress, Webflow, Shopify, Wix, Squarespace, Framer or TildaWebsite builders & CMS →
- Your app is built with React (Vite, Create React App or Next.js) and a developer can add one lineReact and Next.js apps →
Where to get your snippet
Every guide starts here. Create a free account, add your site and open Admin → Overview. The card “No signal from the widget yet.” shows your personal line — click it to copy.
The line looks like this, with your key instead of the placeholder. The key is public by design: it ends up in your page’s HTML anyway.
<!-- 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>
Product tours, popups and onboarding in the age of AI → (PDF, 2 pages)
Troubleshooting and FAQ
Do I need a developer at all?
Not if you can edit your site settings, your GTM container or your AI-built project. If the product is a custom app and nobody on your team has access, press Invite a developer in Admin → Overview: it prepares an email with the exact line and instructions. For a developer it is a five-minute job.
Which method is best?
The one you already use. Every guide adds the same line, and Clew works the same afterwards. A direct install (site builder or AI assistant) loads slightly earlier than a tag manager, which is only noticeable on a tour that starts the moment the page opens.
Where should Clew go: the marketing site or the app?
Wherever the people you want to guide are — usually the signed-in web app. Tours only run on pages where the line is installed.
Will I have to reinstall when I change tours?
No. The line never changes: tours, tooltips and checklists are created and published in the Clew editor without touching the site again.
The admin still says “No signal from the widget yet.”
Open a page of the live site in a regular browser window and reload the admin after a minute. If nothing changes: make sure the change is published, not just saved; check that the placeholder was replaced with your real key; open the browser developer tools, Network tab, and look for widget/…js — it must return status 200. A 404 there means the key is wrong.
My site has a Content Security Policy
Two directives, nothing else: script-src https://tryclew.io and connect-src https://tryclew.io. The widget uses no eval, no blob: URL and no worker, and it installs its stylesheet through the CSSOM rather than as markup, so style-src 'unsafe-inline' is not needed in Chrome, Edge, Firefox 101+ or Safari 16.4+. Older browsers fall back to a <style> element — if you still support them and your style-src has no 'unsafe-inline', tours render there without styling. Copy-paste: Content-Security-Policy: script-src 'self' https://tryclew.io; connect-src 'self' https://tryclew.io;
Can I pin the widget version and use <code>integrity=</code>?
Yes. The line in the guides — /widget/PASTE_YOUR_SITE_KEY.js — is the rolling one: it always serves the current widget, which is why it cannot carry a Subresource Integrity hash (the bytes change). Alongside it every release is also served at an immutable, content-hashed address. Ask https://tryclew.io/api/v1/widget-version?site=YOUR_KEY and you get back version, path and integrity; put those two in the tag: <script src="https://tryclew.io/widget/v/<version>/YOUR_KEY.js" integrity="sha384-…" crossorigin="anonymous" async></script>. A pinned URL never changes under you, so the browser refuses the file if a single byte differs. You then update the version when you choose — ask the same endpoint in your deploy script. Nothing else changes: tours are still published from the Clew editor without touching the site.
Will an ad blocker eat the widget?
No. Our domain is on none of the big lists — EasyList, EasyPrivacy, AdGuard, uBlock Origin — so tours, tooltips and checklists appear for visitors running a blocker like everyone else. Statistics are the delicate part: EasyPrivacy blocks every third-party ping request, so the widget sends its events as an ordinary request instead, which those lists let through. To be out of reach of custom blocklists entirely, serve the widget from your own domain: point https://your-site/clew/* at https://tryclew.io/* in your CDN or nginx and change the line to <script src="/clew/widget/YOUR_KEY.js" async></script>. The widget then asks the API under the same prefix and everything is first-party.
Does it work in single-page apps (React, Vue, Next.js)?
Yes. Load the line once, in the root HTML or root layout. The widget follows client-side route changes itself (History API and hash changes), so do not add it per route and do not fire it on a “History Change” trigger — a second copy is ignored, but it is wasted work.
What about cookie consent banners?
Clew stores a first-party cookie and localStorage entries to remember which tours a visitor has completed and to count completions. It sends no data to advertising networks. Whether it may run before consent is a decision for your privacy policy; if your consent tool blocks it until the visitor agrees, tours simply start after consent.
I use a caching or optimization plugin
Purge the cache after installing, otherwise visitors keep getting old pages without the line. If the plugin delays, combines or defers JavaScript (WP Rocket, LiteSpeed Cache, Autoptimize, Cloudflare Rocket Loader), exclude tryclew.io/widget from those optimizations.
Will it slow down my site?
No. The line has async: the browser downloads the widget in parallel and runs it without blocking the page. The widget has no dependencies.
Can my app tell Clew that an onboarding step is done?
Yes, and it is one line. A checklist item can carry a rule that ticks it without the visitor clicking anything: a page they reach, a click on an element you name with a CSS selector, or an event your own code fires — Clew.complete('invited'), where invited is the key you typed next to the item in the editor. Call it at the moment the thing is really done, for example after your API confirms the invite. It is safe to call at any time and returns false when no checklist with that key is on the page. The older global name TutorKit still works.