---
title: Widget integration to Squarespace
description: Widget integration to Squarespace website
---

[Skip to content](https://help.tablein.com/widget-integration-to-squarespace#main-content)

![tablein\_logo\_gold](https://help.tablein.com/hs-fs/hubfs/tablein_logo_gold.png?width=85&height=21&name=tablein_logo_gold.png)

- [Add new restaurant](https://www.tablein.com/signup)

Open main navigation

Close main navigation

- [Add new restaurant](https://www.tablein.com/signup)
- [Account access](https://admin.tablein.com/)

[Account access](https://admin.tablein.com/)

 Hello. How can we help you?

- There are no suggestions because the search field is empty.

1. [Tablein self service portal](https://help.tablein.com/?hsLang=en)
2. [Accepting online bookings](https://help.tablein.com/accepting-online-bookings?hsLang=en)
3. [Widget Integration](https://help.tablein.com/accepting-online-bookings?hsLang=en#widget-integration)

# Widget integration to Squarespace

Squarespace is a website building and hosting platform that allows users to create and manage websites using pre-built templates and a drag-and-drop editor.

How to integrate widget to Squarespace:

### How to Integrate a Widget into Squarespace

#### Step 1: Add a Block

- 1. Navigate to your Squarespace editor.
    2. Select **"Add Block"**.
    3. From the list of available blocks, choose **"Embed"**.
    4. Move the block to your preferred location. You can adjust the width and height to fit the final reservation layout. Ensure that the height is sufficient to display all necessary content.
    
  ![](https://help.tablein.com/hs-fs/hubfs/GIF%20Recording%202025-03-03%20at%2011-41-48%20AM-gif.gif?width=688&height=418&name=GIF%20Recording%202025-03-03%20at%2011-41-48%20AM-gif.gif)

#### Step 2: Edit Embed Code

1. Click **"Edit"** on the embed block.
2. Select **"Code Snippet"** to open the HTML input field.

![](https://help.tablein.com/hs-fs/hubfs/GIF%20Recording%202025-03-03%20at%2011-44-47%20AM-gif.gif?width=688&height=417&name=GIF%20Recording%202025-03-03%20at%2011-44-47%20AM-gif.gif)

#### Step 3: Get the Widget Code from Tablein

1. Log in to your **Tablein** account.
2. Navigate to **Widget Integration Settings**.
3. Click **"Add New Marketing Channel"** and give it a title (e.g., "Website" or "Reservations"). This title will appear on the modal where reservations are made and will be used for tracking statistics.
4. Once the channel is created, click the **Copy** button to copy the HTML code or widget link:
   
     - If you want to embed the widget directly, copy the **HTML code**.
     - If you prefer a button with a redirect, copy the **widget link** instead. The button can also display the booking policy next to the widget.

![](https://help.tablein.com/hs-fs/hubfs/GIF%20Recording%202025-03-03%20at%2011-47-44%20AM-gif.gif?width=688&height=397&name=GIF%20Recording%202025-03-03%20at%2011-47-44%20AM-gif.gif)

#### Step 4: Embed the Code in Squarespace

1. Paste the copied **HTML code** into the embed block in Squarespace.
2. Click **Save** to apply the changes.
3. **Preview Mode:** Squarespace's safe preview may not display the full widget. To see the widget in action:
   
     - Save the page settings.
     - Open the page in a new tab to check the widget’s appearance.
4. If the placement needs adjustment, return to Squarespace settings and reposition or resize the block. The widget is responsive, so you can modify its width according to your preferences.

![](https://help.tablein.com/hs-fs/hubfs/GIF%20Recording%202025-03-03%20at%2011-51-46%20AM-gif.gif?width=688&height=372&name=GIF%20Recording%202025-03-03%20at%2011-51-46%20AM-gif.gif)

#### Step 5: Confirm the Widget Display

- After saving, the widget should be visible on the live page.
- While editing the page, you will only see the code block—not the widget itself. To verify that it works, view the page as a regular user.

![](https://help.tablein.com/hs-fs/hubfs/Screenshot%202025-03-03%20at%2011-53-35-png.png?width=688&height=344&name=Screenshot%202025-03-03%20at%2011-53-35-png.png)

<https://app.tablein.com/settings/widget-integration>

 

- [Setting up the system](https://help.tablein.com/setting-up-the-system?hsLang=en#main-content)

    - [Get started](https://help.tablein.com/setting-up-the-system?hsLang=en#get-started)
    - [Table management](https://help.tablein.com/setting-up-the-system?hsLang=en#table-management)
    - [Opening hours](https://help.tablein.com/setting-up-the-system?hsLang=en#opening-hours)
    - [FAQ](https://help.tablein.com/setting-up-the-system?hsLang=en#faq)
- [Accepting online bookings](https://help.tablein.com/accepting-online-bookings?hsLang=en#main-content)

    - [Widget Settings](https://help.tablein.com/accepting-online-bookings?hsLang=en#widget-settings)
    - [Widget Integration](https://help.tablein.com/accepting-online-bookings?hsLang=en#widget-integration)
    - [Troubleshooting](https://help.tablein.com/accepting-online-bookings?hsLang=en#troubleshooting)
- [E-mail & SMS notifications](https://help.tablein.com/e-mail-sms-notifications?hsLang=en#main-content)

    - [SMS notifications](https://help.tablein.com/e-mail-sms-notifications?hsLang=en#sms-notifications)
    - [Email marketing](https://help.tablein.com/e-mail-sms-notifications?hsLang=en#email-marketing)
- [Reservation Management](https://help.tablein.com/reservation-management?hsLang=en#main-content)

    - [Reservation list](https://help.tablein.com/reservation-management?hsLang=en#reservation-list)
    - [Calendar](https://help.tablein.com/reservation-management?hsLang=en#calendar)
    - [Floor Plan](https://help.tablein.com/reservation-management?hsLang=en#floor-plan)
    - [Settings explained](https://help.tablein.com/reservation-management?hsLang=en#settings-explained)
- [Prepayments & Events](https://help.tablein.com/prepayments-events?hsLang=en#main-content)

    - [No show / late cancellation fee](https://help.tablein.com/prepayments-events?hsLang=en#no-show-late-cancellation-fee)
    - [Prepayments and deposits](https://help.tablein.com/prepayments-events?hsLang=en#prepayments-and-deposits)
    - [Payments and events settings explained](https://help.tablein.com/prepayments-events?hsLang=en#payments-and-events-settings-explained)
    - [Payment Integrations](https://help.tablein.com/prepayments-events?hsLang=en#payment-integrations)
- [Building a website](https://help.tablein.com/building-a-website?hsLang=en)
- [Account & Billing](https://help.tablein.com/account-billing?hsLang=en#main-content)

    - [Account](https://help.tablein.com/account-billing?hsLang=en#account)
    - [Subscription](https://help.tablein.com/account-billing?hsLang=en#subscription)
    - [Invoices and Billing Information](https://help.tablein.com/account-billing?hsLang=en#invoices-and-billing-information)
- [Clients & Reports](https://help.tablein.com/clients-reports?hsLang=en#main-content)

    - [Guest book](https://help.tablein.com/clients-reports?hsLang=en#guest-book)
    - [Feedback list](https://help.tablein.com/clients-reports?hsLang=en#feedback-list)
    - [Full reservation list](https://help.tablein.com/clients-reports?hsLang=en#full-reservation-list)
    - [Reports](https://help.tablein.com/clients-reports?hsLang=en#reports)
- [V3 versija](https://help.tablein.com/v3-versija?hsLang=en)
- [V3 version](https://help.tablein.com/v3-version?hsLang=en)

[![tablein\_logo\_gold](https://help.tablein.com/hs-fs/hubfs/tablein_logo_gold.png?width=85&height=21&name=tablein_logo_gold.png "tablein_logo_gold")](https://help.tablein.com/?hsLang=en)

Copyright © 2025, Tablein Inc.