Squarespace Integration Guide

This guide shows you how to add Heyo to your Squarespace website. Works with both Squarespace 7.0 and 7.1.

Installation

Method 1: Site-Wide Installation

1. In your Squarespace dashboard, go to Settings
2. Click Advanced
3. Click Code Injection
4. Paste this code in the Header section:

<script src="https://heyo.so/embed/script" defer data-project-id="YOUR_PROJECT_ID"></script>

5. Click Save

The chat widget will now appear on all pages.

Method 2: Page-Specific Installation

To add chat to specific pages only:

1. Navigate to the page in your Squarespace editor
2. Click the gear icon for page settings
3. Scroll down to Advanced
4. Click Page Header Code Injection
5. Paste the Heyo script
6. Click Save

Squarespace Commerce Integration

Show Chat on Product Pages

Help customers with product questions:

1. In Code Injection (Header), add:

<script src="https://heyo.so/embed/script" defer data-project-id="YOUR_PROJECT_ID"></script>

<script>
// Show chat only on product pages
if (window.location.pathname.includes('/shop/') || window.location.pathname.includes('/products/')) {
  // Chat will load automatically
} else if (window.HEYO) {
  // Optionally hide on other pages
  // window.HEYO.hide();
}
</script>

Hide Chat on Checkout

Add this to Code Injection (Header):

<style>
  body.checkout-page #heyo-widget-button {
    display: none !important;
  }
</style>

Advanced Usage

Custom Trigger Button

Create a button block in Squarespace, then add this to Code Injection (Footer):

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Find buttons with specific URL or text
  const chatButtons = document.querySelectorAll('a[href="#chat"], a[href="#heyo"]');
  chatButtons.forEach(button => {
    button.addEventListener('click', function(e) {
      e.preventDefault();
      window.HEYO?.show();
    });
  });
});
</script>

Then set your button's link to #chat or #heyo.

Match Your Squarespace Template

1. Go to your Heyo dashboard > Project Settings > Appearance
2. Pick colors from your Squarespace color palette
3. The widget will blend seamlessly with your design

Mobile Responsive

Heyo is automatically responsive. To adjust mobile positioning:

<style>
  @media (max-width: 768px) {
    #heyo-widget-button {
      bottom: 20px !important;
      right: 20px !important;
    }
  }
</style>

Squarespace Member Areas

For sites with member areas:

<script>
window.addEventListener('load', function() {
  // Check if user is logged in (Squarespace adds classes to body)
  const isLoggedIn = document.body.classList.contains('squarespace-authenticated');
  
  if (isLoggedIn && window.HEYO) {
    // Optionally show chat only to logged-in members
    window.HEYO.show();
  }
});
</script>

Squarespace Version Compatibility

Squarespace 7.1

Full code injection support - follow the standard installation above.

Squarespace 7.0

Code injection works the same way. Access via:

• Settings > Advanced > Code Injection (site-wide)
• Page Settings > Advanced (page-specific)

Best Practices

• Add code to Header for best performance
• Use Code Injection for site-wide chat
• Use Page Header for page-specific chat
• Test on all devices (desktop, tablet, mobile)
• Match widget colors to your template
• Consider hiding chat on checkout for better conversion

Troubleshooting

Chat widget not appearing

• Verify Project ID is correct
• Check that code is in Header, not Footer
• Ensure page is published (not in draft)
• Clear browser cache and reload

Widget position conflicts

• Adjust position using custom CSS
• Check z-index if chat is behind elements:

<style>
  #heyo-widget-button {
    z-index: 9999 !important;
  }
</style>

Not showing on specific pages

• Check if page has custom code injection
• Verify no conflicting CSS hiding the widget
• Ensure JavaScript is enabled in browser

Slow loading

• Code injection in Header ensures async loading
• Heyo is optimized and shouldn't slow down your site
• Check overall site performance in Squarespace analytics

Squarespace Template Compatibility

Heyo works with all Squarespace templates including:

• All 7.1 templates
• All 7.0 templates (Brine, Bedford, etc.)
• Custom templates
• Third-party templates

Extensions & Plugins

Heyo works alongside Squarespace extensions:

• Acuity Scheduling
• OpenTable
• Social sharing plugins
• Analytics extensions
• Email marketing integrations

Next Steps

• Customize widget appearance
• Set up integrations
• Create quick replies