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?
- Log in to whichever website builder you use to run your website.
- Paste the button code below into the page.
- The buttons can be colored by pasting in the Hex code for the desired color in the color sections of the code.
- 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.
