The muro snippet is platform-agnostic — eight lines of vanilla JavaScript that drop in any <head>. The only difference between platforms is where you paste them. Below is the click-by-click for the five most common stacks our customers run on.
Shopify
- 01Admin → Online Store → Themes
- 02On your active theme, click Actions → Edit code
- 03In the file tree, open
theme.liquid(under Layout) - 04Find the
</head>tag and paste the muro snippet just above it - 05Save. Visit your storefront — the widget should appear within ~10 s
Bonus: if you have a checkout page on Shopify Plus, repeat the same paste in checkout.liquid so abandoning customers can ask questions before bailing out.
WordPress
Two paths. The clean one: install a "header scripts" plugin (we like Insert Headers and Footers — 2M+ active installs). Plugin → Settings → Insert Headers and Footers → paste in the Scripts in Header box → Save.
The theme path: Appearance → Theme File Editor → header.php → paste before </head>. Faster, but lost on every theme update unless you're on a child theme.
Webflow
- 01Project Settings → Custom Code
- 02Paste the muro snippet in the Head Code box (top section)
- 03Click Save Changes
- 04Publish your site — the widget shows up on the live domain (not on the Webflow editor preview)
Wix
- 01Dashboard → Settings → Custom Code
- 02Click Add Custom Code → paste the muro snippet
- 03Set "Add Code to Pages" to All pages + Load code on each new page
- 04Place code in: Head
- 05Save. Wix can take ~2 min to propagate; refresh your site after.
Next.js (App Router or Pages Router)
Use the built-in <Script> component with strategy="afterInteractive" so the widget never blocks first paint. App Router example in app/layout.tsx:
tsximport Script from 'next/script';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>{children}</body>
<Script id="muro" strategy="afterInteractive">{`
(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>
</html>
);
}Pages Router users: paste the same <Script> block in pages/_app.tsx inside the returned fragment. Both renderers respect the afterInteractive strategy and load the widget after hydration.
Anywhere else
If your stack isn't in the list above, you almost certainly have a way to inject HTML in the <head> of every page. Squarespace, Ghost, Hugo, Astro, Remix, SvelteKit — all of them ship with a "head injection" mechanism. Paste, save, done.
Verifying the install
After paste, the muro dashboard detects the first ping from your site within ~30 s and flips the site to a live status. If it stays grey, open the browser console — 90% of issues are a Content-Security-Policy that blocks muro.chat. Add it to your script-src directive and you're live.