Skip to content
Public beta preview — you're seeing the sneak peek

Framer — install the widget

read as .md

On Framer the tag goes in through Project Settings as a custom-code script — no Designer work. The tag is the same on every platform — Install the widget has the general picture; this page has the exact place on Framer.

The tag — put your app id in place of app_abc123
<!-- guuey widget. Add this site to the app's allowed domains or the embed is refused. -->
<script src="https://widget.guuey.com/v1.js" data-app="app_abc123" async></script>
  1. Open Project Settings and select the Custom Code tab from the left sidebar.
  2. Click Add Script (or the + icon if you already have scripts), give it a clear name, and paste the tag.
  3. Choose where it runs: Placement at End of <body>, Page left at All, and Run set to Run on every page visit — Framer describes that option as executing the code each time someone visits the page, which is what keeps the launcher on every page.
  • Framer's own list of what custom code is for names "Chat and support widgets" — this tag is one.
  • Per-page scripts exist (pick pages under Page); the widget belongs on All.

Verified against the vendor's documentation on 2026-09-09: How to add custom code (Framer Help; article marked 'Updated last month' at the read). Vendor interfaces change — if a step no longer matches what you see, the vendor's page above is the source of truth.

Allow your site’s origin (console → Embed → Allowed origins, or guuey apps update <appId> --domains <origin>; about 15 seconds to apply), add the CSP allowances if your site sets a policy, then verify with guuey apps check <appId> --origin <origin> — the steps are on Install the widget.

Paste into your coding agent
Install the Guuey chat widget on this Framer site. Before changing anything,
read https://docs.guuey.com/embed/framer.md and https://docs.guuey.com/install-widget.md
(the raw markdown of the two pages) and follow them exactly; do not invent options
or steps they do not contain.
1. Put this tag in Project Settings → Custom Code → Add Script: placement End of <body>, Page All, Run on every page visit, with my app id <appId> in place of app_abc123:
<script src="https://widget.guuey.com/v1.js" data-app="app_abc123" async></script>
Add nothing else to the tag — except your page's CSP nonce, if the site uses
nonces (step 3).
2. Tell me the exact origin(s) my pages are served from (scheme + host) so I can
add them to the app's allowed domains in the console (Embed → Allowed origins)
or with: guuey apps update <appId> --domains <origin>. Remind me that a bare
hostname covers the apex and every subdomain, while a scheme-prefixed origin is
an exact match, and that changes take about 15 seconds to apply.
3. If this site sets a Content-Security-Policy, add exactly these allowances and
nothing more. If the policy uses nonces (script-src 'nonce-...'): render the
site's per-request nonce on the widget tag the way its other script tags carry
it — that is what lets the loader run, and the loader puts the same nonce on the
one <style> it injects; then allow https://widget.guuey.com in frame-src and
connect-src. If the policy uses host allowlists: add https://widget.guuey.com to
script-src, frame-src and connect-src, and 'unsafe-inline' to style-src.
4. When I've saved the origin, verify with:
guuey apps check <appId> --origin <origin>
Stop and ask me before any step those two pages do not describe.