> ## 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 my website

__This article explains how to add Crisp Live Chat to your website.__

The installation method depends on how your website is built. For most custom websites, you can paste the Crisp chatbox script in your HTML. If you use a CMS or ecommerce platform, use the dedicated guide for your platform instead.

__In this guide:__

* ****Install Crisp on a custom website**** → copy the script and paste it in your HTML
* ****Use a platform-specific guide**** → WordPress, Shopify, Webflow, Next.js, Nuxt, and more
* ****Create a Crisp account**** → get your workspace and Website ID

---

# Install Crisp on a custom website

Use this method if your website is custom-coded or if your platform allows you to paste custom HTML/JavaScript.

${frame}[](https://www.youtube.com/embed/nW5UX6iVdFc?rel=0)

__To copy your Crisp script:__

1. Open [**Crisp**](https://app.crisp.chat).
2. Go to ****Settings → Workspace Settings → Setup & Integrations****.
3. Open ****Chatbox setup instructions****.
4. Copy the Crisp chatbox script.

![Copying the Crisp chatbox script](https://storage.crisp.chat/users/helpdesk/website/-/7/2/b/9/72b98d1c359e6c00/9021798c-4afa-40a9-a9a2-e53d39_par65q.png)

Then paste the script in your website HTML. The recommended place is inside the `` `<head>` `` section, before the closing `` `</head>` `` tag. If you cannot edit the head, you can usually paste it before the closing `` `</body>` `` tag instead.

| After publishing your changes, open your public website in a browser and check that the Crisp chatbox appears.

---

# Use a platform-specific guide

If your website runs on a CMS, ecommerce platform, or JavaScript framework, use the dedicated guide when available. It will match the platform's settings and installation flow more closely than the generic HTML method.

#### CMS and website builders

__Choose the guide for your platform:__

* ****WordPress**** → [Install Crisp Live Chat on WordPress](/en/article/how-do-i-install-crisp-live-chat-on-wordpress-16m1ln1/)
* ****Squarespace**** → [Add Crisp Live Chat on Squarespace](/en/article/how-do-i-add-crisp-live-chat-on-squarespace-10jlo4o/)
* ****Strikingly**** → [Add Crisp Live Chat on Strikingly](/en/article/how-do-i-add-crisp-live-chat-on-strikingly-103tfrx/)
* ****Webflow**** → [Add Crisp Live Chat on Webflow](/en/article/how-do-i-add-crisp-live-chat-on-webflow-ncgak/)
* ****Wix**** → [Add Crisp Live Chat on Wix](/en/article/how-do-i-add-crisp-live-chat-on-wix-mttlig/)
* ****Notion**** → [Embed a live chat in Notion](/en/article/how-can-i-embed-a-live-chat-in-notion-1n8bwzw/)
* ****WeWeb**** → [Add Crisp Live Chat using WeWeb](/en/article/how-do-i-add-crisp-live-chat-using-wewebio-cwauy4/)

#### Ecommerce platforms

__Choose the guide for your store:__

* ****Shopify**** → [Install live chat and helpdesk on Shopify](/en/article/how-can-i-install-a-live-chat-and-helpdesk-on-my-shopify-online-store-1ee520y/)
* ****WooCommerce**** → [Install Crisp for WooCommerce](/en/article/how-to-install-crisp-for-woocommerce-1qynizu/)
* ****Adobe Commerce / Magento**** → [Install Crisp on Magento](/en/article/how-to-install-crisp-on-magento-ka7n7j/)
* ****PrestaShop**** → [Install Crisp Live Chat and AI Agent on PrestaShop](/en/article/how-do-i-install-crisp-live-chat-and-ai-chatbot-on-prestashop-qwquek/)
* ****Shopware**** → [Add Crisp to a Shopware website](/en/article/how-do-i-add-a-chat-and-chatbot-widget-to-shopware-website-142sht7/)

#### JavaScript frameworks

__Choose the guide for your framework:__

* ****React**** → [Use Crisp with ReactJS](/en/article/how-do-i-use-crisp-with-reactjs-fe0eyz/)
* ****Next.js**** → [Install Crisp Live Chat on Next.js](/en/article/how-do-i-install-crisp-live-chat-on-nextjs-xh9yse/)
* ****Nuxt.js**** → [Install Crisp Live Chat on Nuxt.js](/en/article/how-do-i-install-crisp-live-chat-on-nuxtjs-1nko1cm/)
* ****Single-page apps**** → [Embed Crisp inside a single-page app](/en/article/how-can-i-embed-crisp-inside-a-single-page-app-1ptfyyx/)

For Astro, add the standard Crisp script in your shared layout, such as `` `Layout.astro` ``, so it loads on the pages where you want the chatbox to appear.

---

# Create a Crisp account

If you do not have a Crisp workspace yet, create one from [the Crisp signup page](https://app.crisp.chat/initiate/signup/). Once your workspace is created, you can copy your chatbox script or Website ID from ****Settings → Workspace Settings → Setup & Integrations****.

|| Crisp setup is best handled from a desktop browser, especially when copying installation scripts or configuring platform integrations.

---

# Need help choosing the right method?

If your platform is not listed above, use the generic HTML installation method whenever your website builder allows custom JavaScript. If custom JavaScript is blocked by your platform or plan, Crisp cannot load until that platform allows third-party scripts.

You can also explore the [Crisp Live Chat feature page](https://crisp.chat/en/livechat/) to learn more about the chatbox and available features.