Framer ships a fast marketing site, but out of the box there is no way for a visitor to ask you a question without leaving the page. A contact form sends an email into a void and a mailto link opens an app most people do not want to open. What you actually want is a chat bubble in the corner that answers right there, and Framer makes this genuinely easy because it has a custom code field built for exactly this kind of script.
This guide walks the precise Framer path: where the Custom Code setting lives, which field to paste into, and why you test in a published preview rather than the editor. We will use muro for the chat and the AI, so the same widget that lets visitors talk to you can also answer from your docs automatically and hand off to you when it is unsure. No plugin, no build step, one line of script.
Step 1: Get your widget snippet
First create a project (a "site") in muro. During signup you name your site and muro generates a widget for it. Then open your install screen in the dashboard, where you will see a short script with your own widget id already baked in. The generic shape looks like this, and you replace YOUR_WIDGET_ID with the id from your dashboard:
html<script>
(function(w,d,s,o){
w.MuroChat=o;w[o]=w[o]||function(){(w[o].q=w[o].q||[]).push(arguments)};
var j=d.createElement(s);j.async=1;j.src='https://muro.chat/widget.js';
d.getElementsByTagName('head')[0].appendChild(j);
})(window,document,'script','muro');
muro('init',{widgetId:'YOUR_WIDGET_ID'});
</script>Copy the version with your real widget id, do not retype it by hand. A single wrong character and the widget script still loads but attaches to nothing, which is a frustrating thing to debug. The script itself is around 6 KB and loads asynchronously, so it will not slow your Framer site or block first paint, which matters because Framer sites are usually chosen for speed in the first place.
Step 2: Open Custom Code in Framer
Framer has a dedicated home for scripts like this, so you do not need to touch any component or layer. In the Framer editor, open the Settings panel for your project, go to the General tab, and scroll to the Custom Code section. You will see two boxes there: one labelled Start of <head> tag and one labelled End of <body> tag.
- 01In the Framer editor, click into your project Settings.
- 02Open the General tab.
- 03Scroll down to the Custom Code section.
- 04Find the field for the End of the <head> tag (the End of <body> tag field also works fine for chat).
Paste the muro snippet into the End of <head> tag field. The head is a clean place for an async loader like this. If you prefer, the End of <body> tag field works just as well for a chat widget, since the script loads asynchronously either way. Pick one field, not both, so the widget does not initialise twice.
Step 3: Publish, then test in the live preview
This is the step people miss. Custom code does not run inside the Framer editor or the in-editor preview. The editor is a design canvas, and for safety and performance it does not execute injected third-party scripts. So if you paste the snippet and stare at the canvas waiting for a chat bubble, you will wait forever and assume it is broken. It is not.
To see the widget, you have to publish. Click Publish in Framer, then open the published URL in a normal browser tab. Framer gives you a free preview domain (the one ending in framer.app or similar) and you can also connect a custom domain. The muro snippet works the same on both, because it keys off your widget id, not your hostname, so you can install on the Framer staging domain now and the install keeps working after you point a custom domain at the site.
Within about ten seconds of opening the published page, the chat bubble should appear in the corner. Back in muro, the dashboard detects the first ping from your domain within roughly thirty seconds and flips the site to a live status, so you get confirmation on both ends that the install worked.
Step 4: Turn on the AI and point it at your docs
A chat bubble that just sits there is a contact form with extra steps. The point of adding live chat with AI is that it answers. In muro, open your site, turn on AI auto-reply, and use Train on your site: paste the URL of your docs, your FAQ, or even your Framer homepage. muro reads the page and turns it into help articles automatically, so the AI has real material to answer from on day one, before you have authored a single doc by hand.
The AI is grounded only on that knowledge and is instructed never to invent prices, features, or facts. When it does not know, it says so in one line and a human picks it up. It escalates on things like refunds, cancellations, or a clearly frustrated visitor, and the moment you reply in the inbox the AI backs off for that conversation so it never talks over you. It is always labelled as AI and never pretends to be a person. If you want the deeper version of how that handoff works, see AI support that hands off to a human.
Common Framer gotchas
Most installs are clean, but here are the few things that trip people up on Framer specifically, so you can rule them out fast.
- →You are looking at the editor, not the published site. This is the number one cause of a missing bubble. Publish, then open the published URL in a separate tab.
- →The snippet went into the wrong field. It belongs in the End of <head> tag field (or End of <body> tag), not pasted into a code component or an embed on a single page.
- →Browser cache after republishing. Framer serves your site through a CDN, so after you publish, do a hard refresh or open the page in a private window to be sure you are seeing the newest version rather than a cached one.
- →A custom domain that has not finished pointing yet. The widget works on both the Framer preview domain and a custom domain, but if your custom domain is still propagating, test on the framer.app preview URL in the meantime.
If the bubble still does not appear on the published site, open the browser console (right-click, Inspect, Console tab) and look for errors. A blocked request to muro.chat usually points at a Content-Security-Policy, which is uncommon on a stock Framer site but worth a glance if you have added your own security headers.
What it costs
Honest version: there is a free trial with no card required, and no permanent free-forever plan. After the trial it is a flat price, Solo at $19/mo for up to two projects or Fleet at $59/mo for unlimited projects. Every plan includes unlimited agents with no per-seat charge and no per-resolution AI fees, which matters because per-conversation billing is how AI support bills quietly balloon as your traffic grows. There is more on that in why AI support gets expensive.
Managed AI runs on a monthly credit pool included in your plan. Or you can paste your own Anthropic key and the AI runs on your account, unlimited, at cost, with zero markup from muro, which is the cheapest way to run AI chat at volume. The full reasoning is in bring your own AI key. If you run several Framer sites, each project can use its own key, so one site's usage never draws down another's.
That is the whole path: grab your snippet, paste it into Framer's Settings, General, Custom Code field, publish, and test on the live URL, then point the AI at your docs so the chat actually answers. Start free, paste the snippet, and you can have AI live chat answering on your Framer site this afternoon. See the flat pricing if you want the numbers first.