Keep it Simpler

Guide to the 1Day Booking Engine

Getting started with the booking engine is easy. We've broken down the process into four simple steps.

Prerequisites

To use the booking engine, you would need the following:

  • A WordPress website with the latest updates installed.
  • Admin access to add plugins to the website. You can ask the developer of your website if you do not have access.

Step 1 - Signup for a free 1Day.io account

If you already have a 1Day account, you can skip this step.

1.1. Signup to 1Day.io and add rooms

Go to 1day.io/signup

Enter your email and password or Sign up with Google.

Follow the Quick Start Guide to add rooms, room types and rates.

Currently, non-zero taxes are also required (this requirement will be removed in the next release). You can set taxes by going to Settings > Rate Plans & Charges > Taxes.

1.2. Create a new user and generate an API Key

Next we need to create a new user and API key that will be used to connect the booking engine. To do this go to Settings > Users, and click Add User.

Give this new user an email and password, then select the Editor role.

Then click on the ... more options, and click on Generate API Key.

Copy the new API key that was generated, you will need to enter this later.

Click on both the API-addbooking and API-availability roles to give access to that API Key.

Step 2 - Install the free WooCommerce plugin

If you already have WooCommerce installed you can skip this step.

WooCommerce is the world's most popular eCommerce platform. The booking engine will use WooCommerce for all payment gateways and room details such as descriptions and photos. It is not possible to proceed without installing WooCommerce.

Go to your WordPress admin page and follow this short guide on how to install WooCommerce.

After installing WooCommerce, make sure that you have at least one payment method enabled.

Go to WooCommerce > Settings > Payments, and click on the Enabled column.

For testing purposes, you can just enable Direct bank transfer. You can always change this later.

Step 3 - Install 1Day Booking Engine

3.1. Download the plugin

Go to https://downloads.wordpress.org/plugin/1day-io.zip

Click on download to save a copy of the plugin to your computer.

3.2. Install the plugin

Go to your WordPress admin page, and click plugins.

Click Add New, then Upload Plugin.

Select the .zip file that you downloaded in the previous step. Click Install Now, then Activate Plugin.

3.3. Enter API key

Still on the WordPress Admin page, Go to 1Day Options on the left menu.

Enter the 1Day API Key that you generated earlier in Step 1, and click Save Changes.

3.4. Synchronize rooms and hotels

After clicking Save, the table on the page will automatically update to show the number of hotels and room types that the API key has access to.

Click Synchronize.

This will sync hotels and room types into WooCommerce.

If you do not see anything here, please go back to Step 1.2, and make sure that you have the correct API Key and API permissions configured.

Step 4 - Customize the booking engine

4.1. Prepare pages in WordPress

The booking engine needs two pages:

One, a page that will display the search form where the user will choose the dates of their stay (check-in and check-out). This is usually the home page.

Two, a page that will display the search results of available rooms based on the user's parameters.

It is highly recommended that you use test pages while configuring the plugin. Ideally you can just duplicate your existing home page and the page where you want to display the available rooms. Then you can call these your test pages.

It's also possible to show both the search form and the search results on the same page if you like.

Take note of the full url of the page that will display the search results.

In this example, we will use this url:

https://yavinn-prod.websitetohotel.com/accommodation/

4.2. 1Day filters

Go to 1Day Options > 1Day filters, and click Add filter

Filters are what configures the search form and search results.

First enter a name for the filter, and in the URL field, specify the page from the previous step.

Then select the hotel that you will query for availability. Depending on your API key, you may have one or multiple hotels available.

The rest of the settings affect the display of the search form and search results. Feel free to customize it to fit your WordPress theme.

If you want to copy the demo, it uses the following settings:

Hide sorting:  Checked Yes

Default sorting:  Price (from low to high)

One line:  Checked Yes

Form alignment:  Center

Form width:  900px

Background color:  #22222288

Font color:  #ffffff

Border radius:  3px

Button border radius:  5px

Once done, click on Publish.

Then take note of the shortcodes on the right side. These shortcodes are what would allow us to insert the booking engine inside your WordPress pages.

4.3. Customize WooCommerce room settings

Internally, Rooms are considered as another type of product in WooCommerce.

We would need to customize them by adding descriptions and photos.

First, in the WordPress admin page, go to Products > All products

You should see the rooms that have been synchronized from your 1Day account. Click on any of the rooms.

Next, enter a description for the room. This would be displayed once a visitor selects this room on the front-end.

Scroll down a bit to the Product data section and select Room.

Here you can indicate a short description that would appear on the search results table. This is also where you can upload the main product image (on the right), as well as a product gallery if you wish.

The rest of the fields, such as reviews and product categories are displayed according to your specific WordPress theme. Some themes may ignore them completely, so please check first on the theme that you are using.

Once done, click on Publish/Update. Repeat this process for all the other rooms.

4.4. Add shortcodes

Next go to the pages where you want to display both the search form and the search results.

Again, it is highly recommended that you make changes to a test page first. Note that you can have both the search form and search results display on the same test page if you like.

Adding shortcodes would depend largely on your WordPress theme. Some themes display shortcodes seamlessly, while others require more customizations. If you are not familiar with how to update your WordPress site, please consult with your website developer before making any changes.

Basically, while editing a page, position your cursor where you want to insert. Then click on the plus (+) button to add a block, and select Shortcode among the options. Next paste the shortcode text on the field provided.

In this example, we want to display the search form on the main homepage, so we go there and add the shortcode to the space below the headline.

Then we go to the page where we want to display the search results, and add the corresponding short code there.

Once done, click Update and/or Publish on both pages.

4.5. Test Booking

Now we are ready to perform a test booking. Visit the test page where you added the search form and select a check-in and check-out date.

You will see the list of rooms, click on Show Rates.

This will display the different Rate Plans for that room. Choose one, and select Book. Note that you can change the rates and rate plans by going to 1Day.io > Rates.

Finally, complete the billing details and choose a payment method. Then click Place Order.

After a few seconds, you will see the new booking appear on your 1Day calendar.

Once you've confirmed that everything is working, you can update the payment methods in WooCommerce, and add the shortcodes to the actual customer facing pages (not just the test pages). And then you can start accepting direct bookings.

And that is how you setup the 1Day booking engine. We have a lot of new features in the works and we're excited to hear what you think of the plugin. Please send us a message by clicking on the chat button on the lower right of this page.

Hope to see you there!

Posted by 
Ian
If you would like to be notified of other posts, please subscribe.
Keep it Simpler.