Squarespace Live Chat: How to Add a Chat Widget With Code Injection

Adding Squarespace live chat doesn't require a developer or a third-party extension. Squarespace has a built-in feature called Code Injection that lets you paste a small script into every page of your site, and that's all a chat widget needs. This guide walks through the site-wide install, how to limit chat to a single page, why the widget sometimes doesn't appear while you're editing, and how to set chat up so it actually helps a service business that runs on Squarespace.

What you need before you start

Two things: the right plan and the chat code.

• A plan that allows custom code. Code Injection is available on Squarespace's Core, Plus and Advanced plans. Plan names and features change from time to time, so if you don't see the option, check the current plan comparison in your Squarespace account.
• Admin access to the site. Contributors with limited permissions may not see Developer tools.
• The widget snippet from your chat provider. It's usually one line of JavaScript with a public key that identifies your workspace.

In ChatDeck the snippet looks like this, with your own key from the dashboard settings:

<script src="https://chatdeck.ru/widget.js" data-chatdeck-key="pk_…" async></script>

The async attribute means the script loads without blocking the page, so the chat doesn't slow down how quickly your template renders.

Step-by-step: adding the chat code site-wide

This is the method you want in most cases: one paste, and the chat button appears on every page.

1. In your Squarespace dashboard, open Settings → Developer tools → Code Injection.
2. Find the Footer field. (Header works too, but footer is the conventional place for widgets.)
3. Paste the full chat snippet, including the opening and closing <script> tags.
4. Click Save.
5. Open your live site in a private or incognito window and look for the chat button in the corner.

That's it. Squarespace's own documentation on using code injection covers the panel in more detail if the menu location has moved in your version of the dashboard. We also keep a short, current version of these steps on the Squarespace integration page.

Adding chat to a single page only

Sometimes you only want chat on one page — a pricing page, a booking page or a landing page for an ad campaign. Squarespace supports per-page code injection for this:

1. Open Pages and hover over the page you want.
2. Click the gear icon to open Page settings.
3. Go to the Advanced tab and find Page Header Code Injection.
4. Paste the chat snippet and save.

Remember to remove the snippet from the site-wide Footer field if you added it there first. Otherwise the widget will still load everywhere.

A middle ground many sites use: keep chat site-wide but make it less prominent on pages where it distracts, for example by choosing a smaller launcher. Visitors with a question on your About page are just as valuable as those on your pricing page.

Why the widget may not show in preview, and how to check

The most common support question after installing a chat on Squarespace is "I pasted the code and nothing happened." Usually the code is fine and you're simply looking in the wrong place.

• The editor isn't your live site. Squarespace's editing view doesn't always run injected scripts the way the public site does. Always check on the published URL.
• You're logged in. Test in a private window, where you're a regular visitor.
• Caching. Your browser may hold an older copy of the page. A hard refresh or a private window solves this.
• The site isn't public yet. If the site is password-protected or still in trial, scripts may behave differently. Check once the site is live.
• The snippet got truncated. Make sure you pasted the whole line and didn't lose the closing </script> tag.
• A typo in the key. If the public key is wrong, the widget loads but can't find your workspace.

If it still doesn't appear, open the browser's developer console on the live page and look for errors mentioning the widget script. That usually points straight at the cause.

Customizing the widget to match your Squarespace template

Squarespace templates are known for clean design, so a chat button that clashes with the palette stands out for the wrong reasons. Most of the styling happens in the chat tool's settings, not in Squarespace.

In ChatDeck you can choose a light, dark or automatic theme, set custom colors to match your brand, pick the corner style, position and launcher size. The widget renders inside a Shadow DOM, which means your template's CSS can't break it and the widget can't break your template. That's a real advantage on Squarespace, where you don't always control every style rule.

A few practical design tips:

• Use your template's accent color for the launcher, not a random bright color.
• Keep the button on the side opposite any other floating elements, such as a cookie banner or a "back to top" arrow.
• Check the mobile view. Squarespace templates are responsive, and the chat should not cover the mobile menu or a sticky "Book now" button.

Setup tips for service businesses: hours, bookings, FAQs

A lot of Squarespace sites belong to service businesses: studios, consultants, clinics, salons, photographers, agencies. Chat on these sites tends to get the same handful of questions, so a little setup goes a long way.

Set working hours

Most small service businesses don't answer chat at 2 a.m., and they don't need to. Set a weekly schedule with your timezone, mark days off, and let the chat tell visitors when someone will be back. In ChatDeck, outside working hours the AI assistant tells visitors when operators return and keeps answering what it can. We cover the options in more depth in our guide to after-hours customer support.

Prepare answers for the top questions

Write short answers for the questions you hear every week:

• What are your prices or packages?
• Do you have availability next week?
• Where are you located, and is there parking?
• How do I reschedule or cancel?
• Do you offer a consultation call?

These answers become the facts in your AI assistant's instruction or your team's saved replies.

Point people to the booking page

If you use Squarespace Scheduling or another booking tool, the fastest way to convert a chat is to send the visitor to the booking page. An AI assistant with a navigation tool can move the visitor to the right page of your site without them hunting through the menu.

Know who you're talking to

When an operator replies, it helps to see which page the visitor is on. ChatDeck shows the visitor's current page live, their device, approximate location and local time, which is useful when you're deciding whether to offer a slot "tomorrow morning."

For a general overview of installing chat on any platform, see our guide on how to add live chat to a website.

Frequently asked questions

Which Squarespace plans support custom code?

Code Injection is available on the Core, Plus and Advanced plans. If you're on a different or older plan and can't find Developer tools in Settings, check the current plan comparison in your account, since Squarespace adjusts its plans periodically.

Should I paste chat code in the header or footer?

Either works for most chat widgets, especially if the script uses async. The footer is the conventional choice because it keeps third-party code out of the way of your page content. Pick one and don't paste the same snippet in both, or the widget may load twice.

Why can't I see the chat in the Squarespace editor?

The editor isn't a perfect copy of the live site and doesn't always run injected scripts. Open the published site in a private window to check. If it's still missing there, check that the snippet is complete and the key is correct.

Can I add live chat to just one Squarespace page?

Yes. Open that page's settings, go to the Advanced tab and paste the snippet into Page Header Code Injection. Make sure the site-wide Footer field doesn't also contain the code.

Get started

If you want a chat that installs with one line, keeps your template's styles intact and comes with an AI assistant that hands off to a human, create a free ChatDeck account — there's no per-operator fee. Then follow the Squarespace setup guide and you'll have chat live in a few minutes. The Install the chat on your site tutorial shows how to check it worked.