Add it to any site

Setup

1. 1

   Step 1: Copy your embed code

   In the Lunachat panel, open Websites, pick your site and copy the embed snippet. The public key inside it belongs to that one site.

   <script>
     window.lunachat = window.lunachat || function () {
       (lunachat.q = lunachat.q || []).push(arguments);
     };
     lunachat('init', 'pk_live_YOUR_KEY');
   </script>
   <script async src="https://cdn.lunachat.co/w.js"></script>

2. 2

   Step 2: Add the code above </head>

   On plain HTML sites, add it to the head of every page. If you have a shared template, once is enough.

3. 3

   Step 3: Using React, Next.js or Vue

   Add it to your root layout (app/layout.tsx in Next.js). In Next.js, the next/script component with the lazyOnload strategy keeps the widget from competing with your page content.

4. 4

   Step 4: Register your domain in the panel

   Add your domain to the allowed list in the panel. The widget only opens on listed domains, so nobody can lift your embed code and use it elsewhere.

Worth knowing

• This site runs the same widget; the bubble in the corner is a real Lunachat install.
• The widget renders inside a Shadow DOM: your CSS can't break it and its styles can't leak out.
• One workspace can host several sites, each with its own key and its own allowed-domain list.

Frequently asked