How to Add an AI Chatbot to Your Framer Site (in About Two Minutes)

Framer sites look great, but on a small team nobody is sitting in front of an inbox at 2 a.m. Visitors arrive with the same handful of questions: what does it cost, do you ship to my country, how do I book, is there a refund. If the answer isn't obvious in five seconds, many of them leave.

An AI support chatbot fixes the 2 a.m. problem. It reads your site, answers those repeat questions in plain language, and passes anything it can't handle to you. On Framer, installing one takes about two minutes because Framer already has the setting you need: Custom Code.

This guide uses ChatBento, the one I build, but the Framer steps are the same for almost any chat widget that installs with a script tag.

What you need

• A published Framer site. Custom code only runs on the live site, not on the editor canvas.
• A Framer plan that allows custom code on your site.
• A chatbot account with a script snippet. In ChatBento, you create a chatbot, enter your site's address so it can read your pages, and copy the snippet from the Install tab.

The snippet is a single line:

<script src="https://chatbento.com/widget.js" data-bot-id="YOUR_BOT_ID" async></script>

Step 1: Teach the bot your site

Before you install anything, give the bot something to say. Enter your Framer site's URL and let it read your published pages. It follows your links and sitemap to find them.

Then add the things that aren't written on your site but that customers ask anyway:

• Delivery times, refund rules, and the exceptions
• The answer to "do you do X?" for the three X's people always ask about
• What to do when someone wants a human (an email, a booking link)

Ten good Q&As here are worth more than fifty pages of marketing copy.

Step 2: Paste the snippet into Framer

1. In Framer, open your project and click the gear icon to open Site Settings, then go to General.
2. Scroll down to Custom Code.
3. Paste the snippet into the End of <body> tag box.
4. Click Publish (or Update).

That's the whole install. Because the code sits in Site Settings, the chatbot appears on every page of your site.

Step 3: Test it on the live site

Open your published URL in a new tab. You should see the chat bubble in the corner. Ask it three things:

1. A question your site answers directly ("How much is the starter plan?")
2. A question only your Q&As answer ("Do you offer refunds after 30 days?")
3. A question it shouldn't answer ("What's the weather today?")

The first two should come back right. The third should get a polite "I can only help with questions about this site" rather than an invented answer. If any of them go wrong, fix the content, not the prompt: add or correct a Q&A and ask again.

Common Framer gotchas

"I don't see the bubble." You're probably looking at the editor canvas. Custom code doesn't run there. Check the published URL.

"I only want it on some pages." Leave Site Settings empty and paste the snippet into the Custom Code setting of each individual page instead.

"It works on my domain but not on the framer.website address." If you restricted your chatbot to allowed websites, add both your custom domain and your *.framer.website address so it works while you test.

"Will it slow down my site?" The script loads with async, after your page, and the chat window is only drawn when a visitor opens it. ChatBento's widget also renders in a shadow DOM, so your Framer styles can't break it, and its styles can't leak into your design.

Make it look like your site

A chat bubble in a clashing blue looks like an ad. In your chatbot settings, set:

• Accent color: your brand color from Framer
• Avatar: your logo or a team photo
• Greeting: something specific ("Questions about pricing or setup? Ask me.") instead of "Hi! How can I help?"
• Corner: bottom-right is the convention. Use bottom-left if a cookie banner or another button already sits bottom-right.

Open the chat from your own button

If you want a "Talk to us" button in your Framer nav, link it to the widget's JavaScript API:

window.ChatBento?.open();

In Framer, you can do this with a small code component, or by adding an onclick in an embed.

What it costs

I built ChatBento to cost one fifth of Chatbase: plans start at $8/month, against $40 for the matching Chatbase plan. The full step-by-step guide is at chatbento.com/integrations/framer.