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.
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
- You'll need an OpenTable Restaurant ID. If your restaurant isn't in the OpenTable network, you can register here.
- 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.
- The OpenTable Block isn't optimized for restaurants in the Germany, Ireland, or the U.K. To add reservation booking for a restaurant in 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.
- 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.
Step 1 - Add the OpenTable Block
- Open a page or post editor.
- Click an Insert Point or the +.
- Select OpenTable from the menu.
- For more detailed steps, visit Adding blocks.
Step 2 - Add your OpenTable ID
- Enter your OpenTable Restaurant ID in the block Editor.
- Check Hide Title to remove the "Make a Reservation" title from the block, or leave it visible.
- Click Apply.
Step 3 - Style the block (optional)
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.
- Use the Open Table Background Color tweak to change the background color.
- Use the OpenTable Style tweak to change the button to Light or Dark.
OpenTable Block design and behavior
Depending on your template and style tweaks, the OpenTable Block will look like the example below.
When a visitor clicks Find a Table, a window opens where they can complete the reservation.
Note: If a visitor visits your site over an HTTPS connection, they won't see the reservation dropdown. Instead, they'll use the Find a Table button to complete their reservation on OpenTable.
If you're building a restaurant website, you may want to use the Menu Block to add a menu to your site.