Skip to content
SupportHQ

Install guides / Squarespace

Install the SupportHQ widget on Squarespace

Squarespace adds site-wide scripts through Code Injection. Paste the SupportHQ snippet into the Footer field and it appears on every page.

Code Injection is available on the Business plan and higher. On Personal plans the field is not shown.

Requirements: Squarespace Code Injection requires the Business plan or higher.

Steps

  1. 1

    Copy your embed code from SupportHQ

    In the SupportHQ dashboard open your project, go to Integrations, choose Web chat, and copy the HTML snippet.

  2. 2

    Open Code Injection

    In the Squarespace dashboard go to Settings (or Website, depending on your version), then Advanced, then Code Injection.

  3. 3

    Paste into Footer

    Paste the snippet into the Footer field, not Header. Save.

  4. 4

    Check the live site

    Open your site in a private window. The launcher should appear within a second or two.

Where it goes: Settings, Advanced, Code Injection, Footer field.

The snippet

Replace YOUR_PROJECT_ID, or copy the ready-made version from Integrations, Web chat in your dashboard.

<script src="https://cdn.supporthq.app/widget/latest/supporthq-widget.js"></script>
<script>
  SupportHQWidget.init({
    projectId: 'YOUR_PROJECT_ID',
  })
</script>
Start free trial Book a call

Things that go wrong on Squarespace

  • The Header field runs before the body exists. Use Footer.
  • If Code Injection is not in the menu, the site is on a Personal plan.
  • A Code Block inside one page also works for a single page, but the site-wide Footer field is simpler and survives page edits.
  • Squarespace's AJAX page loading (on some templates) does not reload scripts between pages. One init is enough; the launcher persists.

Verify it works

  1. Open the published page in a private browser window. The launcher bubble should appear in the bottom-right corner within a second or two of the page loading.
  2. Click the bubble and ask a question your knowledge base covers. The reply should come from your content. Ask something it does not cover and confirm it says it does not know and offers to bring in a person.
  3. Open the same page on a phone. The panel should open full-height and the keyboard should not cover the reply.
  4. Check the SupportHQ inbox. The test conversation should be there with the page URL in its metadata.

FAQ

Can I show the widget on one page only?

Yes. Open that page's settings, go to Advanced, and paste the snippet into the Page Header Code Injection. It will run on that page only, after the page body loads.

Where do I find my project ID?

In the SupportHQ dashboard, open your project, go to Integrations, and choose Web chat. The embed code shown there already contains your project ID and any options you set (theme color, position, required fields). Copy it from there instead of typing it.

Will the widget slow my site down?

The script loads from a CDN. Place it at the end of the body, or use the async pattern shown for React and Next.js, and it will not block your page from rendering. Your content paints first.

Can I put the widget inside the page instead of a floating bubble?

Yes. Add a container element and pass mode: "embedded" and, if needed, container: "#your-id" to init. The chat renders inside that element at the width and height you set.

Related solutions

Further reading