muro.chat
Start your trial

Add live chat to Next.js

Load the snippet once in the root layout with next/script.

Steps

  1. 1
    Open app/layout.tsx (App Router) or pages/_app.tsx (Pages Router).
  2. 2
    Add the Script below inside <body>, so it loads once for every route.
  3. 3
    Deploy.
app/layout.tsx
import Script from 'next/script';

// app/layout.tsx, inside <body>:
<Script id="muro-chat" 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_…'});
`}</Script>
  • A raw <script> tag in JSX does not run in React: use next/script, or the React component.

Replace wgt_… with your site's widget ID. Your muro dashboard shows this same code with the ID already filled in. Script source: https://muro.chat/widget.js.

Check that it works

Open your site in a private window: the chat bubble shows in the bottom corner within a few seconds. In muro, the site page turns green as soon as a browser loads the widget, and the Check installation button tells you what is wrong if it does not: snippet missing, another site's widget ID, a Content-Security-Policy that blocks muro.chat, or a cache that still serves the old page.

The longer Next.js walkthrough on the blog

Free on one site, no card. Your snippet is ready as soon as you add the site.

Get your snippet

Other platforms