Squarespace Integration Guide

Complete guide to integrate CallMeBack with Squarespace

Setup time: 5-10 minutes

Difficulty: Easy

Compatible versions: Squarespace 7.0, 7.1

Integrate CallMeBack with your Squarespace website to capture leads from contact forms and custom pages. Squarespace powers millions of websites with beautiful, professional designs.

Prerequisites

A CallMeBack account - Sign up here
Your CallMeBack integration code from your dashboard
Squarespace site admin access
Squarespace Personal plan or higher (Business/Commerce recommended)
Active Squarespace website (7.0 or 7.1)

Integration Methods

Code Injection

5 minutes Easy

Use Squarespace's built-in Code Injection feature to add CallMeBack site-wide. This is the recommended method for most users.

Access Code Injection Settings

Navigate to the Code Injection section in your Squarespace settings.

Log into your Squarespace account
Go to Settings → Advanced
Click Code Injection
You'll see Header and Footer code areas

Important Note

Code Injection is available on Personal plans and higher. Free trial sites have limited access.

Add CallMeBack to Header

Insert your CallMeBack code in the Header Code Injection area.

Click in the Header code box
Paste your CallMeBack integration code
Click Save at the bottom of the page

<!-- CallMeBack Integration for Squarespace -->
<script>
(function() {
  var script = document.createElement('script');
  script.src = 'https://widget.callmebackbutton.com/widget.js';
  script.setAttribute('data-account', 'YOUR_ACCOUNT_ID');
  script.setAttribute('data-squarespace', 'true');
  document.head.appendChild(script);
})();
</script>

Important Note

The data-squarespace attribute helps optimize the widget for Squarespace-specific features and styling.

Test the Integration

Verify that CallMeBack is working correctly on your Squarespace site.

Visit your live website (not the editor preview)
Look for the CallMeBack widget (usually a floating button)
Test the callback form by filling it out
Check your CallMeBack dashboard for the test submission

Important Note

Changes may take a few minutes to appear. Clear browser cache if you don't see the widget immediately.

Page-Specific Code Block

8 minutes Easy

Add CallMeBack to specific pages using Squarespace's Code Block feature for targeted placement.

Add Code Block to Page

Insert a Code Block element on the specific page where you want CallMeBack.

Open the page editor for your target page
Click the + (Add Block) button
Search for and select Code block
Place the code block on your page

Configure Code Block

Add the CallMeBack integration code to the Code Block.

Click on the Code Block to edit it
Select HTML as the code type
Paste your CallMeBack code
Click outside the block to save

<script>
(function() {
  // Check if CallMeBack is already loaded to prevent duplicates
  if (!window.callmebackLoaded) {
    var script = document.createElement('script');
    script.src = 'https://widget.callmebackbutton.com/widget.js';
    script.setAttribute('data-account', 'YOUR_ACCOUNT_ID');
    script.setAttribute('data-squarespace', 'true');
    document.head.appendChild(script);
    window.callmebackLoaded = true;
  }
})();
</script>

Important Note

This method is useful for landing pages or specific sections where you want targeted lead capture.

Position and Style

Adjust the Code Block position and styling as needed.

Drag the Code Block to your desired location
The block itself will be invisible but will load CallMeBack
Preview your page to test the integration
Publish your changes when ready

Troubleshooting

Still having issues?

Can't find the answer you're looking for? Our support team is here to help with your integration.

Contact Support

Related Integrations

References & Official Documentation

Next Steps

Configure CallMeBack

Set up your business hours and timezone
Configure callback phone numbers
Set up email notifications
Add team members to your account

Advanced Features

Set up custom form templates
Configure lead scoring rules
Integrate with your CRM
Set up automated workflows

Need Help?

Our support team is here to help you with your integration.

Contact Support

Prerequisites

A CallMeBack account - Sign up here
Your CallMeBack integration code from your dashboard
Squarespace site admin access
Squarespace Personal plan or higher (Business/Commerce recommended)
Active Squarespace website (7.0 or 7.1)

Integration Methods

Code Injection

5 minutes Easy

Use Squarespace's built-in Code Injection feature to add CallMeBack site-wide. This is the recommended method for most users.

Access Code Injection Settings

Navigate to the Code Injection section in your Squarespace settings.

Log into your Squarespace account
Go to Settings → Advanced
Click Code Injection
You'll see Header and Footer code areas

Important Note

Code Injection is available on Personal plans and higher. Free trial sites have limited access.

Add CallMeBack to Header

Insert your CallMeBack code in the Header Code Injection area.

Click in the Header code box
Paste your CallMeBack integration code
Click Save at the bottom of the page

<!-- CallMeBack Integration for Squarespace -->
<script>
(function() {
  var script = document.createElement('script');
  script.src = 'https://widget.callmebackbutton.com/widget.js';
  script.setAttribute('data-account', 'YOUR_ACCOUNT_ID');
  script.setAttribute('data-squarespace', 'true');
  document.head.appendChild(script);
})();
</script>

Important Note

The data-squarespace attribute helps optimize the widget for Squarespace-specific features and styling.

Test the Integration

Verify that CallMeBack is working correctly on your Squarespace site.

Visit your live website (not the editor preview)
Look for the CallMeBack widget (usually a floating button)
Test the callback form by filling it out
Check your CallMeBack dashboard for the test submission

Important Note

Changes may take a few minutes to appear. Clear browser cache if you don't see the widget immediately.

Page-Specific Code Block

8 minutes Easy

Add CallMeBack to specific pages using Squarespace's Code Block feature for targeted placement.

Add Code Block to Page

Insert a Code Block element on the specific page where you want CallMeBack.

Open the page editor for your target page
Click the + (Add Block) button
Search for and select Code block
Place the code block on your page

Configure Code Block

Add the CallMeBack integration code to the Code Block.

Click on the Code Block to edit it
Select HTML as the code type
Paste your CallMeBack code
Click outside the block to save

<script>
(function() {
  // Check if CallMeBack is already loaded to prevent duplicates
  if (!window.callmebackLoaded) {
    var script = document.createElement('script');
    script.src = 'https://widget.callmebackbutton.com/widget.js';
    script.setAttribute('data-account', 'YOUR_ACCOUNT_ID');
    script.setAttribute('data-squarespace', 'true');
    document.head.appendChild(script);
    window.callmebackLoaded = true;
  }
})();
</script>

Important Note

This method is useful for landing pages or specific sections where you want targeted lead capture.

Position and Style

Adjust the Code Block position and styling as needed.

Drag the Code Block to your desired location
The block itself will be invisible but will load CallMeBack
Preview your page to test the integration
Publish your changes when ready

Troubleshooting

Still having issues?

Can't find the answer you're looking for? Our support team is here to help with your integration.

Contact Support

References & Official Documentation

Next Steps

Configure CallMeBack

Set up your business hours and timezone
Configure callback phone numbers
Set up email notifications
Add team members to your account

Advanced Features

Set up custom form templates
Configure lead scoring rules
Integrate with your CRM
Set up automated workflows

Squarespace Integration Guide

Prerequisites

Integration Methods

Code Injection

Access Code Injection Settings

Important Note

Add CallMeBack to Header

Important Note

Test the Integration

Important Note

Page-Specific Code Block

Add Code Block to Page

Configure Code Block

Important Note

Position and Style

Troubleshooting

Still having issues?

Related Integrations

References & Official Documentation

Next Steps

Configure CallMeBack

Advanced Features

Need Help?

Squarespace Integration Guide

Prerequisites

Integration Methods

Code Injection

Access Code Injection Settings

Important Note

Add CallMeBack to Header

Important Note

Test the Integration

Important Note

Page-Specific Code Block

Add Code Block to Page

Configure Code Block

Important Note

Position and Style

Troubleshooting

Still having issues?

Related Integrations

References & Official Documentation

Next Steps

Configure CallMeBack

Advanced Features

Need Help?

Setup a Demo

Thank you for scheduling a demo!

Request a Call Back

Thank you for your request!

Join Our Waitlist

Welcome to the waitlist!