Popups and tours on WordPress, Webflow, Shopify and other builders

By Andrey Davydov · updated September 29, 2026

Want a popup on your store, a tooltip on your pricing page or a tour for members? Every popular builder has a site-wide head code field: paste the Clew line there once, and build every format in the Clew editor.

Time: ● 5 minutes
Who does it: Site administrator
Steps: 6

Step by step

Step 01
Copy your snippet from Clew
Sign up or sign in to Clew and open Admin → Overview. The card “No signal from the widget yet.” shows your line with the real site key — click it to copy.
```

<script src="https://tryclew.io/widget/PASTE_YOUR_SITE_KEY.js" async></script>
```
Step 1 · schematic illustration
Step 02
Find the site-wide head code field
Look for a setting called Custom code, Code injection or Header that applies to the whole site, not to a single page. The exact path for each platform is in the table below.
Step 2 · schematic illustration
Step 03
Paste the line into the head
Paste your line into the head field — not the body and not a single page. If other scripts such as analytics are already there, add Clew on a new line; the order doesn’t matter.
Step 3 · schematic illustration
Step 04
Save and publish
Save the setting. In Webflow, Framer and Tilda the code reaches the live site only after you publish the site again; in WordPress, Shopify, Wix and Squarespace saving is enough.
Step 4 · schematic illustration
Step 05
Clear the cache
If the site uses a caching plugin or a CDN (WP Rocket, LiteSpeed Cache, W3 Total Cache, Cloudflare), purge the cache so visitors get pages with the new line. Plugins that delay or combine JavaScript should exclude tryclew.io/widget.
Step 5 · schematic illustration
Step 06
Make sure it works
Open any page of the live site in a regular browser window, then go back to Admin → Overview in Clew. Within a minute the card turns green: “Widget is live.”
Step 6 · schematic illustration

Exact paths by platform

Platform	Where to paste	Note
WordPress	Install the free WPCode plugin → Code Snippets → Header & Footer → Header → Save Changes	Or your theme’s own “header scripts” option. Don’t edit theme files: updates overwrite them. On WordPress.com, plugins need a Business plan or higher.
Webflow	Site settings → Custom code → Head code → Save, then Publish	Custom code needs a paid Site plan.
Shopify	Online Store → Themes → … → Edit code → `layout/theme.liquid`, right before `</head>` → Save	Applies to the storefront. Repeat after switching to a new theme.
Wix	Settings → Custom code → + Add Custom Code → All pages, Load code once, Place code in Head → Apply	Needs a Premium plan and a connected domain.
Squarespace	Settings → Developer tools → Code injection (on older sites: Advanced) → Header → Save	Code injection isn’t available on the cheapest plan.
Framer	Site settings → Custom code → End of <head> tag → Save, then Publish	Custom code needs a paid site plan.
Tilda	Site Settings → More → HTML code for the HEAD section → Edit code → Save, then Publish all pages	Needs a Personal or Business plan.
Plain HTML	Before `</head>` on every page, or once in the shared header include	Upload the changed files to hosting.

Marketing site or product?

Tours help most inside the product people sign in to. If your marketing site is on Webflow but the app is custom-built, install Clew in the app: see the AI assistant guide or Google Tag Manager.

What you can add with WordPress, Webflow, Shopify — no developer

Once the line is installed, every format below is built in the Clew editor. These guides pair the install with a concrete example.

Troubleshooting and FAQ

Can I add it to some pages only?

Add it site-wide. Which pages show a tour, and to whom, is set in Clew, so you won’t have to come back to the site settings.

My plan has no custom code field

Webflow, Framer, Wix and Squarespace allow third-party scripts only on paid plans, and there is no supported workaround. Upgrade the site plan, or install Clew in the product itself instead.

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.

Other ways to install

Tag manager

Popups and tours on WordPress, Webflow, Shopify and other builders

Step by step

Copy your snippet from Clew

Find the site-wide head code field

Paste the line into the head

Save and publish

Clear the cache

Make sure it works