Add live chat to Astro, SvelteKit, and any static site

The muro snippet is eight lines of vanilla JavaScript that drop into any page's head. There is no framework component to import, no plugin to install, no build step. Static-site generators are the easiest case of all, because they each give you a single place to inject head markup that ends up on every page. Here is where that spot is for the most common ones.

Astro

Add the snippet to your shared layout's head. The one Astro-specific detail: mark it is:inline so Astro ships it verbatim instead of trying to bundle and process it.

---
// src/layouts/Layout.astro
---
<html lang="en">
  <head>
    <!-- your existing head -->
    <script is:inline>
      (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>
  </head>
  <body><slot /></body>
</html>

SvelteKit

The cleanest place is src/app.html, the template SvelteKit wraps around every route. Paste the snippet right after %sveltekit.head%.

<!-- src/app.html -->
<head>
  <meta charset="utf-8" />
  %sveltekit.head%
  <script>
    (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>
</head>

Hugo

Hugo themes render a head partial on every page, usually layouts/partials/head.html (or head/custom.html in many themes). Paste the snippet there. If your theme has no custom-head hook, create layouts/partials/head.html in your project root and Hugo will use it over the theme's version.

Eleventy (11ty)

Add it to your base layout, typically _includes/layout.njk or base.njk, inside the head. Because every page extends that layout, one paste covers the whole site.

Plain HTML

Nothing special: paste the snippet just before the closing head tag on each page, or in whatever shared header include your site uses.

<head>
  <!-- ... -->
  <script>
    (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>
</head>

Why static sites and muro get along

The widget also lives entirely inside a Shadow DOM, so none of its CSS leaks into your carefully tuned static styles, and none of your global CSS breaks the widget. It respects your Content-Security-Policy too: allow https://muro.chat in script-src and you are done.

Verifying the install

After you publish, the muro dashboard flips the site to live within about thirty seconds of the first page load. If it stays grey, open the browser console. The overwhelming majority of failures are a Content-Security-Policy that blocks muro.chat: add it to your script-src directive and refresh.

If your generator is not on this list (Gatsby, Nuxt, Remix, Docusaurus, Jekyll, and the rest), the move is always the same: find the one template that renders the head on every page, and paste the snippet there. Eight lines, one place, done.