This article explains how to install Crisp Live Chat in a Nuxt.js application.

Because Nuxt can render pages on the server, the Crisp script must be loaded on the client side only. The examples below show a Nuxt 3 setup first, with a Nuxt 2 alternative for older projects.

Copy your Crisp chatbox script or Website ID

Start by copying the Crisp setup information for the workspace you want to connect.

To retrieve it from Crisp:

1. Open Crisp.
2. Go to Settings → Workspace Settings → Setup & Integrations.
3. Open Chatbox setup instructions.
4. Copy your Website ID from the JavaScript snippet.

Install Crisp in Nuxt 3

In Nuxt 3, create a client-only plugin so Crisp is loaded in the browser and not during server-side rendering.

Create plugins/crisp.client.js:

export default defineNuxtPlugin(() => {
  window.$crisp = [];
  window.CRISP_WEBSITE_ID = "MY_CRISP_WEBSITE_ID";

  const script = document.createElement("script");
  script.src = "https://client.crisp.chat/l.js";
  script.async = true;
  document.head.appendChild(script);
});

After saving the file, restart your Nuxt development server if needed and open your site in the browser.

Install Crisp in Nuxt 2

For Nuxt 2 projects, create a browser-only plugin and register it with mode: "client".

Create plugins/crisp.js:

export default () => {
  window.$crisp = [];
  window.CRISP_WEBSITE_ID = "MY_CRISP_WEBSITE_ID";

  const script = document.createElement("script");
  script.src = "https://client.crisp.chat/l.js";
  script.async = true;
  document.head.appendChild(script);
};

Then register it in nuxt.config.js:

export default {
  plugins: [{ src: "~/plugins/crisp.js", mode: "client" }]
};

Check the result

Open your Nuxt app in the browser and refresh the page. The Crisp chatbox should appear once the client-side plugin has loaded.

Updated on: 03/05/2026