Add live chat to a Next.js site (9 KB, no SDK)
No npm install, no provider component, no client bloat. A single script tag that loads after hydration and never blocks your Core Web Vitals.
The muro team
muro.chat
- Published
- Reading time
- 3 min
Most chat widgets ship a React SDK that pulls a chunk into your bundle and a provider you wrap your app in. For a tiny chat bubble, that is a lot of weight on your Lighthouse score.
The lighter way
muro is vanilla JS, around 9 KB gzipped, loaded async after first paint, isolated in a Shadow DOM. Drop the script in your root layout and you are done. No bundle impact, no CLS.
tsx
// app/layout.tsx
import Script from "next/script";
<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_your_id"});
`}</Script>Signed-in users? Call muro("identify",{email}) and skip the pre-chat form. Start your trial.
