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 6 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 free.