Install on Framer
Paste the Nudge snippet in your Framer site's custom code (End of <head> tag), then publish.
What you need
- Your Nudge snippet (see where to copy it).
- Edit access to the Framer project, and the right to publish it.
Install the widget
Copy your snippet
In Nudge, go to Agents › Website Agent › On your site and click Copy the snippet on the Widget row. You can also open Settings › Integrations › Website › Framer, which shows the same code.
<script src="https://app.asknudge.ai/widget/loader.js"
data-org="your-workspace"
data-form="your-form" async></script>Paste it in the site settings
- Open your project in Framer.
- Go to Site Settings › General › Custom Code.
- Paste the snippet in End of
<head>tag. - Save.
Pasting it here, rather than on one page, runs it on every page of the site. The widget waits for the page to be ready, so the end of <head> is a safe place.
Publish
Click Publish. Framer only runs custom code on the published site: the widget never shows in the Framer canvas or in the editor preview.
Check
Open your published site (its real address, not the Framer preview) in a browser, then in Nudge click Re-check installation. See Verify the installation.
Inline mode
If your form uses the Inline embed display mode, the form needs a place in the page:
- Keep the
<script>in Site Settings › Custom Code, as above. - On the page where the form must appear, add an Embed component, choose HTML, and paste:
<div data-nudge-embed></div>- Publish.
The default chat bar needs no Embed component: it places itself at the bottom of the page.
Add the booking form
The booking form uses its own tag, placed in an Embed component on your Contact page. The script above must stay in the site settings: it is what displays the form. See Booking form.
Content Security Policy on Framer
Framer sites do not send a Content Security Policy by default. When one blocks the widget, it usually comes from a plugin (security, headers or cookie plugins) or from a custom-code snippet someone added. Look in Site Settings › General › Custom Code, and in each page's Custom Code, for a <meta http-equiv="Content-Security-Policy"> tag, then add the Nudge sources to it. The list of sources is on the Content Security Policy page.