Widget Integration
      Back to home
      1. Tablein self service portal
      2. Accepting online bookings
      3. 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.


      Step 2: Edit Embed Code

      1. Click "Edit" on the embed block.

      2. Select "Code Snippet" to open the HTML input field.

      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.

      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.

      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.