How do I add the booking calendar to my website?

Once you have set up your inventory, pricing, and reservation rules to your account.  You're now ready to integrate the booking calendar into your website. This is a simple process that doesn't involve a technical background to achieve.  We will discuss how below. 

Access the Booking Calendar Code

The booking calendar is an HTML code within an iFrame.  This technology allows you to embed the booking calendar into your own website to make for a seamless booking process for your customers.  You'll find the code in your account by clicking on the Website tab. 



On this page, you can access the link to your listing on as well as customize, preview, and access the HTML code needed to add the calendar to your site. Listing

You can find the link to your listing here.  Having an account with WebReserv comes with a listing on our website.  This listing allows customers to find and book with you directly from our site. It's fully integrated into your system, so when you get a booking, you'll enjoy the benefits of real time availability and automatic notifications.




 The calendar options in this section allows you to customize the look of the booking calendar. You're able to customize easily in the following way:

  • Version - Choose from our 2 versions of the booking calendar.  Note that Version 2.0 is our most updated version, and the recommended one.  
  • Style - Choose Embedded here to add directly to your website
  • Search - Can select a search option here, or select non to show all products listed for booking
  • Availability Grid - Select yes to have an Availability Grid option.  This will create a button at the top of the booking calendar where a customer can get an At-a-glance view of your inventories availabilities.  This is ideal for Rentals and Campgrounds.
  • Appearance - Choose from the many options for color themes or create your own using our easy to use color grid.


Customize Calendar View



Customize Colors with Themes


 After selecting the options that you want, click the Preview button and a preview will be shown on the right side of the screen. If necessary, you can change the options and click Preview again to see how different settings affect the booking calendar.




Calendar views

Product Listing

Booking calendar Version 2.0 and the Embedded style option are the most popular choices and the default options.  When the user views the calendar, they will stay on your website, and will see the booking calendar inside your website. 

An example of what the Product Listing view is shown below.


Availability/Rate Grid

This option, if set to yes, will allow customers to see a view of all your inventory and rates for a week at a time.  On the first page of the booking calendar, your customers can click on "View Availability and Rates" button to see the grid view.  Customers can also choose a date and see availability for that week.


Adding the booking calendar code to your website

When you are done customizing the booking calendar, copy the HTML code from the section 4 - Copy HTML code, and paste the HTML code into your website editor at the place where you want the calendar.




Congratulations - you have now completed the booking calendar customization and setup process.

Was this article helpful?

3 out of 6 found this helpful

Have more questions? Submit a request