Clew

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

A step-by-step guide to a popup on Framer: install one line, write the modal in the Clew editor and decide when it appears — after a delay, on scroll, on a repeat visit — without touching the theme again.

Time
● 10 minutes
Price
14-day free trial, no card
Who does it
Framer site editor

Example: a popup on Framer

A startup launched version 2 and its site is on Framer. For five seconds visitors see the new homepage; then a modal “v2 is live — watch the 90-second tour” appears once, linking to the launch video.

This format is part of the Pro plan. Every new account starts with a 14-day free trial with all formats and audience rules, no card required. When the trial ends nothing is deleted and published items keep showing; the Free plan keeps tours and tooltips free.

How to add the popup on Framer, 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>
    Clew admin Overview with the embed line and a masked site key (popup on Framer)
    Step 1 · schematic illustration
  2. Step 02

    Open Site settings → Custom code

    In your Framer project open Site settings and the Custom code section. It needs a paid site plan.

    Settings paths to the head code field, including Framer Custom code (popup on Framer)
    Step 2 · schematic illustration
  3. Step 03

    Paste at the end of the head

    Paste the Clew line into End of <head> tag and save.

    Custom code field with the Clew script tag pasted (popup on Framer)
    Step 3 · schematic illustration
  4. Step 04

    Publish

    Press Publish. The code runs on the published site, not in the canvas preview.

    Builder top bar with the Publish button highlighted (popup on Framer)
    Step 4 · schematic illustration
  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.

    A popup (modal window) with a title, text and a link button over a website (popup on Framer)
    Step 5 · schematic illustration
  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:

    SettingValue
    FormatModal window
    Where to show (page URL)Exact path /
    When to showAfter N seconds: 5 seconds
    Audience targetingNo rules — everyone who opens the page
    FrequencyOnce per visitor
    Clew tour editor with the format, page URL rule, trigger and audience rule fields (popup on Framer)
    Step 6 · schematic illustration
  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.

    Clew admin Overview with the green “Widget is live” card (popup on Framer)
    Step 7 · schematic illustration

Pitfalls: popup on Framer

Framer navigates without full reloads

Moving between pages doesn’t reload the document. The widget follows these route changes itself, so a popup bound to a page URL still appears when the visitor arrives there.

Generated class names

Framer class names like framer-1x2y3z can change after edits. A modal doesn’t need a selector; if you later add tooltips, re-check them in Health after republishing.

Don’t stack it with the builder’s own popups

If the theme or a plugin already shows a newsletter or cookie popup on the same page, visitors get two overlays. Turn one off or give Clew a different trigger (scroll or second visit).

Questions and answers

Can I change the text without republishing Framer?

Yes. The popup lives in Clew: edit and save, and the live site shows the new text on the next page view.

Does it slow down Framer’s page speed score?

The line is async and loads a small script without dependencies after the page; it doesn’t block rendering.

Can I show the popup only on one page?

Yes. Install the line site-wide and choose Exact path or Section by prefix in Where to show (page URL). The popup won’t appear anywhere else.

Is the popup free?

The modal format is part of Pro; new accounts get a 14-day trial with everything, no card. Tours and tooltips are free on the Free plan.

Where does the button lead?

To any page you enter in Link URL — it opens in a new tab so the visitor doesn’t lose the page they were on.

One line on your site — then tours, tooltips and checklists without releases.

Get your site key — freeHow Clew worksFree plan forever, no credit card

Product tours, popups and onboarding in the age of AI

7 patterns with step counts, copy rules and what to measure, what AI changes, and a checklist before you publish. PDF, 2 pages. What is inside →