How it worksWhy it worksPricingQuestionsBlog

How to Add a Chatbot for Squarespace with Code Injection

A chatbot for Squarespace installs through the Code Injection panel: paste one script tag into the site-wide Footer field and save. Squarespace states that code added there "is injected before the closing </body> tag on every page". Code Injection needs a Core, Plus or Advanced plan, so check yours before you start.

That is the entire mechanism. Squarespace is the easiest of the three big site builders for this, because it has a first-party screen for exactly this job and you never touch a template. What follows is the install, the plan gate, what to feed the assistant, and the two Squarespace-specific things that make people think it has not worked when it has. If you are still weighing up whether you want one, the ecommerce chatbot guide is the place to start.

What a chatbot for squarespace is

A chatbot for squarespace is a chat window loaded onto your Squarespace site by a JavaScript snippet, answering visitor questions in place of a contact form. The version worth having answers from material you supplied, so what it tells a visitor about delivery matches what your delivery page says.

That restriction is the design decision behind chatfor.site. The assistant reads only the documents, pasted text, product entries and question-and-answer pairs you gave it, and is instructed to say it does not have something to hand rather than guess. Ask it who owns the business when nothing in the uploads mentions that, and it says it does not know. You can open any past conversation in the dashboard, see which passages an answer was drawn from, and overrule it.

Worth knowing: Nielsen Norman Group's chatbot research is the honest counterweight here. Its conclusion was that "improving the UX of your website or app will bring you higher return on investment than creating a chatbot" (Source: Nielsen Norman Group, 2018). That is true of bots that duplicate your navigation. It is not true of the case a document-backed assistant is for, where the answer exists in writing on your site and nobody can find it.

Where does custom code go on Squarespace?

Into the Code Injection panel, in the site-wide Footer field. Squarespace documents the two site-wide fields precisely:

  • Header: "Code added here is injected into the <head> tag on every page in your site."
  • Footer: "Code added here is injected before the closing </body> tag on every page."

(Source: Squarespace Help Center, 2026.) Either will load a deferred widget script. Use the Footer, because nothing about a chat bubble should sit ahead of your content in the head.

The steps Squarespace gives are, verbatim: "To add custom code to code injection: 1. Open the Code Injection panel. 2. Add valid HTML or scripts into the appropriate Code Injection fields for the header, footer, lock page, order confirmation page, or order status page. 3. After adding your code, click Save."

Worth knowing, and a step I could not fully verify: Squarespace's help centre does not publish a sidebar click path for this panel. Every article on it links straight to the panel instead, at account.squarespace.com/pages/website-tools/code-injection. For version 7.0 sites the docs say to "click Website Tools to find these options" and then "Click Custom Code at the bottom of the panel". Squarespace has renamed and moved this area more than once, so rather than print a menu path that may not exist by the time you read this, use the direct panel link above, or search "Code Injection" in the site editor's search. If the panel is missing entirely, it is the plan, not you.

The plan gate is real. Squarespace states that "Code injection is available in the Core, Plus, Advanced, and some legacy billing plans" (Source: Squarespace Help Center, 2026). On a plan below that, Code Injection does not exist and no amount of hunting through the sidebar will produce it. Two further Squarespace limits worth knowing up front:

  1. "Checkout pages don't support code." Do not plan on the chat bubble appearing during checkout. It will be on every other page.
  2. JavaScript in code blocks is also plan-gated. Squarespace makes plain text, HTML, Markdown and CSS available in code blocks "on all plans", but JavaScript and iframes only on "Core, Plus, Advanced, and some legacy billing plans". So the per-page route is gated the same as the site-wide route.

The install, step by step

Five minutes on Squarespace, plus however long you spend on the documents.

  1. Check your Squarespace plan. You need Core, Plus, Advanced or an equivalent legacy plan for Code Injection.

  2. Create the assistant. Sign up at chatfor.site. Sign-in is a magic link, so there is no password to invent. The Free plan gives one assistant, 25 documents and 100 answers a month, and takes no card.

  3. Upload what it should know. Delivery and returns policies, opening hours, your price list, service descriptions, the FAQ page visitors never scroll to. You can upload files, paste text straight in as a source, add product entries, and write curated question-and-answer pairs for questions whose exact wording you already know.

  4. Copy the snippet from the dashboard. Your assistant id is already filled in:

    <script
  src="https://chatfor.site/widget.js"
  data-bot-id="YOUR_BOT_ID"
  defer
></script>

  5. Open the Code Injection panel at account.squarespace.com/pages/website-tools/code-injection, or by searching "Code Injection" in the site editor.

  6. Paste into the Footer field and save. Not Header, not Lock Page, not Order Confirmation. Squarespace's own instruction is to click Save after adding the code, and nothing takes effect until you do.

  7. Test on the live site. Open your published site in a private window rather than inside the Squarespace editor. The launcher should appear bottom right. Ask it something only your documents would answer, such as your exact returns window, and check the answer against the source document.

If step 7 produces a vague answer, the problem is the corpus rather than the code. The dashboard shows which passages each answer was drawn from, so you can see whether it read the wrong document or read the right one badly, and fix it by uploading the document that should have answered.

The attributes, and what each is for

data-bot-id is the only attribute you need. The others exist for the occasional site that needs them.

Attribute What it does Default
data-bot-id Which assistant to load. Required. none
data-mode bubble floats a launcher in the corner. inline renders the chat inside an element you place. bubble
data-target Inline only. CSS selector of the container to fill. the script tag's parent
data-position Bubble only. right or left. right
data-auto-open Bubble only. true opens the chat on load. false
data-persist false starts a fresh conversation on every page load. resumes within the session
data-api-origin Overrides the API origin. Rarely needed. the script's own origin

data-position="left" earns its keep on Squarespace more than on most platforms, because several Squarespace templates put their own controls bottom right. The entire widget renders inside a Shadow DOM, so your template's CSS cannot reach into it and its styles cannot leak into your template. There are no dependencies, and defer keeps it off the critical rendering path.

Can you put the chat inside a page instead of a bubble?

Yes, on the chatfor.site Growth plan and above, and on a Squarespace plan that allows JavaScript in code blocks. Add a Code Block to the page and paste this:

<div id="chatfor-chat" style="height: 560px"></div>

<script
  src="https://chatfor.site/widget.js"
  data-bot-id="YOUR_BOT_ID"
  data-mode="inline"
  data-target="#chatfor-chat"
  defer
></script>

The container needs a height, because the widget fills the space you give it. This is the better shape for a dedicated support or contact page, where the chat is the point of the page rather than an interruption to it. Keep the site-wide Footer injection for the bubble, or use one or the other, not both on the same page.

Squarespace also notes that "Code injection isn't intended for adding content or styles". A widget script is a fair use of it; a whole page layout is not.

What should you upload?

Squarespace sites skew towards services, studios, restaurants and small catalogues, and the questions those get are narrower than owners expect. Look at your last fifty enquiries. You will find five questions wearing forty different hats. Feed the assistant the documents that answer those five:

  1. Delivery or service area. Where you deliver or travel to, what it costs, how long it takes.
  2. Returns, cancellations and rescheduling. The window, the conditions, who pays, how long a refund takes.
  3. Prices, and what is included. Especially the things not on the pricing page, like whether travel is billed separately.
  4. Availability and hours. Including the holidays you close.
  5. The things you refuse. No weekend appointments, no international delivery, no phone line. An assistant that says no clearly saves more email than one that answers yes vaguely.

Do not upload your whole blog and hope. Retrieval works better over a small sharp corpus than a large vague one, and 25 documents on the Free plan is more than most single sites need. There is more on structuring the material in the guide to the documents an assistant should read.

What it costs to run

An answer costs about 0.45 of a cent to serve, measured at 1,794 input and 87 output tokens per answer across a real support corpus, priced against Anthropic's Claude Sonnet at $2 per million input tokens and $10 per million output tokens. That is a measured constant in the codebase rather than an estimate, and it is conservative in two directions: it charges every answer at the model rate, but a question matching a curated answer never reaches the model and costs nothing.

Plan Price Answers per month Assistants Documents
Free $0 forever 100 1 25
Starter $29 / month 2,000 2 200
Growth $79 / month 6,000 5 Unlimited
Business $199 / month 20,000 Unlimited Unlimited

The Free plan carries a small chatfor.site badge; paid plans do not. Starter adds email support, Growth adds conversation history and search plus the inline placement above, Business adds per-assistant usage reporting and a named contact. Every plan starts as a free account, so nothing needs a card until you choose to pay.

Embeddings are generated locally through transformers.js using the bge-small-en-v1.5 model, so indexing a document carries no per-document API cost, which is why the document allowances are as high as they are. Data is stored in Supabase, hosted in Ireland, and there is a ceiling of 30 messages per minute per visitor enforced in Postgres rather than per server instance, so it holds under load.

What breaks on Squarespace, and how do you fix it?

Two of these are Squarespace behaviours rather than faults, and they account for most of the confusion.

  • The widget does not appear while you are editing the site. Squarespace can disable injected scripts in preview. Its docs describe a message reading "We detected an error loading your site preview. This is usually caused by injected code" and a prompt to disable scripts temporarily, noting that "visitors will still see your injected code normally" (Source: Squarespace Help Center, 2026). Always test on the published site in a private window.
  • No Code Injection panel at all. Your plan does not include it. Core, Plus or Advanced, or a legacy equivalent.
  • The bubble is missing on checkout. Expected. "Checkout pages don't support code."
  • The bubble collides with a template control bottom right. Add data-position="left".
  • The launcher appears twice. The snippet is in both the site-wide Footer and a Code Block on the page. Remove one.
  • Answers say the documents do not cover it. That is the assistant behaving as designed and telling you where the corpus has a hole. Open the conversation, look at what it retrieved, and upload the document that should have answered. Those refusals are the most useful support data you will get.

Squarespace also states plainly that custom code modifications "fall outside the scope of our support", so support questions about the widget belong with us rather than with Squarespace.

The same widget runs elsewhere with a different paste target: there is a Shopify version of this install, a WordPress walkthrough, and a platform-agnostic version for anything else.

Frequently asked questions

Which Squarespace plan do I need for a chatbot?

Core, Plus, Advanced, or an equivalent legacy plan. Squarespace states that "Code injection is available in the Core, Plus, Advanced, and some legacy billing plans", and JavaScript in code blocks is gated to the same set. On a lower plan there is no supported way to add third-party JavaScript to the site.

Does Squarespace have a built-in chatbot?

Squarespace does not publish a document-backed AI chat assistant of the kind described here, which is why the Code Injection route exists. Its own built-in tools cover forms and contact blocks. A third-party widget loaded through Code Injection is the supported pattern for anything beyond that.

Header or Footer: which Code Injection field should I use?

Footer. Squarespace injects Footer code "before the closing </body> tag on every page", which is exactly right for a deferred widget. Header code goes into the head tag and would load the script earlier than it needs to be loaded, with no benefit.

Will it appear on every page of my Squarespace site?

Yes, on every page except checkout, because the site-wide Footer field applies site-wide and Squarespace's checkout pages do not support code. If you want the chat on only one page, use a Code Block on that page instead of the site-wide field.

What happens when a visitor asks something the documents do not cover?

It says it does not have that to hand rather than inventing an answer. Every conversation appears in the dashboard alongside the passages each answer came from, so a gap shows up as a refusal you can close by uploading the missing document.

Sources

Try it on your own documents

Upload what you already have and ask it something. The free plan needs no card, and it will tell you when your documents do not cover a question.

Start free