Sign Up

Squarespace

Install the widget on your Squarespace website

Installing the Widget on Squarespace

Overview

This guide will show you how to install our JavaScript widget on your Squarespace website. Squarespace makes it easy to add custom code through built-in features.

Method 1: Site-Wide Installation (Recommended)

This method adds the widget to all pages of your website.

Step 1: Access Settings

  1. Log in to your Squarespace account
  2. Open your website dashboard
  3. Click Settings in the left sidebar
  4. Click Advanced
  5. Click Code Injection

Step 2: Add Your Widget Code

  1. In the Code Injection page, you'll see three sections:

    • Header - Code loads in the <head> of every page
    • Footer - Code loads at the end of every page (recommended)
    • Order Confirmation Page - For e-commerce sites

  2. Click in the Footer text box

  3. Paste your widget script:

<script src="https://your-domain.com/widget.js"></script>
<script>
  YourWidget.init({
    apiKey: 'YOUR_API_KEY'
  });
</script>
  1. Replace YOUR_API_KEY with your actual API key from your dashboard

Step 3: Save Changes

  1. Click Save at the top of the page
  2. The widget will now appear on all pages of your site

Step 4: Verify Installation

  1. Visit your live website in a new browser tab
  2. The widget should be visible on all pages
  3. If you don't see it, clear your browser cache (Ctrl+Shift+R or Cmd+Shift+R)

Method 2: Single Page Installation

Add the widget to a specific page only.

Step 1: Open Page Settings

  1. In the Squarespace editor, click Pages in the left sidebar
  2. Hover over the page where you want to add the widget
  3. Click the gear icon (⚙️) next to the page name
  4. Scroll down and click Advanced

Step 2: Add Page Header Code Injection

  1. In the PAGE HEADER CODE INJECTION field, paste your widget script:
<script src="https://your-domain.com/widget.js"></script>
<script>
  YourWidget.init({
    apiKey: 'YOUR_API_KEY'
  });
</script>

  1. Replace YOUR_API_KEY with your actual API key

  2. Click Save at the bottom

Step 3: Publish Changes

  1. Click Save or Done to exit page settings
  2. Click the X to close the Pages panel
  3. The widget will appear on that specific page only

Note: Repeat these steps for each page where you want the widget.

Method 3: Using Code Block

Add the widget to a specific section of a page.

Step 1: Open Page Editor

  1. Navigate to the page where you want to add the widget
  2. Click Edit in the top left corner

Step 2: Add Code Block

  1. Click an Insert Point (the + button that appears between sections)
  2. Search for or select Code
  3. A code block will be added to your page

Step 3: Configure Code Block

  1. Click on the code block to open settings
  2. In the code editor, paste your widget script:
<script src="https://your-domain.com/widget.js"></script>
<script>
  YourWidget.init({
    apiKey: 'YOUR_API_KEY'
  });
</script>

  1. Replace YOUR_API_KEY with your actual API key

  2. Make sure Display Source is turned OFF (this is the default)

  3. Click Apply or click outside the code block

Step 4: Position the Block

  1. Drag the code block to your desired location on the page
  2. For best results, place it at the bottom of your page
  3. Click Save in the top left when done

Installing on Squarespace 7.0 vs 7.1

Squarespace 7.1 (Current Version)

Follow the instructions in Methods 1, 2, or 3 above. All methods work seamlessly.

Squarespace 7.0 (Legacy)

The process is similar:

  • Site-wide: Use Settings → Advanced → Code Injection (same as Method 1)
  • Page-specific: Use Page Settings → Advanced (same as Method 2)
  • Code blocks: Available in most 7.0 templates

Note: Squarespace is phasing out version 7.0. Consider upgrading to 7.1 for better features.

Installing on Squarespace Commerce Sites

For e-commerce websites, you may want the widget on specific pages:

On All Pages (Including Checkout)

Use Method 1 (Code Injection Footer)

On Product Pages Only

  1. Go to Settings → Advanced → Code Injection
  2. Add your script to the Footer section with conditional logic:
{.section item}
<script src="https://your-domain.com/widget.js"></script>
<script>
  YourWidget.init({
    apiKey: 'YOUR_API_KEY'
  });
</script>
{.end}

On Order Confirmation Page

  1. Go to Settings → Advanced → Code Injection
  2. Paste your widget script in the Order Confirmation Page section
  3. Click Save

Troubleshooting

Widget Not Appearing

  1. Clear cache:

    • Clear your browser cache
    • Use Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac)
    • Try viewing in an incognito/private browser window

  2. Verify code placement:

    • Check that you pasted the code in the Footer section (not Header)
    • Make sure you clicked Save after adding the code

  3. Check for conflicts:

    • Disable other custom code temporarily to identify conflicts
    • Some themes may have JavaScript conflicts

  4. Verify API key:

    • Ensure you replaced YOUR_API_KEY with your actual key
    • Check for extra spaces or estimates
    • Confirm the key is correct in your dashboard

Widget Appears Multiple Times

  • You may have added the code in multiple locations
  • Check Code Injection (site-wide), Page Settings, and Code Blocks
  • Remove duplicate installations

Widget Not Working in Preview

  • Custom code may not fully function in Preview mode
  • Always test on your published live site
  • Publish your changes and test in a new browser tab

Code Block Shows Code Instead of Widget

  • Make sure Display Source is turned OFF in the code block settings
  • The code block should be in HTML mode, not text or markdown

Best Practices

  1. Use Method 1 (Code Injection) for site-wide installation - it's the most reliable
  2. Always test on your live site after publishing
  3. Use Footer placement instead of Header for better page load performance
  4. Keep your API key secure - don't share it publicly
  5. Document your installation - note which method you used

Template Compatibility

The widget works with all Squarespace templates, including:

  • Squarespace 7.1 Templates: All current templates (Alameda, Bedford, etc.)
  • Squarespace 7.0 Templates: All legacy templates (Brine, Pacific, etc.)
  • Commerce Templates: Full support for online stores
  • Member Areas: Works in member-only sections

Important Notes

⚠️ Business Plan or Higher Required:

  • Code Injection features require a Business plan or higher
  • Personal plans have limited code injection capabilities
  • Check your plan at squarespace.com/pricing

⚠️ Cache Considerations:

  • Squarespace uses caching that may delay widget appearance
  • Always hard refresh (Ctrl+Shift+R) when testing
  • Changes may take a few minutes to propagate

⚠️ Mobile Responsiveness:

  • Test your widget on mobile devices after installation
  • The widget should automatically adapt to mobile screens

Squarespace Plan Comparison

FeaturePersonalBusinessCommerce
Code InjectionLimited✅ Full✅ Full
Page-level Code❌ No✅ Yes✅ Yes
Order Confirmation Code❌ No❌ No✅ Yes

Advanced Configuration

Loading Widget After Page Load

For better performance, you can delay the widget loading:

<script>
  window.addEventListener('load', function() {
    var script = document.createElement('script');
    script.src = 'https://your-domain.com/widget.js';
    script.onload = function() {
      YourWidget.init({
        apiKey: 'YOUR_API_KEY'
      });
    };
    document.body.appendChild(script);
  });
</script>

Conditional Loading by Page Type

Load widget only on blog posts:

{.section item}
  {.if item.categories}
    <script src="https://your-domain.com/widget.js"></script>
    <script>
      YourWidget.init({
        apiKey: 'YOUR_API_KEY'
      });
    </script>
  {.end}
{.end}

Need Help?

If you encounter any issues:

  • Check our FAQ at [your-support-url]
  • Contact support at [your-support-email]
  • Include your Squarespace version (7.0 or 7.1) and plan type
  • Take screenshots of any error messages

Removing the Widget

To remove the widget from your Squarespace site:

If using Code Injection:

  1. Go to Settings → Advanced → Code Injection
  2. Find and delete your widget code from the Footer section
  3. Click Save

If using Page Header Code:

  1. Go to Pages
  2. Click the gear icon next to the page
  3. Click Advanced
  4. Delete the code from Page Header Code Injection
  5. Click Save

If using Code Block:

  1. Edit the page containing the code block
  2. Click on the code block
  3. Press Delete on your keyboard
  4. Click Save