Squarespace OpenTable Block Setup for Restaurant Websites

Optimize your restaurant's bookings with OpenTable blocks and enhance user experience on your Squarespace site.

Squarespace OpenTable Block Setup Guide

TL;DR:

  • OpenTable blocks let restaurants take bookings directly through their Squarespace site
  • You need an OpenTable Restaurant ID before you can add the block
  • Only use one OpenTable block per page or it won't work properly
  • Customize the look through the Design tab and your site's style settings
  • Best placed on homepage, footer, or dedicated reservations page

OpenTable blocks are one of the most useful features for restaurant websites on Squarespace. They let your customers book tables or join waitlists without leaving your site.

Getting Started with OpenTable Blocks

Before you can add an OpenTable block, you need an OpenTable Restaurant ID. If you don't have one, you'll need to register your restaurant with OpenTable first.

Once you have your ID, adding the block is straightforward. Edit the page where you want the booking form to appear, then select the OpenTable block from the content menu.

Setting Up Your Block

The block settings have two main sections you need to configure.

Content Settings

In the Content tab, enter your OpenTable Restaurant ID and select your domain and language. OpenTable supports multiple languages and works in several countries, so pick the options that match your location and customer base.

Design Settings

The Design tab controls what visitors see. You can hide elements like the title, icons, or OpenTable logo if they don't fit your site's look. This is particularly useful if you want the booking form to blend seamlessly with your design.

Making It Match Your Site

Fonts and Colors

The OpenTable block picks up styling from your site's global settings. To change the font, adjust your Heading style settings in the site styles panel. For colors, you can modify the background and text colors through your site's color settings.

Visual Tweaks

Remove unnecessary elements through the Design tab to create a cleaner appearance. Most restaurants find that hiding the OpenTable logo and extra icons creates a more professional look that feels integrated with their brand.

Pixelhaze Tip: Keep your styling consistent across the site. If your OpenTable block looks completely different from the rest of your pages, it can feel jarring to visitors.
💡

Where to Place Your Block

The most effective placements are:

  • Homepage – Gets maximum visibility for walk-in traffic
  • Footer – Available on every page without being intrusive
  • Dedicated reservations page – Creates a focused booking experience

You can also add it to specific pages like your menu or contact page, depending on your site structure.

Technical Notes

Only use one OpenTable block per page. Adding multiple blocks can cause functionality issues and prevent bookings from working properly.

If you have multiple restaurant locations, create separate pages for each one rather than trying to cram multiple blocks onto a single page. Alternatively, OpenTable offers multi-restaurant code that you can embed through a Code Block.

If the block isn't displaying correctly, try viewing your site in an incognito window or log out of Squarespace. Sometimes cached code can interfere with how the block appears.

FAQs

Can I use multiple OpenTable blocks on one page?
No, stick to one block per page. For multiple locations, use separate pages or OpenTable's multi-restaurant embed code.

Why doesn't my OpenTable block match my site's colors?
The block uses your site's global color settings. Check your site styles panel and make sure the heading and background colors are set how you want them.

The block looks different when I'm logged into Squarespace. Is this normal?
Yes, this can happen due to cached code. Check how it looks when logged out or in an incognito window for the true visitor experience.

Can I completely hide the OpenTable branding?
You can hide the OpenTable logo through the Design tab, but some OpenTable branding may remain depending on your account type with them.

Jargon Buster

OpenTable Restaurant ID – Unique identifier for your restaurant in OpenTable's system
Block Editor – Squarespace's tool for adding and editing content blocks
Design Tab – Section in block settings where you control visual elements
Site Styles Panel – Global settings that control fonts, colors, and spacing across your site

Wrap-up

OpenTable blocks make it easy for customers to book directly from your website, which typically leads to more reservations than sending people to external booking sites. The key is setting it up properly and making sure it fits with your site's overall design.

Remember the one-block-per-page rule, and don't forget to test how it looks and works from a visitor's perspective before you go live.

Ready to streamline your restaurant bookings? Join Pixelhaze Academy for more Squarespace guides and expert support.

Related Posts

Table of Contents