muro.chat
Start your trial

Add live chat to React

Drop a small MuroChat component in your app root, or paste the snippet in index.html.

Steps

  1. 1
    Create MuroChat.tsx with the component below.
  2. 2
    Render <MuroChat /> once, in your app root (App.tsx or your layout).
  3. 3
    Deploy. With Vite or Create React App you can instead paste the HTML snippet before </head> in index.html.
MuroChat.tsx
'use client';
import { useEffect } from 'react';

// Loads the muro chat once. Render <MuroChat /> in your app root.
export function MuroChat() {
  useEffect(() => {
    const w = window as any;
    if (w.muro) return;
    w.MuroChat = 'muro';
    w.muro = function () { (w.muro.q = w.muro.q || []).push(arguments); };
    w.muro('init', { widgetId: 'wgt_…' });
    const s = document.createElement('script');
    s.async = true;
    s.src = 'https://muro.chat/widget.js';
    document.head.appendChild(s);
  }, []);
  return null;
}

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.

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

Get your snippet

Other platforms