To complete the look and feel of our 5 Star Hotel demo, use the following settings outlined in this article. While we'll only cover settings we've used, the HBook plugin is very flexible, and many more options exist to tailor the booking experience to your unique business.

For further customization, the official HBook documentation portal can be found here.


STEP 1: SEASONS - Create at least one season. Reservations only work when booked within a season. In our demo we'd created one "5 Year Season", but practically you'd break up a year by creating "High" & "Off Peak" seasons, or a similar variant.



STEP 2: BOOKING RULES - In our demo, we'd created one "Advanced Booking Rule". See the image below to review our settings:



STEP 3: RATES - The rates we'd used were very simple, and in the image below notice how we'd chosen "All" for Seasons, though the "Amount" differed. You'll need to add each of these settings individually:



STEP 4: EXTRA SERVICES - While we recommend visiting the plugin documentation for detailed explanations of each setting, the image below showcases how we setup the demo settings. Note the simple design of our Packages implementation, and the inherent limitations our solution for Packages brings:





STEP 5: FEES - We'd only created one fee, which was for mandatory cleaning. There's some flexibility with fees, including percentage-based and limited by accommodation. See the image below to view our settings in the demo:



STEP 6: FORMS - Due to the number of settings, we've opted to showcase our demo settings in the image below. Please bear with us as the image is rather tall. Note that for "Customer Details Form" section, you can add fields, and choosing a "Field Type" will change available settings for that field:



STEP 7: PAYMENT - The image below showcases our settings in the demo. Beyond those, we'd opted to activate PayPal & Stripe. You'll need to supply your credentials for those payment gateways. Note that you can also choose to offer offline payments:




STEP 8: EMAILS - We'd used 3 email templates, which were created by default by HBook. We'd found that tweaking some options were ideal for our purposes. We've outlined our settings below. Pro Tip: To ensure delivery & not ending up in a spam folder, choose TEXT instead of HTML.


Name: Admin notification

Addresses: Reply-to: Divi 5 Star Hotel <youremail@domain.com>

Subject: New reservation

Format: TEXT

Send on: New reservation

Message:

New reservation:

- Received on: [resa_received_on]

- Customer first name: [customer_first_name]

- Customer last name: [customer_last_name]

- Customer email: [customer_email]

- Customer phone: [customer_phone]

- Check-in date: [resa_check_in]

- Check-out date: [resa_check_out]

- Number of adults: [resa_adults]

- Number of children: [resa_children]

- Accommodation: [resa_accommodation]

- # of nights: [resa_number_of_nights]

- Optional extras: [resa_extras]

- Deposit: [resa_deposit]

- Price: [resa_price]

- Paid: [resa_paid]

- Remaining balance: [resa_remaining_balance]


- Interests: [resa_netflix__chill_2]  [resa_romantic_getaway_2]  [resa_active_adventure_2]

- Additional comments for host: [resa_additional_comments_for_host]


Name: Customer notification

Addresses: To: [customer_email]; Reply-to: Divi 5 Star Hotel <youremail@domain.com>

Subject: Your reservation

Format: TEXT

Send on: Your reservation

Message:

Hello [customer_first_name],


Thank you for choosing to stay with us! We are pleased to confirm your reservation as follows:


Check-in date: [resa_check_in]

Check-out date: [resa_check_out]

Number of adults: [resa_adults]

Number of children: [resa_children]

Accommodation: [resa_accommodation]

Price: [resa_price]


See you soon!


Name: Reservation confirmation

Addresses: To: [customer_email]; Reply-to: Divi 5 Star Hotel <youremail@domain.com>

Subject: Your reservation

Format: TEXT

Send on: Reservation confirmation

Message:

Hello [customer_first_name],


Thank you for choosing to stay with us! We are pleased to confirm your reservation as follows:


Check-in date: [resa_check_in]

Check-out date: [resa_check_out]

Number of adults: [resa_adults]

Number of children: [resa_children]

Accommodation: [resa_accommodation]

Price: [resa_price]


See you soon!


STEP 9: APPEARANCE - Instead of an image, we'll include the settings we used for this section in text, so you can copy-and-paste our settings. We'll go down the list from top-to-bottom:


General settings

Search form maximum width: [blank]

Accommodation selection form maximum width: [blank]

Details form maximum width: [blank]

Forms position: Left

Minimum width required for displaying a horizontal search form: 800

Minimum width required for displaying columns in the details form: 500

Page padding top: 150


Buttons appearance

Buttons style: Custom

Background color: #15bf86

Background color on hover: #1599c1

Text color: White

Border radius: 0

Side padding: 20

Height padding: 10


Inputs and selects appearance

Inputs and selects style: Custom

Borders color: #858585

Borders color when active: #15bf86

Borders width: 2

Borders radius: 0

Height: 40

Side padding: 20

Height padding: [blank]


Calendars appearance

Calendar background: #ffffff

Available day background: #ffffff

Not selectable day background: #dddddd

Not selectable day number: #7c7c7c

Selected day background: #eeee22

Occupied day background: #dd8585

Buttons background: #333333

Disabled buttons background: #aaaaaa

Button arrows: #ffffff

Calendar inner borders: #cccccc

Add a shadow to calendars: Yes


Custom CSS

Custom CSS for the front-end pages: [blank]

Custom CSS for the admin pages: [blank]


STEP 10: MISCELLANEOUS - Check out the image below for our settings used for Miscellaneous in the demo:




STEP 11: TEXT - There are simply too many fields in this section for us to list our settings for each field. Instead, we'll list the most common settings we used in the demo, and tips on how to optimize your text:

a) For the first section "Search form text" (and other front-end text), we recommend capitalizing each word you feel requires special attention. It appears more professional in our eyes, and helps guests not skip over important messages. For instance, "Check-in" becomes "Check-In".

b) We recommend changing "Child" & "Children" to "Youth", as it fits in all instances of the booking form. The best way to make this change is to press Ctrl+F (PC) Cmd+F (MAC), and search for "child" & "children", replacing each instance with "Youth" until you've reached the end of the page. This strategy can be used for other text as well.

c) In instances like buttons, such as the "Select accommodation button", we've set the text to all caps: "SELECT THIS ACCOMMODATION".

d) For the "Book now area", we've set the "Terms and conditions text" to: I have read and I accept the <a href="https://yourdomainaddress.com/terms-conditions/" target="_blank">Terms & Privacy</a> agreement for this booking.

e) These text fields accept basic HTML, so you can add styling & links as you see fit.

f) As laborious as it is, you only need to fill out this section once!


Phew! That covers all the settings we'd used in the demo. Other sections in the Admin Dashboard created by HBook such as "Reservations" & "Accommodation" needn't be touched on in this article, as the accommodations were imported along with the child theme upon installation, and no reservations have been created as of yet.


With these settings implemented, you should see your front-end booking forms look identical to those in the demo. If not, feel free to create a support ticket.


***Assistance passed recreating the demo styling is considered beyond-scope, and will cost extra. If beyond-scope support is requested, we'll quote you the price for this service.***