Quick Tip: Add an online Booking or Reservation form widget to your uSkinned website using OpenTable

How can I quickly add an online booking or reservation form to my restaurants new website from inside the Umbraco CMS?

uSkinned Member

Out-of-the-box, all uSkinned themes offer quick and easy-to-use tools to integrate any third party code widgets. 

In this particular example we will demonstrate how to add an OpenTable booking form widget into any of our themes.

 

Code Section

The Code Section can be added to the Page Component folder found under all page or blog post types in your uSkinned Umbraco theme.

Code Section - Step 1.1

In the CMS, navigate to the page you would like to place your widget, right-click on the corresponding Page Component folder and choose to add a Code Section.

Code Section - Step 1.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.

Remember though you can follow all of these steps for just about any other third party widget you require.

Code Section - Step 1.3

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

Code Section - Step 1.4

In the CMS, name your new Code Section component and paste in the code copied from OpenTable. Then simply, Save and Publish.

Code Section - Final Result

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

 

Code Pod

Sitewide Pods appear in the sidebars of your Standard Page types. In this example we will add the widget to the Blog listing.

Code Pod - Step 1.1

Code Pod - Step 1.2

Code Pod - Step 1.3

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

Code Pod - Step 1.4

In the CMS, name your new Code Pod component and paste in the code copied from OpenTable. Then simply, Save and Publish.

Code Pod - Step 1.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, navigate to the Pods tab, choose to Override defaults pods and then add your new booking widget pod.

Code Pod - Step 1.6

Once the side panel appears choose the correct pod(s) from it and submit.

Code Pod - Step 1.7

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

Code Pod - Final Result

Check out the final result on your websites side bar. You can now start to take bookings from any page in your website. :)

comments powered by Disqus

Get started today

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