How to add live chat to React, Next.js, Vue and other apps

One rule for every app

Load the install code once, in the part of your app that wraps every page: index.html, the root layout or the app shell. The chat then stays on screen as visitors move between pages, and a chat in progress carries on.

• There's no npm package. Use the script address from your install code, as it is. Don't download or bundle the file: it updates itself.
• Don't add it inside a component that shows on some pages only, or renders again and again. Loading it twice does no harm, but it only needs to be there once.
• Pages without the chat (Chat Widget › Behavior) are checked when the page first loads. In a single-page app, that means when a visitor arrives on that address or reloads it.

Copy your own code from Administration › Chat Widget › Install. Using an AI tool to write your app? Give it a ready-made prompt.

React (Vite or Create React App)

Paste the code above </body> in index.html: in the project's root folder with Vite, or in public/index.html with Create React App.

  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
    <script src="https://chat.quarito.com/l/YOUR-SITE-ID.js" async></script>
  </body>

Next.js

App Router: add it to the root layout with Next's Script component.

import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script src="https://chat.quarito.com/l/YOUR-SITE-ID.js" strategy="afterInteractive" />
      </body>
    </html>
  );
}

Pages Router: add the same <Script … strategy="afterInteractive" /> line to pages/_app.tsx, beside <Component {...pageProps} />.

Vue, Angular and other single-page apps

Paste the code above </body> in the app's index.html: the project root with Vite (Vue, Preact, Solid), or src/index.html in Angular.

Nuxt

Add it to every page from nuxt.config.ts:

export default defineNuxtConfig({
  app: {
    head: {
      script: [{ src: "https://chat.quarito.com/l/YOUR-SITE-ID.js", async: true, tagPosition: "bodyClose" }],
    },
  },
});

SvelteKit

Paste the code above </body> in src/app.html.

Astro

Paste the code above </body> in the layout your pages share, such as src/layouts/Layout.astro, with is:inline so Astro leaves it as it is:

    <slot />
    <script is:inline src="https://chat.quarito.com/l/YOUR-SITE-ID.js" async></script>
  </body>
</html>

Hugo, Jekyll, Eleventy and other static sites

Paste the code above </body> in the base template every page uses, such as layouts/_default/baseof.html (Hugo), _layouts/default.html (Jekyll) or your base layout in _includes (Eleventy). Rebuild and publish the site.

Open the chat from your own button

Call Quarito.open() from any button, for example a “Contact support” link in your menu. Calls made before the chat has loaded wait in a queue, so add the queue line first:

window.Quarito = window.Quarito || { q: [],
  identify: function (o) { this.q.push(["identify", o]) },
  open: function () { this.q.push(["open"]) } };

document.querySelector("#help-button").addEventListener("click", function () {
  Quarito.open();
});

To tell the chat who a signed-in user is, see the JavaScript API.