# Connect Crisp Live Chat To Squarespace Website
**Source:** https://beyondspace.studio/blog/connect-crisp-live-chat-to-squarespace-website
**Language:** French (France)

---

# Connect Crisp live chat to Squarespace website.

Tutorials

Nov 3

Written By Beyondspace

Crisp is a comprehensive multichannel messaging platform that enables seamless communication with your customers. With Crisp, you can engage in live chat, implement chatbots, manage your contacts within a CRM, automate processes, establish a help center, and more. It offers a perpetual free plan with two available seats, a Pro plan priced at $25 per month, and an Unlimited plan available for $95 per month.

This tutorial will help you install Crisp live chat platform to your site.

### Step 1:

First you need to register and account with Crisp, then visit https://app.crisp.chat/settings/websites/ and click **Integrations**:

Crisp website settings

### Step 2:

Sélectionner **HTML** to open HTML panel, and copy the given snippet in “1. Copy the following code” text box

Copy the HTML code

### Step 3

Open Squarespace editor, go to your Website Settings > *Website Tools > Code Injection (under Not Linked)*, paste your code in the Footer textbox, and hit the save button, visit this detailed instruction if you can’t find it

Paste the code to Footer injection

Done! Now you have a crisp chat on your website.

Crisp chat widget

Step-by-step tutorial included

*12 STEPS*

1. Click **Paramètres**

![Step 1 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=2361851&step_number=1&width=800&height=600&mobile_width=450&mobile_height=400&apply_resize=true&min_zoom=0.5)

2. Cliquez sur **Website Settings**

![Step 2 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=2361851&step_number=2&width=800&height=600&mobile_width=450&mobile_height=400&apply_resize=true&min_zoom=0.5)

3. Click **Integrations**

![Step 3 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=2361851&step_number=3&width=800&height=600&mobile_width=450&mobile_height=400&apply_resize=true&min_zoom=0.5)

4. Click **HTML**

![Step 4 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=2361851&step_number=4&width=800&height=600&mobile_width=450&mobile_height=400&apply_resize=true&min_zoom=0.5)

5. Select and copy text in **highlight box**

![Step 5 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=2361851&step_number=5&width=800&height=600&mobile_width=450&mobile_height=400&apply_resize=true&min_zoom=0.5)

6. Navigate to your website **Admin Dashboard**

![Step 6 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=2361851&step_number=6&width=800&height=600&mobile_width=450&mobile_height=400&apply_resize=true&min_zoom=0.5)

7. Click **Site web**

![Step 7 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=2361851&step_number=7&width=800&height=600&mobile_width=450&mobile_height=400&apply_resize=true&min_zoom=0.5)

8. Scroll and click **Website Tools**

![Step 8 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=2361851&step_number=8&width=800&height=600&mobile_width=450&mobile_height=400&apply_resize=true&min_zoom=0.5)

9. Click **Code Injection**

![Step 9 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=2361851&step_number=9&width=800&height=600&mobile_width=450&mobile_height=400&apply_resize=true&min_zoom=0.5)

10. Paste the code from Crisp

![Step 10 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=2361851&step_number=10&width=800&height=600&mobile_width=450&mobile_height=400&apply_resize=true&min_zoom=0.5)

11. Scroll and click **Enregistrer**

![Step 11 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=2361851&step_number=11&width=800&height=600&mobile_width=450&mobile_height=400&apply_resize=true&min_zoom=0.5)

12. That's it. You're done.

![Step 12 image](https://www.iorad.com/api/tutorial/stepScreenshot?tutorial_id=2361851&step_number=12&width=800&height=600&mobile_width=450&mobile_height=400&apply_resize=true&min_zoom=0.5)

### Here's an interactive tutorial

*\*\* Best experienced in Full Screen (click the icon in the top right corner before you begin) \*\**

https://www.iorad.com/player/2361851/Squarespace--insert-Crisp-chat-widget

**Next step**

### Bonus

You can open the Crisp chatbox widget via Squarespace buttons. Learn more in this guide.

Beyondspace 

As a Squarespace Circle member, Beyondspace delivers plugins that elevate your website, streamline workflows, and optimize the Editor experience—saving time and driving engagement.

https://beyondspace.studio

Précédent

Précédent

## How to open Crisp live chat widget with Squarespace button

Suivant

Suivant

## Set a Dynamic Sharing URL with Elfsight Share Buttons.