What you need
- A Feedbot bot. Create one free from your site URL, then copy the bot id from Dashboard → Bot → Install.
- Edit access to the Framer project.
- A site plan that allows custom code. Framer’s pricing page lists Free, Basic and Pro plans (paid plans from $10/month as of October 2026) but doesn’t say which ones include custom code. If the fields in step 3 are locked, upgrade.
The snippet:
<script src="https://w.feedbotai.com/v1/feedbot.js" data-bot-id="YOUR_BOT_ID" async></script>How to add a chatbot to Framer
- Open your project in Framer.
- Click the gear icon (top right) to open Site Settings.
- Go to the Custom Code section. In recent versions it is under General; Framer’s help article shows the current layout.
- Paste the snippet into End of
<body>tag. - If Framer asks how often to run the code, choose to run it once. The widget keeps itself loaded as visitors move between pages.
- Save, then click Publish (top right).
- Open the published site in a private window and send a test message. It appears in the Feedbot inbox.
Which slot to use
Framer gives you four places for site-wide code, described in Framer Academy:
| Slot | Use for Feedbot? | Why |
|---|---|---|
Start of <head> |
No | Reserved for things that must load first, like consent tools |
End of <head> |
Works, but not needed | Loads before content is painted |
Start of <body> |
No | Same as above, no benefit |
End of <body> |
Yes | Loads after your page content |
Show it on some pages only
Framer recommends putting a script in a page’s own settings when only that route needs it. Open the page in the Pages panel, go to its settings, find Custom Code and paste the snippet into End of <body> tag. Remove the site-wide copy if you had one.
Good candidates for page-only placement: Pricing, Contact and a Help page. A portfolio home page often looks cleaner without a chat button.
Embed the chat in your layout
For a dedicated “Ask us anything” section, use inline mode. Add an Embed element with HTML set to:
<div id="feedbot-chat" style="height: 560px"></div><script src="https://w.feedbotai.com/v1/feedbot.js" data-bot-id="YOUR_BOT_ID" data-mode="inline" data-container="#feedbot-chat" async></script>Size the Embed element to the same height. The widget runs in a Shadow DOM, so your Framer styles don’t affect it. Set data-primary-color to match your brand. All options are in Install the widget.
Chatbot templates vs a working chatbot
Search Framer’s Marketplace for “chatbot” and you’ll mostly find site templates for AI startups and chat UI components. They look like a chat but don’t answer anyone: there’s no model, no knowledge base and no inbox behind them. A working chatbot needs a backend that reads your content, replies, and notifies you when a person should step in. That’s what the script above adds, without changing your design.
Troubleshooting
| Symptom | Cause | Fix |
|---|---|---|
| Nothing on the canvas or in preview | Custom code doesn’t run there | Test on the published URL |
| Nothing on the live site | Saved but not published | Click Publish |
| Custom Code fields can’t be edited | Site isn’t on a plan that allows custom code | Upgrade the site plan |
Works on yoursite.framer.website, not on your domain (or reverse) |
Allowed domains lists only one | Add both in Bot → Install → Allowed domains |
| Chat button sits over a sticky CTA | Same corner | Use data-position="bottom-left" |
Train it on your site
Framer is popular for startup landing pages, portfolios and agency sites. Visitors ask what you do, what it costs, how long a project takes and how to get in touch. On the Free plan, paste those answers as text and FAQ. From Starter, import the site by URL or sitemap.xml (Framer publishes one at /sitemap.xml). Feedbot renders JavaScript-heavy pages in a browser when it imports them, so Framer sites import fine. Click Refresh website after you publish changes. See Knowledge base.
On a startup site, the bot’s sales role helps too: it qualifies visitors and shows a button to sign up or book a call, and contacts go to Leads.
Next steps
- Get pinged in Telegram or Slack when someone wants a person: Human handoff.
- Compare plans: Pricing.
- No site yet? Share a hosted chat link instead.