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.***