Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Using the OpenTable Block

You can use the OpenTable Block to add restaurant reservation booking to your site. Since the OpenTable block is designed to match the look of your site, it's a great alternative to OpenTable's reservation widget.

To get started, you'll need your OpenTable Restaurant ID. If your restaurant isn't in the OpenTable network, you can register here.

While you can add the OpenTable block to any page or blog post, we recommend adding it to your homepage, a footer, or its own "Reservations" page in your Main Navigation.

Before you begin

  • Bookings made through the OpenTable Block may be subject to OpenTable's regular reservation fees. For more information, contact OpenTable's support.
  • You can add one OpenTable Block per page. To add restaurant booking for multiple restaurants, try organizing your site so each location has its own page. Alternatively, you can add OpenTable's multi-restaurant reservation code to a Code Block. As a note, we can't offer support for any custom code on your site.
  • Since the block contains built-in embed code, the block won't display as visitors see it when you're editing and previewing in the Pages panel. To preview the block, log out or open the page in the Style Editor.
Note: This guide covers the latest version of the OpenTable Block, which expanded the block's language, design and styling options. If you added an OpenTable Block before November 16, 2017, delete it and add a new block to see the latest features.

Supported countries and languages

The OpenTable Block is optimized for restaurants in these countries:

  • Canada
  • Germany
  • Ireland
  • Japan
  • Mexico
  • United Kingdom
  • United States

For restaurants outside of these countries, we recommend linking your OpenTable page to a Button Block, a text link, or use OpenTable's embed code within a Code Block.

You can select one of these languages when setting up the block:

  • English
  • French
  • German
  • Japanese
  • Spanish

Step 1 - Add the OpenTable Block

  1. Open a page or post editor.
  2. Click an Insert Point or the +.
  3. Select OpenTable from the menu.
  4. For more detailed steps, visit Adding blocks.

Step 2 - Add your OpenTable ID

  1. Enter your OpenTable Restaurant ID in the block Editor.
  2. Select the OpenTable domain for your country from the Location drop-down menu. 
  3. Select your language from the Language drop-down menu. 
  4. Click Apply. 

OpenTable_ID.png

Step 3 - Customize what shows in the block

To customize what displays on the OpenTable block, click the Design tab in the block editor: 

  • Check Hide title to remove text "Make a Reservation."
  • Check Hide icons to remove the icons in the reservation drop-down menu. 
  • Check Hide OpenTable logo to remove the OpenTable logo. 

Click Apply to save the changes. 

OpenTable_Design.png

Step 4 - Style the block

You can change the OpenTable Block's appearance in the Style Editor. To find the block's style tweaks, open the Style Editor while page with an OpenTable Block.

OpenTable_BackgroundColor.png

  • Use the Open Table Background Color tweak to change the background color. The text will become lighter and darker automatically to maintain contrast with the background color. 

Example

Depending on your template and style tweaks, the OpenTable Block will look like the example below.

Screen_Shot_2017-11-16_at_11.25.10_AM.png

When a visitor clicks Find a Table, a window opens where they can complete the reservation.

Screen_Shot_2017-11-16_at_11.25.23_AM.png

Next step

If you're building a restaurant website, you may want to use the Menu Block to add a menu to your site.

Was this article helpful?
1 out of 5 found this helpful
Using the OpenTable Block