hotel-booking-site

Create a Hotel Booking System from Scratch: Embed a Code

In this guide, we’re about to tell you how to add a hotel booking system to your site, no matter whether you already have the latter or just plan to start it.

Who is this guide for, by the way? For people wearing many hats in the lodging business (hotels, resorts, cabins, cottages, etc.), ranging from property owners to developers who are looking to build a client website.

The most important thing is that we’ll talk about a user-friendly way of creating an online hotel booking system by utilizing a dedicated service: BNBForms.

What is BNBForms?

It’s a solution that encompasses a fully-fledged property management software, channel manager, and booking system. The best thing about it is that you can use this service with any CMS, be it Wix, WordPress, Squarespace or any other.

No matter the platform you choose to power your site, you’ll manage your properties and bookings in an external BNBForms account. To connect BNBForms to your site, you’ll simply need to embed a code snippet into the respective area of your site (there is a tutorial for each platform and CMS). Basically, at the end of this guide, you’ll be able to get a code to create a hotel booking system from scratch.

BNBForms is a subscription-based service that charges you a fixed price per year or per month no matter how many accommodations you have or bookings you receive. The first month of subscription is free so you can test-drive the platform with peace of mind without paying a dime.

So we promised to tell you about a few easy steps to embed a code snippet to your site and get the hotel booking form running.

To do so, let’s divide the post into two parts – in the first one, we’ll show you around the BNBForms dashboard and you’ll see what it takes to click buttons and configure some key settings. Most likely we’ll be unable to cover everything so if you’ll have any specific questions, don’t hesitate to open a chat room. In the second part, we’ll show you how to add the booking widget to a website.

How to set up BNBForms

Before you can generate a code snippet and insert it into your site, you need to make sure that all the settings behind the booking form are set up according to your preferences.

You need to do this for the booking widget to work according to your needs.

Once you created a free account with BNBForms, confirm your email address by following a link in the email inbox and log in to your account with the credentials received. The BNBForms dashboard will contain sample data for a few rooms and some system settings set up.

It’s impossible to cover all features BNBForms arms you with, but let’s at least take you through the main steps.

Add rental properties

Feel free to add unlimited properties, whether these are hotel rooms or individual properties. It will be easy to assign different locations to them if needed in future.

In this menu, you can create the entire list of amenities, bed types, add photos, etc. You can also automatically generate accommodations if there are many of the same types.

You can also add extras and assign them to rental accommodations. Those can be free or paid ones (e.g. a parking slot, food hamper, etc.).

Create seasons to set the price range

Tiered pricing is based on seasons. No matter whether it’s the whole summer period or the Christmas holidays period, you can create custom “seasons” with BNBForms. Add as many “seasons” as needed to set the line between the rate difference.

You can even exclude some weekdays within the season period. 

Add pricing and rates

Now it’s time to set the exact prices for each season, stay-in period, and the number of guests. You can create rates for specific rooms.

In this section, you can set discounts for longer stays, for example, or change pricing depending on the number of adults and children.

You can further alter the pricing by providing guests with custom coupons.

Add booking rules

In this menu, you can create check-in and check-out rules, define days and seasons for them. It’s also easy to specify minimum and maximum stay-in rules available, block accommodations when needed, designate in how many days before the arrival guests can book rooms, and add booking buffer times:

Apply optionally taxes and fees

Arrange all the extra charges here. It’s easy to add accommodation, service, and fee taxes into the property cost. Guests will see all costs in detail on the checkout page.

Optionally, however, you can display information about taxes and fees on the property search page

Payment processing for your hotel booking system

If you want the hotel booking system to accept payments on your site and deliver them straight to your chosen accounts or in any other way, there are a few good solutions with BNBForms.

As for the automated payment processing, you can use PayPal, 2checkout, Stripe, Braintree and Bambora or connect more via the dedicated built-in BNBForms addon. People can pay the full price or deposit online. Up to you.

Don’t want people to pay online? Then you can enable payments after arrival or even offer them direct bank transfer options.

Customize email notification templates

Edit and set up email templates for all occasions – new bookings, confirmed bookings, cancelled bookings, etc.

Set currency, booking confirmation modes, calendar design and more

Go through some major settings related to check-in and check-out times, booking approval time, etc.

Sync your hotel booking system to other platforms

Feel free to receive reservations from different OTA platforms and have them synced and centralized in your BNBForms account.

The sync process is a near real-time process, each booking will have its source.

When the settings and styling setup for your online hotel booking system is finished, you can generate a widget code snippet and embed it into your website.

The “Widget script” button is always visible in the admin dashboard so you can navigate to at any time, copy the widget and find the instruction for taking it further for your particular CMS platform, be it Wix, HTML, or any other site:

In this guide, let’s take WordPress, for example, the most popular CMS in the world and describe the process of how to embed a code and get your online hotel booking system running.

Code to create a hotel booking system from scratch 

To add a BNBForms script and power the hotel booking widget, I installed a free Head & Footer code plugin that will help me add a widget to the preferable place on my test site.

For example, I’m adding a script to the header part:

After saving the script, the booking widget appears on my site:

Now, once a traveler clicks on this button, which is floating and always visible, they see a booking widget just as you customized in the BNBForms dashboard:

Now guests can see the rooms and their availability – all the data is sourced from your BNBForms dashboard and settings.

Guests can also go to the rooms list and see the real-time availability calendars of each:

The calendar look depends on your styling preferences. On the final checkout page, guests submit some personal details, and optionally add services to cart: 

And of course, they choose a payment method:

If the submission is successful, there is a notification:

On the final screen, clients also see the status and details of their booking and payment:

All the bookings you receive are stored in the BNBForms dashboard:

booking form

Creating your own site powered by the BNBForms hotel booking system will help you take direct bookings easier and at the same time optionally connect them to external platforms. As you see, if you already have a website with rental properties, enabling the booking widget for them is a matter of a few hours. What do you think about this way to create a hotel booking system?