Documentation

Framer

Add your agent to a Framer site using Custom Code.

Add your AI agent to a Framer site via Custom Code. The snippet loads on every page once published.

First, get your embed code from Chatbot > Channels in the dashboard.

Quick Setup

  1. Open your project in Framer.
  2. In the left sidebar, click Project Settings (the gear icon).
  3. Select the Custom Code tab.
  4. Click + Add Script.
  5. Give the script a recognisable name (e.g. Agentkit Widget).
  6. Paste your embed code into the script body.
  7. Under placement, choose End of <body> tag (Body End) — this is the recommended option for chat widgets.
  8. Choose to load on All pages.
  9. Click Save.
  10. Click Publish in the top-right to push the update live.

Example format (use the real values from Chatbot > Channels):

<script
  src="YOUR_WIDGET_URL"
  data-chatbot="YOUR_CHATBOT_ID"
  async
></script>

Why End of <body>, not Head

Framer separates Custom Code into Head Code and End of <body> Code. Chat widgets should go at the end of <body> so they don't delay the first paint of the page — this also matches the async attribute on the script.

Head Code is reserved for things that must run very early, like analytics pixels or font preloads.

Page-Specific Install

To load the widget on specific pages only:

  1. Select a page in the Framer layers panel.
  2. Open Page Settings (right-hand panel).
  3. Add Custom Code there instead of in Project Settings.

Page-level code only runs on that specific page.

Plans & Domains

  • Custom Code is available on Framer sites but running it on a custom domain (not *.framer.website) typically requires a paid plan.
  • The widget works on the default *.framer.website URL if your plan allows Custom Code there.

After Publishing

Framer Custom Code does not run inside the editor or preview — only on the published site. After hitting Save, click Publish and then open the live URL.

Troubleshooting

Widget doesn't appear in the editor preview.

  • Expected. Custom Code only runs on the published site.

Widget doesn't appear on the published site either.

  • Confirm you clicked both Save and Publish.
  • Confirm your domain is allowed in Chatbot > Channels > Security.
  • Hard-refresh (⌘+Shift+R) to bypass CDN cache.

Widget flashes then disappears.

  • Check for Framer's page transitions or animations that may reload the DOM. The widget should re-mount on each page load — if it doesn't, contact support.

Testing

  1. Open the published URL in an incognito window.
  2. Look for the chat bubble.
  3. Click to open and send a test message.

Next Steps