How to implement booking functionality in Umbraco

There are various ways to implement reservation booking forms on your website, including third-party providers such as OpenTable (https://www.opentable.co.uk), ResDiary (https://www.resdiary.com), Resova (https://resova.com) and Book a Table (https://www.bookatable.co.uk). In our example below, we will use OpenTable, which is an amazing service to get you up and running quickly.

From inside the CMS, you can implement these third-party tools in different ways, using a page component or a reusable pod.

Page Component - Method 1

Step 1

Login to the CMS, navigate to the page or blog post you would like to place your widget, right-click on the corresponding Component folder and choose to add an 'Embed Code Block' component. 

Step 2

As mentioned above, this demonstration will involve the OpenTable reservation widget. Go to https://www.otrestaurant.com/marketing/reservationwidget and enter your restaurant into the field provided.

Step 3

Select your chosen widget from the sidebar and then click 'Copy Code'.

Step 4

In the CMS, name your new 'Embed Code Block' component and paste in the code copied from OpenTable. Click 'Save and Publish'.

Step 5

Check out the final result on your website. You can now start to take bookings online.

Reusable Pod - Method 2

Step 1

Login to the CMS, expand 'Website Configuration', expand 'Pods', right-click on 'Pods' folder and choose to add an 'Embed Code Pod'.

Step 2

Go to https://www.otrestaurant.com/marketing/reservationwidget and enter your restaurant into the field provided.

Step 3

Select your chosen widget from the sidebar and then click 'Copy Code'.

 

Step 4

In the CMS, name your new 'Embed Code Pod' and paste in the code copied from OpenTable. Click 'Save and Publish'.

Step 5

For this example we want the widget to appear in the sidebar of our Blog listing. Go to the Blog page inside the CMS, scroll to the 'Reusable Content' section, choose to Override defaults pods and then add your new booking widget pod.

Step 6

Once the side panel appears, choose the correct pod(s) from it and 'Submit'.

Step 7

Once the pod has been added simply click 'Save and Publish'.

Step 8

Check out the final result on the sidebar of your website. You can now start to take bookings on your website.

Remember you can follow these methods for just about any other third party widget your website requires! :-).

Get started today

Join thousands of agencies, freelancers, enterprises & start ups worldwide who use uSkinned Umbraco themes to deliver results.