Installing live chat on Shopify, WordPress, Webflow, Wix, and Next.js

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

1. Admin → Online Store → Themes
2. On your active theme, click Actions → Edit code
3. In the file tree, open theme.liquid (under Layout)
4. Find the </head> tag and paste the muro snippet just above it
5. Save. 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

1. Project Settings → Custom Code
2. Paste the muro snippet in the Head Code box (top section)
3. Click Save Changes
4. Publish your site, the widget shows up on the live domain (not on the Webflow editor preview)

Wix

1. Dashboard → Settings → Custom Code
2. Click Add Custom Code → paste the muro snippet
3. Set "Add Code to Pages" to All pages + Load code on each new page
4. Place code in: Head
5. Save. 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:

import 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.