How to Embed a Chatbot in Squarespace

Why Add a Chatbot to Your Squarespace Site

Squarespace is the platform of choice for photographers, designers, consultants, and service-based businesses — people who care about presentation and rely on their website to book clients. These sites attract visitors who have specific questions before they commit: "What are your rates?", "Are you available on the 15th?", "What does your process look like?" A chatbot trained on your services page and FAQ handles these conversations automatically, even when you're on a shoot or in a meeting.

Unlike WordPress (which has thousands of chat plugins) or Shopify (which offers Shopify Inbox), Squarespace has no native chatbot feature at all. There is no first-party chat app and no marketplace of chat integrations. The only path is embedding a third-party widget through Code Injection — which is exactly what this guide covers.

If you've spent hours getting your Squarespace template just right, you probably care about how a chat widget looks on your site. VocUI's widget is fully customizable — colors, position, welcome message, avatar — so it blends with your template instead of clashing with it.

Prerequisites

Confirm these before opening your Squarespace dashboard:

• A Business or Commerce plan. — This is the hard requirement. Code Injection is locked on the Personal plan — there is no workaround. Check your plan under Settings > Billing & Account.
• Access to Code Injection. — Navigate to Settings > Advanced > Code Injection and confirm you can see the Header and Footer text fields. If the Advanced section is missing, your plan does not include it.
• A VocUI chatbot ready to deploy. — You need a chatbot with at least one knowledge source trained. If you haven't built yours yet, follow our chatbot setup guide first — it covers creating the bot, adding content, and copying the embed snippet.
• Note on Squarespace 7.0 vs 7.1. — Both versions support Code Injection in the same location (Settings > Advanced > Code Injection). The admin UI looks slightly different — 7.0 has a sidebar layout, 7.1 uses a card-based settings page — but the Code Injection fields are identical.

Step-by-Step: Code Injection Method

Squarespace's Code Injection feature is the cleanest way to add a chatbot. It takes about two minutes from start to finish.

1. 1
   Open your Squarespace dashboard. Go to your site and click on Settings in the left sidebar.
2. 2
   Navigate to Code Injection. Under Settings, scroll down to the Advanced section and click Code Injection. This opens two text areas: Header and Footer. For full details, see Squarespace's Code Injection guide.
3. 3
   Paste the embed code in the Footer field. Copy your VocUI script tag and paste it into the Footer text area. Using the footer ensures the script loads after your page content, which is better for performance.
4. 4
   Click Save. That’s it. Visit your live site and you should see the chat widget in the bottom corner of the page.

The chatbot will now appear on every page of your Squarespace site. If you want it on specific pages only, use the per-page Code Injection option instead: edit a page, click the gear icon, go to Advanced, and paste the script in the Page Header Code Injection field. Squarespace's custom code documentation covers both site-wide and per-page options.

Matching the Widget to Your Squarespace Design

Squarespace users invest serious effort into visual design — a chat widget that clashes with your template undermines that work. Start by pulling your exact brand colors from Squarespace: go to Design > Site Styles (7.1) or Template > Style Editor (7.0) and note your accent color hex value. On 7.1 you can also check Design > Colors for your full palette. Copy that hex code into VocUI's widget color picker so the chat bubble matches your site's buttons and links.

Squarespace templates frequently place footer elements and the built-in cookie consent banner in the bottom-left corner of the screen. If your template does this, keep the chatbot in VocUI's default bottom-right position to avoid overlap. You can adjust the exact offset in the VocUI dashboard under widget settings if you need fine-grained control.

All widget customization — colors, position, welcome message, avatar, and display rules — is managed from the VocUI dashboard. No code changes needed in Squarespace after the initial embed.

Squarespace-Specific Troubleshooting

Most Squarespace embeds work on the first paste. When something goes wrong, it's usually one of these Squarespace-specific issues:

• Code Injection option missing. — You are on a Personal plan. Code Injection requires Business or Commerce. Check your plan under Settings > Billing & Account. Upgrading to Business unlocks Code Injection immediately \u2014 no need to rebuild your site.
• Script saves but chatbot does not appear. — Squarespace uses Ajax page loading (also called "page transitions" or "smooth scrolling") on 7.1 sites. This means navigating between pages does not trigger a full page reload, so scripts injected in the footer may only execute on the first page load. The VocUI script handles this automatically, but if you see issues, try disabling Ajax loading temporarily to confirm: go to Design > Site Styles > Page Transitions and set it to "None."
• Chatbot visible in preview but not on live site. — Squarespace caches published pages. Open your live URL in an incognito window or hard-refresh (Ctrl+Shift+R / Cmd+Shift+R). If you recently published, wait 60 seconds for the CDN cache to clear.
• Code Injection stripping script attributes. — Squarespace’s Code Injection editor occasionally strips non-standard HTML attributes. If the script tag does not save correctly, try pasting the code as a single line with no line breaks. Ensure you are pasting the exact snippet from VocUI with no extra whitespace or formatting.
• Squarespace 7.0 vs 7.1 template differences. — Code Injection works identically on both versions. However, 7.0 templates use a different style editor (Template > Style Editor) while 7.1 uses Design > Site Styles. The chatbot renders as a fixed-position overlay, so it works the same regardless of template family — Brine, Bedford, York, or any 7.1 section-based template.
• Member area pages. — If your Squarespace site uses Member Areas (gated content), the site-wide Code Injection script still loads on those pages. The chatbot will be visible to logged-in members. If you do not want the chatbot on member pages, use per-page Code Injection on only the public pages where you want it.

If none of these match your issue, our general chatbot embed guide covers cross-platform debugging steps.

FAQ

Which Squarespace plans support Code Injection?

Business, Basic Commerce, and Advanced Commerce plans include Code Injection. The Personal plan does not. If you are on a Personal plan, you will need to upgrade to at least Business to add the VocUI chatbot script via site-wide Code Injection. There is no workaround for adding custom scripts on the Personal plan.

What is the difference between Header and Footer Code Injection in Squarespace?

Header Code Injection loads scripts before the page content renders (inside the <head> tag). Footer Code Injection loads scripts after the page content (before the closing </body> tag). For chatbot scripts, Footer is the better choice — it ensures your page content loads first, and the chatbot appears once the page is ready. This avoids any perceived slowdown.

Does the chatbot work on Squarespace 7.0 and 7.1?

Yes. Code Injection is available on both Squarespace 7.0 and 7.1 (provided you are on a Business or Commerce plan). The location of the Code Injection setting is the same: Settings > Advanced > Code Injection. The chatbot renders as a fixed-position overlay, so it works identically regardless of which Squarespace version or template family you use.

Can I add the chatbot to specific Squarespace pages instead of site-wide?

Yes. Edit the page where you want the chatbot, click the gear icon to open Page Settings, go to the Advanced tab, and paste the VocUI script in the Page Header Code Injection field. This is useful if you only want the chatbot on your contact page, booking page, or product pages. Note: per-page injection uses the Header field only (there is no per-page Footer field).

Does the chatbot work with Squarespace Commerce product pages?

Yes. The chatbot appears on all pages including product detail pages, category pages, and the cart page. For Squarespace Commerce stores, train the bot on your product pages, shipping policy, and return policy so it can answer pre-purchase questions. This is especially effective for stores with complex product options or custom ordering processes.