> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.crisp.chat/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to Install a Chat Software on Nuxt.js Apps

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

Because Nuxt can render pages on the server, the Crisp [support chat SDK](https://crisp.chat/en/sdk/) 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.
---

# ${color}[#0080dd](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**](https://app.crisp.chat).
2. Go to **Settings → Workspace Settings → Setup & Integrations**.
3. Open **Chatbox setup instructions**.
4. Copy your **Website ID** from the JavaScript snippet.

![Crisp setup and integrations menu](https://storage.crisp.chat/users/helpdesk/website/-/8/7/a/e/87ae2703583ac800/cleanshot-2026-01-29-at-125625_6fulsh.png =1000xauto)

![Copying the Crisp Website ID](https://storage.crisp.chat/users/helpdesk/website/-/8/7/a/e/87ae2703583ac800/cleanshot-2026-01-29-at-130216_j8koqm.png =1000xauto)

||| Replace `MY_CRISP_WEBSITE_ID` with your own Website ID. The chatbox will not connect to your workspace without it.
---

# ${color}[#0080dd](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`:

```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.
---

# ${color}[#0080dd](Install Crisp in Nuxt 2)

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

Create `plugins/crisp.js`:

```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`:

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

# ${color}[#0080dd](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.

|| If you see an error mentioning `window` or `document`, the Crisp script is being executed server-side. Make sure the plugin is client-only.