With this guide, we will walk you through how easy it is to add the booking widget directly on your own website. It won’t take more than a few minutes, and you will be ready to receive table reservations from guests.
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 online 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 integrating the booking widget to your website, you can integrate a link to a table booking page that will open in a new tab. 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
Here is a step by step guide for how to get started with implementing the booking widget:
- Log in to your resOS account.
- Go to settings –> Link & Widget to find your widget code as shown in the image below
- Insert the booking widget code in your website codebase
- Open up the code in your editor, and insert the widget code on the page where you want the booking form to display
The image below shows an example of a booking widget code for a test restaurant integrated on the resOS.com website.
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 looks like on mobile and desktop when setup up correctly.
Booking widget on desktop
Booking widget on mobile
Ready to get started with resOS?
We hope this guide helps you with how to integrate your booking widget on your site. 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.