You run a WordPress site and you want a chat widget on it that can actually answer questions, not just collect emails into a void. The good news: adding AI live chat to WordPress is one line of script plus one URL. The part nobody warns you about is the two things that quietly break it, a caching plugin that hides the widget from the exact visitors you want to reach, and a chat icon that ends up out of thumb's reach on a phone. This guide walks the whole path and calls out both.
We will use muro for the chat and the AI. The same steps apply whether you are on a vanilla WordPress theme, a page builder like Elementor or Divi, or WooCommerce. There is no plugin to install from the muro side and no build step. You paste a snippet and you are live.
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. Then open the install screen at /onboarding/install or your site settings at /app/sites. You will see a short script with your own widget id baked in. 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:'wgt_yourId' });
</script>Copy the version with your real widgetId from the dashboard. The widget script itself is around 6 KB and loads asynchronously, so it will not slow your page down or block first paint. Do not retype the snippet by hand, a single wrong character in the id and the widget loads but attaches to nothing.
Step 2: Paste it site-wide
You want the snippet on every page, in the <head> or just before </body>. On WordPress there are two clean ways to do that. Pick one, not both.
Option A: a header and footer scripts plugin (recommended)
This is the path that survives theme updates. Install a small plugin whose only job is injecting scripts, Insert Headers and Footers by WPCode is the common pick, with millions of active installs, but any equivalent works. Then:
- 01In WordPress admin, go to the plugin's settings (under Settings, or its own menu item).
- 02Find the Scripts in Header box (a footer box also works for chat).
- 03Paste your muro snippet.
- 04Save.
Because it is a plugin and not your theme, the snippet stays put when you update or switch themes. This is the option we recommend for almost everyone.
Option B: the theme footer
If you would rather not add a plugin, paste the snippet directly into your theme. Go to Appearance → Theme File Editor, open footer.php, and paste the snippet just before the closing </body> tag (or use header.php and paste before </head>). Save.
Step 3: Verify it actually loads
Open your live site in a normal browser tab. Within about ten seconds 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.
If the bubble does not show up, do not guess. Open the browser console (right-click, Inspect, Console tab) and look for errors. The two usual culprits:
- →A Content-Security-Policy that blocks
muro.chat. If you see a CSP error, addmuro.chatto yourscript-srcdirective. - →Caching, which is the big one on WordPress and gets its own section below.
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 AI live chat 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, FAQ, or even your homepage. muro reads the page and turns it into help articles automatically, so the AI has something real to answer from on day one.
The AI Answer Agent is grounded only on that knowledge. It is instructed never to invent facts, prices, or features. When it does not know, it says so in one line and a human picks it up. It escalates on refunds, cancellations, account-specific actions, or a frustrated visitor, and the moment one of your teammates replies in the inbox, the AI backs off for that conversation so it never talks over a person. It is always labelled as AI and never pretends to be human.
The caching gotcha (this one is real)
Here is the problem that bites WordPress users most, and it is sneaky because it works perfectly when you test it. You are logged into WordPress as admin, you see the widget, everything looks great. But your actual visitors, who are logged out, see nothing.
“The chatbox is visible when logged in to WordPress, but not when logged out. I disabled LiteSpeed cache and it looks fine.”
That is the signature of a caching plugin. Tools like LiteSpeed Cache, WP Rocket, and W3 Total Cache serve a pre-built, heavily optimised page to logged-out visitors. Their JavaScript optimisation (combine, defer, delay, or minify) can mangle or strip an inline script like the widget snippet. Logged-in users like you bypass the cache, so you never see the breakage. Logged-out visitors get the broken cached version.
How to fix it
- 01First, prove it is the cache. Open your site in a private or incognito window (so you are logged out). If the bubble is missing there but present when you are logged in, it is caching.
- 02Exclude the script from JS optimisation. In your caching plugin's JavaScript settings, add an exclusion for
muro.chat(andwidget.js) so it is not combined, deferred, delayed, or minified. - 03Clear the cache after every change. None of your edits take effect for visitors until the old cached page is purged.
- 04Re-check in a fresh incognito window.
In LiteSpeed Cache, the relevant settings live under Page Optimization → JS Settings (look for JS Excludes and the Defer/Delay options). WP Rocket has a File Optimization tab with "Excluded JavaScript Files". W3 Total Cache has Minify settings where you can exclude scripts. The exact label differs per plugin, but the move is the same: tell the optimiser to leave the muro script alone, then clear the cache. If you just want to confirm the cause fast, temporarily disable the cache plugin, verify the widget shows up logged out, then re-enable it with the exclusion in place.
The mobile gotcha: keep the icon reachable
Most of your traffic is on phones, so check the widget on a real phone, not just a desktop browser shrunk down. Two things to look for:
- →The chat bubble should sit in the bottom corner within easy thumb reach, and should not collide with other floating elements (cookie banners, back-to-top buttons, sticky add-to-cart bars, scroll-to-top arrows).
- →When the chat opens, the visitor should be able to see what they are typing and close it again without fighting the layout.
If another floating element overlaps the bubble, move or restyle that element so the chat stays tappable. On WooCommerce, watch the sticky add-to-cart bar in particular, it is the most common thing that lands on top of the chat icon on small screens. Adjust widget position in your muro site settings if the default corner clashes with something on your theme.
What it costs
Honest version: there is a free trial, and there is 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.
AI runs on a monthly credit pool included in your plan, with optional top-up packs if you need more. Or paste your own Anthropic (Claude) key and the AI runs on your account, unlimited, at cost, with zero markup from muro. Each project can use its own key, so one site's AI usage never draws down another's.
That is the whole thing: one snippet pasted site-wide, the AI pointed at your docs, and the two WordPress gotchas (caching and mobile reach) handled before they cost you a single conversation. Start a free trial, paste the snippet, and you can have AI live chat answering on your WordPress site this afternoon. See pricing for the flat plans.