Skip to content
Sites

Add GHL Customer Care's Chat Widget to Your Squarespace Website

Are you looking for an easy way to connect with your website visitors and convert them into customers? GHL Customer Care Webchat for Squarespace is the perfect solution for In this article, we'll walk you through the steps to start with GHL Customer Care Webchat for Wee

1 min read322 words5 explained imagesUpdated Fri, 2 May, 2025 at 10:08 AM
View as markdownOpen in ClaudeOpen in ChatGPT
Each image has a one line explanation. Switch to full detail for the step it belongs to, the fields and buttons involved, examples and the whole procedure.
On this page
  1. Here are detailed steps on how to add a custom chat widget to a Squarespace website using different methods:
  2. Method 1: Add a custom chat widget using Code Injection
  3. Method 2: Add a custom chat widget using an Embed Block

Video 1 Open in a new tab

Are you looking for an easy way to connect with your website visitors and convert them into customers? GHL Customer Care Webchat for Squarespace is the perfect solution for you!

In this article, we'll walk you through the steps to start with GHL Customer Care Webchat for Squarespace.

Covered in this article:

How to obtain the embed code for web chat for the website:

Here are detailed steps on how to add a custom chat widget to a Squarespace website using different methods:

How to obtain the embed code for web chat for the website:

Copy the embed code from Sites > Chat Widget > Get Code

How to obtain the embed code for web chat for the website: (image 1 of 5) What this shows Copy the embed code from Sites > Chat Widget > Get Code What this shows Illustrates the "How to obtain the embed code for web chat for the website:" section of "Add GHL Customer Care's Chat Widget to Your Squarespace Website". This animation appears in the "How to obtain the embed code for web chat for the website:" section of "Add GHL Customer Care's Chat Widget to Your Squarespace Website". The text alongside this image reads: Copy the embed code from Sites > Chat Widget > Get Code. The navigation path used here is Sites > Chat Widget > Get Code. Immediately after, the guide continues: Obtain code for the Chat widget as shown above. Log in to your Squarespace account and navigate to the website to which you want to add the chat widget. Click on "Settings" in the main menu. Path: Sites > Chat Widget > Get CodeImage 1 of 5 What to copyCopy the embed code from Sites > Chat Widget > Get Code
Buttons and menus referenced SitesChat WidgetGet Code
Next stepObtain code for the Chat widget as shown above. Log in to your Squarespace account and navigate to the website to which you want to add the chat widget. Click on "Settings" in the main menu.

Here are detailed steps on how to add a custom chat widget to a Squarespace website using different methods:

Method 1: Add a custom chat widget using Code Injection

  • Obtain code for the Chat widget as shown above.
  • Log in to your Squarespace account and navigate to the website to which you want to add the chat widget.
  • Click on "Settings" in the main menu. 
Method 1: Add a custom chat widget using Code Injection (image 2 of 5) What this shows Obtain code for the Chat widget as shown above. What this shows Illustrates the "Method 1: Add a custom chat widget using Code Injection" section of "Add GHL Customer Care's Chat Widget to Your Squarespace Website". This screenshot appears in the "Method 1: Add a custom chat widget using Code Injection" section of "Add GHL Customer Care's Chat Widget to Your Squarespace Website". The text alongside this image reads: Obtain code for the Chat widget as shown above. Log in to your Squarespace account and navigate to the website to which you want to add the chat widget. Click on "Settings" in the main menu. Immediately after, the guide continues: Select "Developer Tools" in the "Website" section. Image 2 of 5 What to clickObtain code for the Chat widget as shown above. Log in to your Squarespace account and navigate to the website to which you want to add the chat widget. Click on "Settings" in the main menu. Next stepSelect "Developer Tools" in the "Website" section.
All 3 steps in this procedure
  1. Obtain code for the Chat widget as shown above.
  2. Log in to your Squarespace account and navigate to the website to which you want to add the chat widget.
  3. Click on "Settings" in the main menu.
  • Select "Developer Tools" in the "Website" section.
Method 1: Add a custom chat widget using Code Injection (image 3 of 5) What this shows Select "Developer Tools" in the "Website" section. What this shows Illustrates the "Method 1: Add a custom chat widget using Code Injection" section of "Add GHL Customer Care's Chat Widget to Your Squarespace Website". This screenshot appears in the "Method 1: Add a custom chat widget using Code Injection" section of "Add GHL Customer Care's Chat Widget to Your Squarespace Website". The text alongside this image reads: Select "Developer Tools" in the "Website" section. Immediately after, the guide continues: Paste the chat widget code in the "Header" or "Footer" fields. Image 3 of 5 What to chooseSelect "Developer Tools" in the "Website" section. Next stepPaste the chat widget code in the "Header" or "Footer" fields.
All 3 steps in this procedure
  1. Obtain code for the Chat widget as shown above.
  2. Log in to your Squarespace account and navigate to the website to which you want to add the chat widget.
  3. Click on "Settings" in the main menu.
  • Click on "Code Injection"
Method 1: Add a custom chat widget using Code Injection (image 4 of 5) What this shows Select "Developer Tools" in the "Website" section. What this shows Illustrates the "Method 1: Add a custom chat widget using Code Injection" section of "Add GHL Customer Care's Chat Widget to Your Squarespace Website". This screenshot appears in the "Method 1: Add a custom chat widget using Code Injection" section of "Add GHL Customer Care's Chat Widget to Your Squarespace Website". The text alongside this image reads: Select "Developer Tools" in the "Website" section. Immediately after, the guide continues: Paste the chat widget code in the "Header" or "Footer" fields. Image 4 of 5 What to chooseSelect "Developer Tools" in the "Website" section. Next stepPaste the chat widget code in the "Header" or "Footer" fields.
All 3 steps in this procedure
  1. Obtain code for the Chat widget as shown above.
  2. Log in to your Squarespace account and navigate to the website to which you want to add the chat widget.
  3. Click on "Settings" in the main menu.
  • Paste the chat widget code in the "Header" or "Footer" fields.
Method 1: Add a custom chat widget using Code Injection (image 5 of 5) What this shows Paste the chat widget code in the "Header" or "Footer" fields. What this shows Illustrates the "Method 1: Add a custom chat widget using Code Injection" section of "Add GHL Customer Care's Chat Widget to Your Squarespace Website". This screenshot appears in the "Method 1: Add a custom chat widget using Code Injection" section of "Add GHL Customer Care's Chat Widget to Your Squarespace Website". The text alongside this image reads: Paste the chat widget code in the "Header" or "Footer" fields. Immediately after, the guide continues: Click on "Save" to save the changes. Preview your website to make sure the chat widget appears correctly. Image 5 of 5 What to copyPaste the chat widget code in the "Header" or "Footer" fields. Next stepClick on "Save" to save the changes. Preview your website to make sure the chat widget appears correctly.
All 3 steps in this procedure
  1. Obtain code for the Chat widget as shown above.
  2. Log in to your Squarespace account and navigate to the website to which you want to add the chat widget.
  3. Click on "Settings" in the main menu.
  • Click on "Save" to save the changes.
  • Preview your website to make sure the chat widget appears correctly.

Method 2: Add a custom chat widget using an Embed Block

  • Log in to your Squarespace account and navigate to the page where you want to add the chat widget.
  • Click on the page editor and select the section where you want to add the chat widget.
  • Click on the plus icon to add a new content block and select "Embed" from the drop-down menu.
  • Paste the chat widget code in the "Code Snippet" field.
  • Click on "Apply" to apply the changes.
  • Preview your website to make sure the chat widget appears correctly.

Was this guide helpful?

Related guides

Getting Started with Chat Widget5 min read · 16 imagesOverview of Chat Widget Customizations6 min read · 10 imagesChat Widget - Business Office Hours in Live Chat1 min read · 7 imagesChat Widget - Send your leads to Whatsapp Chat1 min read · 4 images