> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.chrisp.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 the Crisp live-chat chatbox on Nuxt.js apps

__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**](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/-/b/2/4/4/b244c3b805af100/ca40fabc-e7b3-424d-88e4-1da196_fepg5e.png)

![Copying the Crisp Website ID](https://storage.crisp.chat/users/helpdesk/website/-/c/c/e/a/ccea7c79f1325800/020db5cd-1cff-4611-ae7f-1ca754_z957r9.png)

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

---

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

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