Dashboard

Documentation

Squarespace Integration Guide

Learn how to integrate Demeterics into your workflows with step-by-step guides and API examples.

Squarespace Integration Guide

Add the Demeterics AI Chat widget to your Squarespace website using Code Injection.

Requirements

  • A Squarespace website on Business, Commerce, or Enterprise plan
  • A Demeterics AI Chat widget (get your widget key from the AI Chat dashboard)

Important: Code Injection with <script> tags requires a Business plan or higher. Personal plans cannot execute JavaScript.

Installation Steps

Step 1: Get Your Widget Code

  1. Log into your Demeterics dashboard
  2. Go to AI Chat
  3. Click on your widget
  4. Copy your Agent Key (e.g., DEM-A4E4OWSVGHBN)

Step 2: Access Code Injection

Squarespace 7.1 or newer:

  1. Go to your Squarespace dashboard
  2. Click Settings in the left sidebar
  3. Click Advanced
  4. Click Code Injection

Squarespace 7.0:

  1. Go to Settings → Advanced → Code Injection

Step 3: Add the Widget Code

  1. Scroll down to the Footer section
  2. Paste this code:
<!-- Demeterics AI Chat Widget -->
<script src="https://demeterics.com/widget/embed.js?k=DEM-YOUR-KEY-HERE" async></script>
<dem-agent name="default" title="Need help?" state="minimized"></dem-agent>
  1. Replace DEM-YOUR-KEY-HERE with your actual Agent Key
  2. Click Save

Why Footer?: Squarespace recommends adding chat widgets and third-party scripts in the Footer to prevent performance issues and ensure proper loading.

Step 4: Test Your Widget

  1. Click Save and exit settings
  2. Visit your live site (not in edit mode)
  3. The widget should appear in the bottom right corner
  4. Test a conversation to make sure it works

Page-Specific Code Injection

Want the widget to appear only on certain pages?

Steps:

  1. Go to the Pages panel in your Squarespace dashboard
  2. Hover over the page where you want the widget
  3. Click the ⚙️ (gear icon)
  4. Click Advanced
  5. Scroll down to Page Header Code Injection
  6. Paste your widget embed code
  7. Click Save

Note: Use the Footer code injection for site-wide installation. Use page-level injection only if you want different widgets on different pages.

Customization Options

Change the Widget Title

<dem-agent name="default" title="Chat with us!"></dem-agent>

Use Different Prompts on Different Pages

If you've created multiple prompts in Demeterics (e.g., support, sales, checkout):

Site-wide footer (most common):

<dem-agent name="default" title="Need help?"></dem-agent>

Product pages (add to product page template):

<dem-agent name="sales" title="Product Questions?"></dem-agent>

Contact/Support pages (add to specific pages):

<dem-agent name="support" title="How can we help?"></dem-agent>

Start the Widget Open

<dem-agent name="default" title="Need help?" state="open"></dem-agent>

Embedded Widget (Inline on Page)

To place the widget inline (not floating), use a Code Block:

  1. Edit the page in Squarespace
  2. Click Add Block (+)
  3. Select Code (under "More" section)
  4. Choose HTML mode
  5. Paste this code:
<script src="https://demeterics.com/widget/embed.js?k=DEM-YOUR-KEY-HERE" async></script>
<dem-agent mode="embedded" name="default" title="Support Assistant"></dem-agent>
  1. Click Apply

The widget will now appear inline in your page content instead of floating.

Troubleshooting

Widget doesn't appear

Check these:

  1. Do you have a Business plan or higher? Personal plans don't support JavaScript in Code Injection.
  2. Did you add the code to the Footer section (not Header)?
  3. Is your widget key correct?
  4. Is your Squarespace domain added to Allowed Domains in your Demeterics widget settings?
  5. Clear your browser cache and hard refresh (Ctrl+Shift+R / Cmd+Shift+R)

Test in Preview mode: Squarespace allows you to preview changes before publishing. Use this to test the widget.

"Domain not allowed for this agent"

  1. Go to your Demeterics dashboard → AI Chat → Your Widget
  2. Add your Squarespace domain to Allowed Domains
    • Built-in domain: yoursite.squarespace.com
    • Custom domain: yoursite.com
    • Add both if you use both
  3. Save and refresh your website

Widget appears but doesn't work

If the widget shows but clicking it does nothing:

  1. Check browser console for errors (F12 → Console tab)
  2. Make sure you're on a Business plan or higher
  3. Verify the widget script loaded (F12 → Network tab → search for "embed.js")

Email us at support@demeterics.com if you still have issues.

Widget conflicts with Squarespace theme

Some Squarespace themes have CSS that may interfere with the widget positioning:

  1. Try adding this to your Custom CSS (Design → Custom CSS):
dem-agent {
  z-index: 9999 !important;
}
  1. If that doesn't help, email support@demeterics.com with your site URL and theme name.

Performance issues or slow loading

If your site loads slowly after adding the widget:

  1. Make sure you added async to the script tag (it should be there in our example)
  2. Keep the code in the Footer section (not Header)
  3. Check if you have other heavy scripts loading - consider removing unused ones

Commerce-Specific Tips

If you run a Squarespace Commerce store, you can create specialized prompts for:

Product pages:

  • Create a prompt named "product" with product information
  • Add to product page templates or use page-specific injection

Checkout assistance:

  • Create a prompt named "checkout" for order help
  • Add to checkout pages (if supported by your theme)

General support:

  • Use "default" prompt site-wide
  • Include shipping, returns, and contact information

Need Help?

Email us: support@demeterics.com

We can help with:

  • Verifying your Squarespace plan supports Code Injection
  • Writing custom prompts for your store or business
  • Advanced widget customization
  • Troubleshooting CSS conflicts
  • Commerce-specific chatbot configurations

Additional Resources