> ## Documentation Index
> Fetch the complete documentation index at: https://docs.useinvent.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Squarespace

> Add your Invent assistant to Squarespace sites

## Overview

Add your Invent AI assistant to any Squarespace website with a floating bubble. Perfect for small businesses, portfolios, blogs, and online stores.

## Installation

<Steps>
  <Step title="Open Squarespace Settings">
    Log in to your Squarespace account and select your site.
  </Step>

  <Step title="Navigate to Code Injection">
    Go to **Settings** → **Advanced** → **Code Injection**.
  </Step>

  <Step title="Add to Footer">
    Scroll to the **Footer** section and paste this code:

    ```html theme={"system"}
    <invent-assistant assistant-id="YOUR_ASSISTANT_ID" />
    <script type="text/javascript" src="https://www.useinvent.com/embed.js" async defer></script>
    ```

    Replace `YOUR_ASSISTANT_ID` with your actual assistant ID from the Invent dashboard.
  </Step>

  <Step title="Save and Publish">
    Click **Save**, then refresh your site to see the assistant appear.
  </Step>
</Steps>

## Customization

### Match Your Squarespace Design

```html theme={"system"}
<invent-assistant
  assistant-id="YOUR_ASSISTANT_ID"
  theme-appearance="auto"
  theme-button-background-color="#000000"
  theme-button-color="#FFFFFF"
/>
<script type="text/javascript" src="https://www.useinvent.com/embed.js" async defer></script>
```

### Show Only on Specific Pages

For page-specific installation:

1. Navigate to the specific page in Squarespace
2. Click **Settings** (gear icon) for that page
3. Go to **Advanced** → **Page Header Code Injection**
4. Add the code there instead of site-wide footer

## Squarespace Commerce

For e-commerce sites on Squarespace:

* Help customers with product questions
* Provide size guides and fit information
* Answer shipping and return policy questions
* Assist with order tracking

The assistant appears on all pages including product and checkout pages.

## Member Areas

<Warning>
  **Security Requirement:** When using any `user-*` attributes (`user-id`, `user-name`), you **must** also provide `user-hash`. Both `user-id` and `user-hash` must be provided together, or neither should be provided. The `user-hash` must be generated on your backend using HMAC-SHA256 with your assistant's secret key. Never expose the secret key to the client.
</Warning>

For sites with member-only content, Squarespace does not provide built-in server-side scripting for hash generation. You'll need to use an external service (like a serverless function) to generate the hash securely, or use the basic implementation without authentication:

```html theme={"system"}
<!-- Basic implementation without authentication -->
<invent-assistant assistant-id="YOUR_ASSISTANT_ID" />
<script type="text/javascript" src="https://www.useinvent.com/embed.js" async defer></script>
```

See the [Widget Authentication](/assistants/widget#user-authentication-optional) guide for hash generation examples that you can deploy as serverless functions.

## Tips for Squarespace

<CardGroup cols={2}>
  <Card title="All Templates" icon="palette">
    Works with all Squarespace templates
  </Card>

  <Card title="Mobile Ready" icon="mobile">
    Optimized for mobile layouts
  </Card>

  <Card title="Blog Support" icon="blog">
    Perfect for blog post questions
  </Card>

  <Card title="Commerce Ready" icon="cart-shopping">
    Boost sales with instant support
  </Card>
</CardGroup>

## Version Compatibility

<Note>
  Works with both Squarespace 7.0 and 7.1. Code Injection is available on Business and Commerce plans.
</Note>

## Advanced: Custom CSS

Style the bubble position if needed:

```html theme={"system"}
<invent-assistant assistant-id="YOUR_ASSISTANT_ID" />
<script type="text/javascript" src="https://www.useinvent.com/embed.js" async defer></script>

<style>
  invent-assistant {
    /* Adjust position if needed */
    --bubble-bottom: 20px;
    --bubble-right: 20px;
  }
</style>
```

## Troubleshooting

<AccordionGroup>
  <Accordion title="Bubble not appearing">
    **Solutions:**

    * Verify you have Business or Commerce plan (required for Code Injection)
    * Check code is in Footer section, not Header
    * Clear browser cache and hard refresh (Cmd+Shift+R or Ctrl+Shift+R)
    * Verify assistant ID is correct
  </Accordion>

  <Accordion title="Conflicts with Squarespace features">
    **Solutions:**

    * Check z-index if bubble is hidden
    * Disable Squarespace's built-in chat if using Invent
    * Adjust bubble position with custom CSS
  </Accordion>

  <Accordion title="Not showing on mobile">
    **Solutions:**

    * Code Injection applies to all devices by default
    * Test on actual mobile device, not just browser resize
    * Check mobile view in Squarespace preview
  </Accordion>
</AccordionGroup>

## Template-Specific Notes

### Brine Family Templates

Works perfectly with all Brine family templates (Bedford, Bryant, etc.)

### Avenue Family Templates

Compatible with Avenue, Bedford, and all related templates

### Five Family Templates

Fully compatible with all Five-based templates

### Skye Family Templates

No conflicts with Skye or Pacific templates