If you run a restaurant in the modern age, odds are you've gone the extra mile to put together a website that represents your business. The purpose of your restaurant's website is to educate and inform potential guests while also providing them with the means to easily reserve a table.

In the past that meant having your restaurant's phone number or email clearly visible on each page for visiting guests to see. These days though, it's a lot easier to convert website visitors to paying customers through the use of a booking widget. 

Booking widgets work much better than conventional call to actions because they take out all the guesswork from making a reservation online. Instead of having to fumble for their phones or log in to an email client, guests can make bookings within a few clicks.

Read on to learn a few tips to maximize the effectiveness of your booking widget on restaurant reservations from your website, as well as a free cut and paste html code for a reservation button.

5 Tips to Maximize Results from Your Website Booking Widget

Before you think about adding a booking widget to your website, there are a few steps you need to take to maximize the impact. 

• If your website has a dropdown menu or navigation bar, make sure to add a “Reservation” link so customers know where to click.
• Try adding the reservation link ‘above the fold’, meaning it is visible on the page without having to scroll down.
• Choose a button color that contrasts with the rest of the page.
• Have a pop-up prompt website visitors to make a booking.
• If you have an events section, add a reservation button under each event description.

How to Add a Reservation Button to Your Website?

1. Log in to whichever website builder you use to run your website.
2. Paste the button code below into the page.
3. The buttons can be colored by pasting in the Hex code for the desired color in the color sections of the code.
4. Paste the booking widget link where it says “INSERT BOOKING LINK HERE”.

Cut and Paste HTML Code

<a href=“INSERT BOOKING LINK HERE" class="myButton">Reserve</a> .myButton { backgroundcolor:#44c767; -moz-border-radius:28px; -webkitborder-radius:28px; border-radius:28px; border:1px solid #18ab29; display:inline-block; cursor:pointer; color:#ffffff; font-family:Arial; font-size:17px; padding:16px 31px; text-decoration:none; textshadow:0px 1px 0px #2f6627; } .myButton:hover { background-color:#5cbf2a; } .myButton:active { position:relative; top:1px; }

Reservation Button

Want to Learn More?

Download our FREE guide to restaurant booking widgets which includes everything in this article plus how to generate restaurant reservations from a plethora of other online channels.