Add the selector to a Framer site

Framer's own help article confirms the panel, the button, and the run frequency options below. It does not spell out what the placement choices are called, and Framer redesigned this panel recently. Check the screen, and tell us what you see.

Where the snippet goes

1. Open Project Settings, then select the Custom Code tab in the left sidebar.
2. Click Add Script. If you already have snippets, click the + icon instead.
3. Give the script a name you will recognise later.
4. Paste the snippet in, and set the placement control to the end of the head. Framer offers a start and an end position for both the head and the body.
5. Leave it applying to the whole site rather than picking specific pages, so the selector is available everywhere.
6. For how often the code should run, choose Once, not Run on every page visit. See below.
7. Click Publish, top right of the editor. Nothing is live until you publish.

Copy the snippet from Settings, then Selector, in your project.

The trap on Framer

Framer asks a question most builders do not: how often the code should run. The options are Once and Run on every page visit. Choose Once. It is Framer's default, and Framer names it as usable for third-party scripts. (Framer suggests the per-visit option for tracking scripts instead, which is not what this is.)

Picking every page visit looks like the safer answer on a site that swaps pages without reloading the browser, but it is not needed here. Our script hooks the browser's history and watches the page, so it remounts the selector by itself whenever Framer changes the page underneath it. Every page visit would re-run the whole loader on every navigation for no gain.

How to know it worked

Open your published site and view the page source, then search for ut/v1.js. One match means the snippet is live.

The check on the Selector settings screen turns green on its own, but give it a moment after publishing. A red check straight after clicking Publish means "not yet", not "it failed".