How to add live chat to Webflow (including the plan requirement nobody mentions)

Your Webflow site looks exactly the way you want it to. That was the point of building on Webflow. But the only way visitors can reach you is probably a contact form that dumps into an inbox you check twice a day, and by the time you reply, the person who asked about pricing has already moved on. Adding live chat to Webflow closes that gap, and the install itself takes about ten minutes.

Here is the plan: grab a snippet from muro, paste it into Webflow's custom code settings, publish, test, then point the AI at your docs so most questions get answered without you. One thing first, though, because most guides bury it.

The honest part first: site-wide custom code needs a paid Webflow plan

Webflow only runs site-wide custom code on a published site that has a paid site plan attached. The head and footer code fields exist in your site settings either way, but on an unpaid site the code simply does not ship with the published pages. That is a Webflow rule, not a muro one, and it applies to every chat widget, analytics script, and marketing pixel out there.

• →Paid site plan: paste the snippet once in the site settings custom code section and the widget appears on every page. This is the clean route.
• →Free workaround: drop an Embed element onto a page in the Designer and paste the snippet there. It works without a paid plan, but it lives on that page only. There is a trick to make it near site-wide, covered below.

If you already pay for a site plan, use the settings route. If not, use the Embed element now and move the snippet into site settings whenever you upgrade. Both paths use the exact same code.

Step 1: get your muro snippet

Create an account at signup (14-day trial, no card), add your site as a project, and muro hands you a widget snippet. It looks like this:

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>

Replace YOUR_WIDGET_ID with the ID from your muro dashboard. The script is about 6 KB and loads async, so it does not block rendering or drag your page speed down. That matters on Webflow, where you probably spent real hours on the design and do not want a clunky third-party bubble wrecking it. You can set the widget's color, position, size, agent name, and avatar in muro so it matches the site instead of fighting it, and the widget ships in 12+ languages if your audience is not English-only.

Step 2: paste it into Webflow's custom code settings

This happens in the Webflow dashboard, not the Designer. Open your site's settings and look for the custom code section. Webflow reshuffles its menus now and then, so if you do not spot it immediately, it sits among the site-level settings tabs, usually labeled something like Custom code.

1. 01Open your site's settings from the Webflow dashboard.
2. 02Find the custom code section.
3. 03Paste the muro snippet into the head code field or the footer code field. Either works.
4. 04Save the changes.
5. 05Publish the site. Custom code only runs on the published site, never inside the Designer canvas.

Head or footer? It genuinely does not matter much here. The snippet is async either way. Head code starts the download a few milliseconds earlier; footer code keeps your head tidy. Pick one and move on.

The free workaround: an Embed element

No paid site plan yet? Use Webflow's Embed element. In the Designer, open the Add panel, find the Embed element, drop it anywhere on the page (near the footer is a sensible spot), and paste the same snippet inside. The chat bubble positions itself in the corner of the viewport no matter where the element sits in your layout.

The catch: an Embed element only exists on the page you put it on. The workaround for the workaround is to paste the embed inside a component you already reuse on every page, like your global footer or navbar component. Update the component once and the chat widget follows it everywhere that component appears. Not quite site-wide, but close enough until you upgrade.

Step 3: publish and test

Publish to your webflow.io staging domain or your custom domain, then open the live site in a private window so you are seeing exactly what a first-time visitor sees, with no logged-in state or cached scripts.

• →The chat bubble appears in the corner you configured.
• →Open it and send a test message the way a visitor would.
• →The message shows up in your muro inbox within a second or two.
• →Reply from the inbox and confirm the answer lands back in the widget.
• →Check a page on mobile. The widget adapts on its own, but it is worth a glance at how it sits next to your layout.

If you care about performance scores, run Lighthouse before and after the install. An async script of about 6 KB has close to zero effect on the numbers, and it is better to hold that measurement yourself than to trust a vendor's claim, including this one.

Step 4: turn on the AI so chat is not a second job

Here is the real objection to live chat, and it is a fair one: a chat bubble is a promise of fast answers, and you are one person with a product to build. The fix is letting AI take the first pass. In muro, the AI answers from your published help articles and your product context. It does not improvise from general internet knowledge, so it will not invent a refund policy you never wrote.

Training it takes one step: import a URL. Point muro at your docs or FAQ page, including help content you built with Webflow CMS, and it ingests the pages and grounds every answer on them. When your docs change, re-import and the AI is current again. No embeddings to manage, no prompt engineering homework.

When a question falls outside what it knows, the AI hands the conversation to you instead of guessing. The handoff triggers are the ones that actually matter: refund requests, account-specific issues, and visitors who are clearly frustrated. Those conversations land in your shared inbox flagged for a human, with the full transcript attached so you are not starting cold.

On cost: the Solo plan is $19/mo, covers up to 2 projects, and includes 1,000 managed AI credits per month, where 1 credit equals 1 AI action. If you would rather not meter it at all, paste your own Claude (Anthropic) API key and BYOK gives you unlimited AI at zero markup. Both plans come with unlimited agents, so inviting a cofounder or a VA into the inbox costs nothing extra. Full details on the pricing page.

Beyond the widget

A few things that are invisible on day one but earn their keep by week two:

• →Email forwarding with reply-by-email: forward support@yourdomain into muro and handle email and chat from the same inbox.
• →Saved replies and automation rules: stop retyping the same three answers about invoices and password resets.
• →A full REST API and webhooks: pipe conversations wherever you want. See the API docs.
• →A hosted MCP server: read and answer support conversations from Claude or any MCP client without leaving your editor.
• →EU hosting with GDPR export and erasure built in: useful if your Webflow site serves European visitors and you would rather not think about it twice.

Quick troubleshooting

• →Nothing appears at all: confirm you published after saving, and that the site has a paid plan if the snippet lives in site settings.
• →Works on one page only: the snippet is sitting in an Embed element on that page. Move it into a global component, or into site settings once you have a plan.
• →Bubble appears but messages never arrive: double check that the widget ID in the snippet matches the project in your muro dashboard.
• →An old version keeps showing: publish again in Webflow, then hard refresh. Browser caching hides fresh code more often than anything actually being broken.

That is the whole install: create a site in muro, paste the snippet into Webflow's custom code settings (or an Embed element inside a global component while you are on the free plan), publish, and point the AI at your docs. Ten minutes of setup, and your Webflow site answers questions while you are busy building the thing people are asking about. Want to poke at the widget before signing up? The live demo is exactly that.