How to add a popup to a Webflow site without a developer

Example: a popup on Webflow

How to add the popup on Webflow, 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 Site settings → Custom code

   In the Webflow dashboard open the site’s Site settings and the Custom code tab. Custom code requires a paid Site plan.

   

3. Step 03

   Paste into Head code

   Paste the Clew line into Head code and press Save changes.

   

4. Step 04

   Publish the site

   Custom code reaches the live site only after Publish — to your custom domain and to webflow.io if you use both.

   

5. Step 05

   Write the popup in Clew

   In Clew open Flows → + New flow, set Format to Modal window. Add one step: a short title, one or two sentences, and in Link text / Link URL the button text and the page it opens. The modal needs no element selector — it always appears in the center.

   

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)	Exact path /
   When to show	After scrolling N%: 50 % of page
   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: popup on Webflow