How to add the booking widget to your website

A quick guide to setting up the booking widget on your restaurant' website! Manage all your reservation through resOS and improve your guest satisfaction.

With this guide, we will walk you through how easy it is to add the resOS booking widget on your own website. It won’t take more than a few minutes. By following this guide, you will be ready to receive table bookings from guests directly from your own site.

A widget is a graphical element that let you integrate a part of another system into your platform. Your guests will book a table on your restaurant's website, but the reservation will automatically be handled through the resOS booking system.

Setting up the booking widget on your website will make it easier for your guests to book a table right away when they are visiting your website.

Another option is to use a booking link. Instead of adding the booking widget to your website, you can link to your own resOS booking page. You can find your booking link and booking widget on the same page on your resOS account. You'll find it under settings -> Link & Widget.

How to set up your booking widget.

To get started we need the booking widget code to insert in your website codebase. If you don't already have the booking widget you can find it under your resOS account. Under the settings menu, you find the page called Link & widget, which contains your widget code.

If you have someone managing your website you should send them the widget code, and tell them to insert it on the page where you want it to display.

If you're doing it yourself you should open up the code in your editor, and insert it on the page/template where you would like it to show up on. An example from our website with a test restaurant looks like the following image in our code.

As you can see in the image above, we inserted the booking widget (the red box) into our page template. Your code will look a little different since it's with your own restaurant data.
NB: The widget will automatically have a width of 100% so to control how much it should fill on the page, you can put it inside another element on the page.

Underneath you can see how it will look on mobile and desktop when setup up correctly. First how it looks on the desktop.

And then a few images of the mobile version.

If you have any questions or need help to set it up correctly on your website, you're more than welcome to contact us at [email protected].

Next step? Set up your tables in the system and start using table management.