CMS Guide

Squarespace Integration

Embed Widgetfied widgets into any Squarespace site with simple Code Blocks.

Works With Any Squarespace Site

Add professional widgets to your Squarespace pages in minutes.

• Two embedding options: Code Block or Embed Block
• No third-party plugins required
• Supports all widget types
• Custom styling via white-label settings
• Mobile-responsive out of the box

Quick Start

Add a widget to your Squarespace page in 3 simple steps:

Add Code or Embed Block

In your Squarespace editor, add a </> Code block or Embed block

Paste Widget Code

Copy and paste the widget embed code

Whitelist Domain

Add your Squarespace domain in Widgetfied settings

Before You Start

Your Tenant ID

Get this from your Widgetfied dashboard under Settings → API Keys

Squarespace Business Plan or Higher

Check your Squarespace plan supports Code Blocks or Embed blocks

Domain Whitelist Access

You'll need to whitelist your Squarespace domain in Widgetfied

Step-by-Step Installation Guide

Follow these steps to add widgets to your Squarespace site

Navigate to Your Page

In your Squarespace dashboard, click on the page where you want to add the Widgetfied widget.

Tip: You can add widgets to any page, including landing pages, service pages, or your homepage

Enter Edit Mode

Click the "EDIT" button at the top of the page to enter the page editor.

Add a New Block

Click the "+" button (Add Block) in the location where you want the widget to appear.

Tip: Position the widget where your call-to-action naturally fits

Select Code Block or Embed Block

From the block options menu, select the </> Code block. Alternatively, you can select the Embed block instead.

Tip: Both Code and Embed blocks work the same way for adding widget code

Check your Squarespace plan supports Code Blocks

Embed the Script Tag

In the code block, first paste the Widgetfied script:

<script src="https://cdn.widgetfied.com/portal.js"></script>

Embed the Widget Container

Below the script tag (in the same code block), add the widget div with your configuration:

<div id="portal-widget"
  data-widget="jobportal"
  data-tenant="YOUR_TENANT_ID"
  data-container="portal-widget"
  data-display-mode="button">
</div>

Replace YOUR_TENANT_ID with your actual tenant ID from your Widgetfied dashboard

Whitelist Your Domain

This is a critical step! You must add your Squarespace domain to Widgetfied.

1.Go to your Widgetfied dashboard
2.Navigate to Settings
3.Add your Squarespace domain to the whitelist
4.Click Save

Example:

URL: https://carrot-cylinder-y24w.squarespace.com/config/pages

Whitelist entry: carrot-cylinder-y24w.squarespace.com

Handle Squarespace Security Warning

Squarespace will display an "Embedded Scripts" warning for security purposes.

Select "Preview in safe mode" to proceed and test your widget

Exit Preview Mode

After testing, select "Exit" to return to normal editing mode.

Tip: Your widget will work normally for visitors on your live site

View Your Widget

Save your changes and preview your page to see the widget in action!

button

A styled button appears that opens the widget when clicked

inline

The widget displays directly, confined to its parent container

modal

The widget opens as a fullscreen overlay

Alternative Method: Using Embed Block

Another way to add widgets using Squarespace's Embed block

Instead of using the Code block, you can also use Squarespace's Embed block with the Code Snippet option. This method works identically and uses the same widget code.

Add Embed Block

Click the "+" button and select "Embed" from the block options.

Open Embed Settings

Click on the Embed block to open its editing options.

Select Code Snippet

In the embed options, select "Code Snippet" to enter custom HTML/JavaScript.

Paste Widget Code

Paste the same widget code (script tag + div) that you would use in a Code block.

Use the same widget code:

<script src="https://cdn.widgetfied.com/portal.js"></script>
<div id="portal-widget"
  data-widget="jobportal"
  data-tenant="YOUR_TENANT_ID"
  data-container="portal-widget"
  data-display-mode="button">
</div>

Both methods use the exact same widget code. Choose whichever method you find easier in the Squarespace editor.

Domain Whitelisting

Required for your widget to function on Squarespace

Widgetfied requires you to whitelist your domain for security. This ensures your widgets only run on authorized domains.

1.Log in to your Widgetfied dashboard
2.Go to Settings → Allowed Domains
3.Enter your Squarespace domain (without https://)
4.Click Save

Domain Format

Full URL: https://your-site.squarespace.com/config/pages

Whitelist entry: your-site.squarespace.com

Only add the domain portion, not the full URL with paths

Widget Embed Codes

Copy the appropriate code for your widget type. Replace YOUR_TENANT_ID with your actual tenant ID.

AI Estimate Widget

Let customers get instant AI-powered estimates

Get AI Estimate

<script src="https://cdn.widgetfied.com/portal.js"></script>
<div id="estimate-widget"
  data-widget="estimate"
  data-tenant="YOUR_TENANT_ID"
  data-container="estimate-widget"
  data-display-mode="button">
</div>

Booking Widget

Allow customers to book appointments

Book Appointment

<script src="https://cdn.widgetfied.com/portal.js"></script>
<div id="booking-widget"
  data-widget="booking"
  data-tenant="YOUR_TENANT_ID"
  data-container="booking-widget"
  data-display-mode="button">
</div>

Job Portal Widget

Customers can view job status and details

View Job Status

<script src="https://cdn.widgetfied.com/portal.js"></script>
<div id="portal-widget"
  data-widget="jobportal"
  data-tenant="YOUR_TENANT_ID"
  data-container="portal-widget"
  data-display-mode="button">
</div>

Payment Widget

Accept payments directly on your site

Make Payment

<script src="https://cdn.widgetfied.com/portal.js"></script>
<div id="payment-widget"
  data-widget="payment"
  data-tenant="YOUR_TENANT_ID"
  data-container="payment-widget"
  data-display-mode="button">
</div>

Important: Replace YOUR_TENANT_ID

Get your tenant ID from your Widgetfied dashboard under Settings → API Keys

Display Mode Options

Choose how your widget appears on the page

buttonRecommended

Button Mode

A styled button appears that opens the widget when clicked. Best for CTAs and conversion points.

inline

Inline Mode

The widget displays directly on the page, confined to its container. Good for dedicated widget pages.

modal

Modal Mode

The widget opens as a fullscreen overlay. Great for immersive experiences.

Configuration Options

Customize widget behavior with data attributes

data-widgetRequired

Widget type

estimatebookingjobportalpayment

data-tenantRequired

Your tenant ID

YOUR_TENANT_ID

Get this from your Widgetfied dashboard

data-containerRequired

Unique container ID

Any unique string

Must match the div id attribute

data-display-mode

How the widget appears

buttonmodalinline

Default: button

Multiple Widgets on Same Page

You can add multiple widgets to the same page

<script src="https://cdn.widgetfied.com/portal.js"></script>

<!-- Estimate Widget -->
<div id="estimate-widget"
  data-widget="estimate"
  data-tenant="YOUR_TENANT_ID"
  data-container="estimate-widget"
  data-display-mode="button">
</div>

<!-- Booking Widget (in another Code Block) -->
<div id="booking-widget"
  data-widget="booking"
  data-tenant="YOUR_TENANT_ID"
  data-container="booking-widget"
  data-display-mode="button">
</div>

Only include the <script> tag once, even with multiple widgets. Each widget needs a unique id and data-container value.

Troubleshooting

Widget button not appearing

Verify YOUR_TENANT_ID is replaced with your actual tenant ID
Ensure your domain is whitelisted in Widgetfied settings
Verify your Squarespace plan supports Code Blocks
Make sure the script tag is included before the widget div

"Embedded Scripts" warning keeps appearing

This is normal Squarespace security behavior
Click "Preview in safe mode" to test
The warning only appears in edit mode, not for visitors

Widget not loading or showing errors

Double-check your domain is whitelisted correctly
Verify the domain format matches exactly (no https://, no paths)
Ensure your tenant account is active
Check browser console for specific error messages

Code Block option not available

Check your Squarespace plan supports Code Blocks
Review Squarespace documentation for plan features
Contact Squarespace support if you don't see the Code Block option

Best Practices

Use Button Mode for CTAs

Button mode works best for call-to-action placements like hero sections and service pages

Test on Mobile

Always preview your pages on mobile devices to ensure widgets display correctly

Use Unique Container IDs

Each widget on a page needs a unique id and data-container value

Whitelist Before Testing

Always whitelist your domain before expecting the widget to work

One Script Tag Only

Only include the portal.js script tag once per page, even with multiple widgets

Common Use Cases

Hero Section CTA

Replace your main call-to-action button with an estimate or booking widget

Above the fold, prominently displayed

Service Pages

Add estimate widgets to individual service pages

After service description

Contact Page

Offer booking and estimate widgets alongside contact info

Main content area

Footer CTA

Final call-to-action before users leave

Above or within footer section

Need Help?

Our support team is here to help you integrate widgets into your Squarespace site.

View All Docs Contact Support