Integrating Custom Booking Widgets into Your Restaurant Website

When a hungry customer finds you on Google Maps, their next stop is your website.

And if they can’t reserve a table in seconds, you risk losing them to the place down the street. That’s why a custom booking widget is a must-have, rather than a nice extra.

This guide will show you how to integrate it into your restaurant website quickly and easily.

Let’s get started!

Set Up Your Tablein Account for Online Bookings

For illustrative purposes, we’ll use our Tablein as an example.

That’s why, before adding a booking widget to your website, you’ll need to make sure your Tablein account is fully set up. 

This ensures the widget displays the correct information and prevents issues with table availability or reservation times.

Start with your restaurant profile. Add your name, address, phone number (optional), and email. 

Source: Tablein

You’ll also need to upload your logo (up to 500×500 px) so it appears on booking confirmations and your widget.

Setting your time zone and language applies to the widget, notifications, and reservation policies, so make sure it’s accurate for both you and your customers.

Next, add dining areas and tables. 

Defining each seating area, like the terrace and main dining room, and specifying the number of tables in each, helps the system manage reservations efficiently.

To avoid booking errors, it’s also essential to carefully enter opening hours and adjust availability.

Source: Tablein 

So, double-check your regular shifts, last booking time, and any special hours. You can use custom periods to handle holidays or one-off changes.

When your backend settings are correct, the widget will run smoothly, enabling your diners to see exactly when and where they can reserve a table.

Generate Your Widget

Tablein’s booking widgets run on simple HTML code that you can copy and paste directly into your website. 

But before you can do that, you’ll need to either create a new widget or adjust an existing preset to fit your restaurant’s needs.

Start by giving your widget a name and choosing your reservation type. 

You can make bookings fully automated, half-automated, or manual. Most restaurants opt for fully automated systems, as this saves time and confirms bookings instantly.

Next, add custom fields. These include everything from allergy information and special occasions to guest tags. 

Source: Tablein

You can also enable a waiting list option for when tables are full, keeping potential guests in the loop.

Then, fine-tune your booking policy. Decide whether it’s shown in full within the widget or linked separately. Clear policies improve the diner experience and help remove confusion.

Finally, customize the look. Widgets are available in both Light and Dark modes, and there are a number of preset color options designed to match that mode. 

Source: Tablein

You can also create a fully custom color palette to match your brand and pick from several different themes.

For standalone widget links, you can also add a background image. Find some inspiration here.

Source: Tablein

When you’re done, save your settings and check the Widget Integration section. 

There you’ll see two link-related sections, one for preview or sharing, the other an HTML Code for embedding into your site.

Source: Tablein

Once everything looks and works the way you want, it’s time to embed the widget on your website.

Embed the Widget on Your Website

Once your widget is ready, adding it to your website is quick and straightforward.

Open your Widget Integration tab inside Tablein. Here, you’ll see an HTML Code section—this is the snippet you’ll need to copy.

Source: Tablein

Log in to your website’s editing tool, such as WordPress, Wix, or Squarespace. Navigate to the page where you want the booking widget to appear—usually your homepage or a dedicated “Reservations” page.

Look for an option to add Custom HTML or Embed Code. 

This might appear as a block, widget, or module, depending on your website builder. 

Click to open it, then paste the HTML code from Tablein into the field. The image below shows this in Wix’s tool.

Source: Tablein

Save your changes and refresh the page to check the placement. 

If it doesn’t look right, you can move the code block to another section of the page or adjust the styling inside Tablein’s widget settings.

Embedding the widget directly means your visitors can book a table without ever leaving your site, encouraging more confirmed reservations.

Add Booking Options to Facebook

Your Facebook page is more than just a place to post updates—it can also take bookings directly. 

Tablein offers three ways to make that happen, so you can choose the one that works best for your audience.

Firstly, if you want a quick setup without extra integrations, you can add a call-to-action button under your Facebook cover photo and link it to your Tablein widget.

After you’ve signed into your Facebook Business Manager, click + Add a Button under your cover photo.

Copy your active widget link from Tablein and paste it into Facebook.

Source: Tablein

Remember that you can also use this link in posts or promotions.

Alternatively, if you want the reserve button on display, your Facebook and Instagram accounts must be Business accounts and linked together. 

This integration uses Mozrest, so you’ll also need credentials from Tablein support.

Once you have them, add an Action Button, choose Reserve, select Mozrest, log in with your Tablein credentials, and link your restaurant location.

Source: Tablein

Finally, you can use Instant Reply messages.

You have to enable Instant Reply in your Facebook Page inbox so anyone who messages you instantly receives your booking link. 

Go to your Inbox, click on Automations and toggle on Instant Reply, select Messenger, and paste your widget link from Widget Integration.

Source: Tablein

By using one or more of these methods, you ensure customers can secure a table directly from your Facebook page, whether they prefer clicking a button or messaging you first.

Add Reserve Button to Your Instagram Profile

Instagram is often where diners first discover your restaurant, so adding a Reserve button directly to your restaurant’s profile can capture that interest instantly. 

This integration also uses Mozrest, and, as mentioned previously, your Facebook and Instagram Business accounts need to be connected before you start.

To begin, open Instagram and go to your Edit Profile page. Scroll to the Action Buttons section and select Reserve.

Source: Tablein

Once you’re there, choose Mozrest as a provider. For login, you’ll be using the same credentials provided by Tablein support.

Finally, choose your restaurant, mark the correct location, and confirm your selection by clicking the check mark.

Once complete, the Reserve button will appear on your Instagram profile, making it easy for followers to book a table without leaving the app.

Just don’t forget to post eye-catching food photos with a subtle reminder that reservations are just one tap away!

Enable Reserve with Google

Enabling Reserve with Google lets you connect your Google Business profile with Tablein so guests can book directly from Google Search or Google Maps.

A visible “Reserve” button here makes it easier for potential diners to secure a table the moment they find your restaurant online, without having to navigate to a separate booking page.

To activate the integration, log in to Tablein and open the 3rd Party Integrations section. Find Reserve with Google and switch it on. 

You’ll need to enter your restaurant’s phone number, then search for your business by name or address to link the correct Google Business listing.

Source: Tablein

Once connected, the request needs to be reviewed, but the Reserve button should appear on your Google profile within 2–3 days.

If your restaurant doesn’t appear in the search or you receive an error, double-check your Google Business profile settings. 

Tablein’s support team is also available for troubleshooting via live chat or email.

Keep in mind that this integration doesn’t currently support prepayments or no-show protection—bookings made through Google are instantly confirmed. 

For better control, we recommend directing reservations to your Google Business link.

Activate Michelin Guide Integration

Next up, you want to integrate the booking widget directly with the Michelin Guide to streamline the journey from discovery to booking.

Thanks to our partnership with Mozrest, diners can instantly select a date, time, and party size without ever leaving the Michelin website or mobile app. 

Source: Tablein

The setup itself is straightforward: After you’ve opened 3rd Party Integrations, select Mozrest, enable “Connect with the Michelin Guide,” and your listing will appear within 24 hours.

The integration is available in most countries worldwide, with the exception of the following: Australia, Austria, Belgium, France, Germany, Luxembourg, Italy, the Netherlands, Portugal, Spain, Switzerland, and the United Kingdom. 

Please note that each booking from Michelin carries a €2 per-cover fee. These bookings are automatically tagged in Tablein with the note “From Michelin Guide” to make it easy to track their source.

As with Google-supported bookings, this integration doesn’t support offers, prepayments, or no-show fees.

Activate Tripadvisor Integration

Activating Tripadvisor integration enables prospective diners to reserve a table as soon as they’ve checked out your Tripadvisor listing.

Once the integration is active, the booking button appears on your Tripadvisor profile, letting diners choose their preferred date, time, and party size without leaving the platform.

Source: Tablein

The process is the same as with the previous steps. 

Go to your Tablein account, open 3rd Party Integrations, and select Mozrest. 

Next, click Connect and enable Connect with TripAdvisor. The booking option should appear on TripAdvisor within 36 hours. If there are any hiccups, you can always reach out to Tablein support.

The integration isn’t supported in Australia, Austria, Belgium, France, Germany, Luxembourg, Italy, the Netherlands, Portugal, Spain, Switzerland, or the United Kingdom.

Bookings are instant, and there is a €1 per cover fee for every reservation received through TripAdvisor. The system automatically logs these bookings as “From Tripadvisor.”

Test Widget Functionality

Making a test reservation before you officially launch your booking widget ensures everything is working perfectly. 

You should try booking a table using both desktop and mobile devices to ensure the widget displays correctly and that the process feels as smooth as possible for your customers.

Source: Tablein

After placing your test booking, it’s time to check all your connected platforms—your website, Facebook, Instagram, Google, and any third-party integrations.

This way, you’ll verify that the reservation is properly displayed and that confirmation messages are sent as expected. 

Once you’re confident the widget is functioning as it should, you can turn your attention to performance tracking.

Thanks to the latest Tablein update, you can now add Google Analytics and Facebook Pixel tracking directly to your booking widget, as shown below.

Source: Tablein

This powerful feature lets you monitor reservation activity in real-time and measure how your marketing campaigns are driving bookings.

Linking all these tools may feel like a hassle, but taking the time to do so translates to valuable insights into visitor behavior.

And if you want to optimize your reservation strategy over time, data is essential.

Conclusion

So, how do you know you’ve succeeded? 

For starters, booking is as effortless as choosing a dish from the menu.

With a carefully customized and fully integrated booking widget in place, your online visitors are much more likely to become (and stay) paying guests. 

It’s simple—whether they find you through social media or Google search, a seamless booking experience adds to the overall impression of your establishment’s food, service, and atmosphere. 

Even if you’re just starting with online bookings, take the time to integrate the booking widget into your website, and you’re sure to see reservations grow!