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.

To copy your Crisp script:

Open Crisp.
Go to Settings → Workspace Settings → Setup & Integrations.
Open Chatbox setup instructions.
Copy the Crisp chatbox script.

Copying the Crisp chatbox script

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
Squarespace → Add Crisp Live Chat on Squarespace
Strikingly → Add Crisp Live Chat on Strikingly
Webflow → Add Crisp Live Chat on Webflow
Wix → Add Crisp Live Chat on Wix
Notion → Embed a live chat in Notion
WeWeb → Add Crisp Live Chat using WeWeb

Ecommerce platforms

Choose the guide for your store:

Shopify → Install live chat and helpdesk on Shopify
WooCommerce → Install Crisp for WooCommerce
Adobe Commerce / Magento → Install Crisp on Magento
PrestaShop → Install Crisp Live Chat and AI Agent on PrestaShop
Shopware → Add Crisp to a Shopware website

JavaScript frameworks

Choose the guide for your framework:

React → Use Crisp with ReactJS
Next.js → Install Crisp Live Chat on Next.js
Nuxt.js → Install Crisp Live Chat on Nuxt.js
Single-page apps → Embed Crisp inside a single-page app

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. 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 to learn more about the chatbox and available features.

Updated on: 03/05/2026

Was this article helpful?

Thank you!