Squarespace Integration Guide

QuackChat on Squarespace

Add the QuackChat widget to your Squarespace site using Code Injection.

Quick Start (TL;DR)

1. Go to Settings > Code Injection (or Settings > Advanced > Code Injection)
2. Paste the widget code in the Footer section
3. Save

Note: Code Injection is available on Core, Plus, and Advanced plans (and some legacy plans, including Business, Commerce Basic, and Commerce Advanced). If you don't see Code Injection, check your plan. The exact navigation path may vary by Squarespace version.

Prerequisites

• A Squarespace plan that supports Code Injection — Core, Plus, Advanced, or an eligible legacy plan (Business / Commerce Basic / Commerce Advanced)
• Bot ID from your QuackChat dashboard

Step-by-Step Installation

Option A: Site-Wide Code Injection (Recommended)

1. In your Squarespace dashboard, go to Settings
2. Click Code Injection (in some versions, under Advanced)

Note: The exact navigation path may vary depending on your Squarespace version.

4. In the Footer section, paste the widget code:

<script
  src="https://www.quackchat.app/widget/quackchat-widget.js"
  data-bot-id="YOUR_BOT_ID"
></script>

5. Click Save

The widget will now appear on all pages of your site.

Option B: Per-Page Code Injection

To add the widget to specific pages only:

1. Go to the page you want to add the widget to
2. Click the gear icon to open Page Settings
3. Click Advanced
4. In the Page Header Code Injection section, paste the widget code
5. Click Save

Verification

Quick test:

1. View your site (not the editor preview)
2. Look for the chat bubble in the bottom-right corner
3. Click to open and send a test message

Platform-Specific Customization

Match your Squarespace theme colors

<script
  src="https://www.quackchat.app/widget/quackchat-widget.js"
  data-bot-id="YOUR_BOT_ID"
  data-primary-color="#000000"
  data-theme="minimal"
></script>

Dark mode support

If your site uses dark mode:

<script
  src="https://www.quackchat.app/widget/quackchat-widget.js"
  data-bot-id="YOUR_BOT_ID"
  data-theme="dark"
></script>

Troubleshooting

"Code Injection" option not visible

Cause: Your current plan doesn't include Code Injection (e.g. a Personal-level plan).

Solution: Upgrade to an eligible plan (Core, Plus, or Advanced), or use a Code Block on a page where it's supported.

Widget doesn't show up in the editor or preview

Cause: Squarespace often doesn't render custom code in the editor, in preview, or while you're logged in.

Solution:

• Test on the live site in an incognito/private window (logged out)
• If it still doesn't appear, hard-refresh (Ctrl+Shift+R / Cmd+Shift+R) — cache can take a minute to clear

Two chat bubbles overlap

Cause: You already have another chat widget installed on the site.

Solution: If you already use another chat widget, disable it to avoid overlapping chat bubbles.

Known Limitations

• Code Injection requires an eligible plan (Core, Plus, Advanced, or a legacy plan)
• Cannot add code to the built-in checkout flow
• Preview mode in editor may not show the widget accurately