How to Embed a Chatbot on Squarespace (2026 Guide)

Step-by-step instructions to add a chatbot to Squarespace via Code Injection — which plans allow it, how to go site-wide or page-specific, and how to fix common conflicts.

Which Squarespace plans allow custom code injection?

Code Injection is available on the Core, Plus, and Advanced plans, as well as some legacy billing plans. If your site is on a plan below Core, the Code Injection menu item will either be absent from Settings or locked behind an upgrade prompt.

The table below shows how current Squarespace plans map to code injection eligibility. If you are on a legacy plan (named Personal, Business, Basic Commerce, or Advanced Commerce), those plan names were retired — check your account's plan comparison page to confirm which current tier your subscription maps to.

Squarespace plan code injection support (current plans as of 2026)
PlanCode InjectionCSS EditorBest for
CoreYesYesService businesses, portfolios
PlusYesYesGrowing sites needing more marketing tools
AdvancedYesYesHigh-volume stores and advanced automations
Entry-level (below Core)NoLimitedSimple personal sites

If you are locked out of Code Injection, upgrading to Core is the only path. Squarespace does not offer a workaround for adding external scripts on lower-tier plans — third-party app integrations through the Squarespace Extensions marketplace are the alternative, but chatbots are not currently distributed that way.

How do you add a chatbot site-wide via Code Injection?

The site-wide method uses Squarespace's built-in Code Injection panel to load your chatbot script on every page automatically. This is the right choice for most businesses — you want the widget available wherever a visitor lands.

  1. 1

    Open your Squarespace dashboard

    Log in at squarespace.com and open the site you want to edit. Click the site name to enter the editing interface.

  2. 2

    Navigate to Settings

    In the left-hand panel, click Settings (the gear icon near the bottom of the navigation).

  3. 3

    Open Advanced → Code Injection

    Inside Settings, scroll to the Advanced section and click Code Injection. If you do not see this option, your plan does not include custom code — see the plan comparison above.

  4. 4

    Paste your script into the Header field

    In the Header text area, paste the full <script> tag provided by your chatbot platform. Do not place it in the Footer field — chatbot widgets need to initialize before the page renders, and header placement ensures this.

  5. 5

    Click Save

    Squarespace saves and deploys immediately. There is no publish step — your live site will load the chatbot on the next page view.

  6. 6

    Verify on the live site

    Open your site in a new browser tab (not the Squarespace editor preview — it does not execute third-party scripts). Confirm the chatbot widget appears in the corner of the page.

How do you embed a chatbot on a single Squarespace page only?

Per-page code injection lets you place the chatbot on one specific page — useful if you only want the widget on your contact page, a landing page, or a services page rather than site-wide.

  1. 1

    Go to the Pages panel

    In the editing interface, click Pages in the left navigation to open the site structure.

  2. 2

    Hover over the target page and click the gear icon

    When you hover over any page in the list, a gear icon appears to the right of the page name. Click it to open page settings.

  3. 3

    Select the Advanced tab

    Inside page settings, click the Advanced tab at the top of the panel.

  4. 4

    Paste your script into Page Header Code Injection

    Add your chatbot <script> tag to the Page Header Code Injection text area. This code runs only on this page.

  5. 5

    Click Save

    The script is now active on that page only.

How do you embed Knobot on Squarespace specifically?

Knobot generates a single <script> tag from the dashboard — there is no plugin to install and no developer involvement required. Knobot's Premium plan ($79/month) includes 10,000 chat messages/month, so there is no per-chat overage to worry about as your site grows.

  1. 1

    Create a Knobot account and add your site

    Sign up at knobot.org. After creating your business profile, Knobot will scrape your website to build the initial knowledge base.

  2. 2

    Customize the widget in the dashboard

    Set the primary color, welcome message, and lead-capture fields (name, email, phone) to match your brand. Changes update the live widget automatically.

  3. 3

    Copy the embed snippet

    In the dashboard, navigate to Embed → Get Code. Copy the full <script> tag. It looks like: <script src="https://cdn.knobot.org/widget.js" data-bot-id="YOUR_ID" async></script>

  4. 4

    Paste into Squarespace Code Injection header

    Follow the site-wide steps above: Settings → Advanced → Code Injection → Header. Paste the snippet and click Save.

  5. 5

    Test lead capture

    Open your live site, trigger the chatbot, and submit a test lead. Confirm it appears in the Knobot dashboard under Conversations.

What should you do if the chatbot is blocked or does not appear?

If the widget script loads in Code Injection but the chat button never appears on your live site, three causes cover the vast majority of cases.

Mobile display issues are almost always caused by the widget's default z-index being lower than Squarespace's own UI elements. On some templates, the mobile navigation overlay sits at a high z-index that covers the chat button. Add a CSS override in Design → Custom CSS — for example:

.sqs-chat-widget,
[data-knobot-widget] {
  z-index: 99999 !important;
}

Replace the selector with the actual class or attribute your chatbot uses. Knobot's widget wrapper uses the data-knobot-widget attribute.

How do you handle style conflicts between a chatbot and Squarespace themes?

Modern chatbot widgets are scoped inside a shadow DOM or an iframe, which means Squarespace's global CSS cannot reach inside the widget — and the widget's CSS cannot leak out into your theme. This prevents most style conflicts by design.

The two situations where conflicts do occur are:

Does Squarespace's SSL or CSP block third-party chatbot scripts?

Squarespace sites enforce HTTPS on all pages, which means your chatbot vendor must also serve assets over HTTPS. Any chatbot embedding over plain HTTP will be blocked by the browser as mixed content — a restriction enforced by the browser, not Squarespace specifically. All reputable chatbot providers, including Knobot, serve their widget scripts over HTTPS.

Content Security Policy (CSP) is a separate concern. CSP headers instruct the browser to block scripts, frames, or images from sources not listed in the policy. Squarespace does not apply a restrictive CSP by default on standard hosted sites — script injection through the Code Injection panel works without any CSP modification. If you are using Squarespace's Developer Mode with a custom server or a Squarespace-adjacent proxy (uncommon for small businesses), verify that your server-side CSP headers include the chatbot vendor's CDN domain in the script-src directive.

For most Squarespace users — a standard hosted site on any Core/Plus/Advanced plan — SSL and CSP are not factors. Paste the script tag, save, and it runs.

Frequently asked questions

Which Squarespace plan do I need to embed a chatbot?

You need the Core plan or above (Core, Plus, or Advanced). The entry-level plan below Core does not include Code Injection. If you are on a legacy plan named Personal or Basic, check your plan comparison page — those names mapped to tiers that may or may not include custom code depending on when you subscribed.

Can I add a chatbot to one page only on Squarespace?

Yes. Instead of using site-wide Code Injection (Settings → Advanced → Code Injection), navigate to the specific page in the Pages panel, click the gear icon, select Advanced, and paste your script into the Page Header Code Injection field. The chatbot will only load on that page.

Will Squarespace's mobile preview show the chatbot?

The Squarespace editor's built-in mobile preview does not execute third-party scripts, so the chatbot widget will not appear there. This is a preview limitation, not a live-site issue. Open your live site on an actual mobile device or browser emulator to confirm the widget loads correctly in mobile view.

What if the chatbot conflicts with Squarespace's own pop-up blocks?

Squarespace promotional pop-ups and chatbot widgets occupy different DOM layers and rarely conflict directly. If you see z-index overlap — where one element covers the other — add a small CSS override in Design → Custom CSS: `.chat-widget-selector { z-index: 9999 !important; }`. Replace `.chat-widget-selector` with the actual class your chatbot widget uses.

Can I customize the chatbot color to match my Squarespace theme?

Yes, if the chatbot provider supports theme customization. Knobot, for example, lets you set a primary color in the dashboard before copying the embed snippet. Changes made in the dashboard propagate automatically to the embedded widget — you do not need to re-paste the script tag.

Does Squarespace 7.0 vs 7.1 make a difference for chatbot embedding?

The Code Injection pathway is the same in both versions — Settings → Advanced → Code Injection. The visual editor and template architecture differ between 7.0 and 7.1, but neither affects how a `<script>` tag in the header is executed. If you are unsure which version your site uses, check Settings → Advanced → Developer Tools: 7.1 sites show a toggle to enable Developer Mode.

Sources