How to add BNBForms widget in Squarespace

Note: You’ll need to embed a custom code snippet; this feature is available only for Squarespace premium Business and Commercial plans.

Follow these steps to add the BNBForms booking widget to your site:

  1. Go to the BNBForms account > Widget Script > copy the script.
  2. Navigate to the Home Menu of Squarespace > Settings > Advanced > Code Injection.
  3. code-injection-squarespace

  4. Paste the script into the appropriate Code Injection fields for the header or footer and save the changes.
  5. booking-on-squarespace

  6. Check out the Book Now button on the frontend of your site.

Click on the button to test the widget:

booking-widget-for-squarespace

How to embed the booking widget to an individual page

  1. Open a page in the Squarespace Editor.
  2. Press Add Block.
  3. Find Embed block and add it.
  4. Press Edit on the block.
  5. Choose Code Snippet.
  6. Press Embed data.
  7. Insert Iframe code in textarea.
  8. Resize and place a block on the page.
  9. Save.
  10. Customize form colors.
  11. To make the iframe transparent in your BNBForms account go to Appearance > Customize > Additional CSS and add code (optional).
    body {
    	background: transparent;
    }
  12. View your page.