Difference between revisions of "Category:Booking Page"

From Beds24 Wiki
Jump to navigation Jump to search
 
(38 intermediate revisions by 3 users not shown)
Line 1: Line 1:
To set up or change your booking page go in the to menu to SETTINGS -> BOOKING PAGE in the left menu.  [[Widgets|:Category:Widgets|Widgets]] connect your website to your booking page.
+
[[Category:How to]]
 +
[[Category:Getting_Started]]
 +
[[Category:Booking_Engine]]
 +
<div class="heading">Booking Engine</div>
 +
This page is about the menu {{#fas:cog}} (SETTINGS) > BOOKING ENGINE
  
 +
__TOC__
 +
=How to install the booking engine=
 +
The booking engine allows to collect commission free direct bookings.
  
Your booking page can be fully customised:
+
<span class="" style="color: #f3e504; font-size: 250%;" >{{#fas:lightbulb}} </span>  <span style="font-weight: bold;" >Tip</span>  This [https://beds24.com/wizard/wizard4.php wizard] guides you though the options you can set for your booking engine.
  
*Pictures/logo
+
=The Booking Page=
 +
The booking page is were guests make their booking. The booking page can be embedded into any web site via a code snippet we provide.
  
*Colours
+
<span style="color: #f3e504; font-size: 250%;" >{{#fas:lightbulb}} </span> The current version of the booking page is "Responsive". Make sure both "Booking Page Version" and "Check-out Page Version" are set to "Responsive".
  
*Fonts
+
The booking page is fully customizable and you have the option to set up multiple layouts if required.
  
*Information text
+
We provide 7 layouts which you can customize further.  The layout which is set as "Default" will be used by default and if the Facebook App is used on Facebook.
  
*Requested information from guests
+
Current default:
 +
[[File:layout7.png|thumb|none|300px|<p style="font-weight: bold; text-align: center">Layout 7</p>]]
  
 +
More layouts to choose from:
 +
<div><ul>
 +
<li style="display: inline-block; vertical-align: top;"> [[File:layout1.png|thumb|none|160px|<p style="font-weight: bold; text-align: center">Layout 1</p>]] </li>
 +
<li style="display: inline-block; vertical-align: top;"> [[File:layout2.png|thumb|none|160px|<p style="font-weight: bold; text-align: center">Layout 2</p>]] </li>
 +
<li style="display: inline-block; vertical-align: top;"> [[File:layout3.png|thumb|none|160px|<p style="font-weight: bold; text-align: center">Layout 3</p>]] </li>
 +
<li style="display: inline-block; vertical-align: top;"> [[File:layout4.png|thumb|none|160px|<p style="font-weight: bold; text-align: center">Layout 4</p>]] </li>
 +
<li style="display: inline-block;vertical-align: top;"> [[File:layout5.png|thumb|none|160px|<p style="font-weight: bold; text-align: center">Layout 5</p>]] </li>
 +
<li style="display: inline-block; vertical-align: top;"> [[File:layout6.png|thumb|none|160px|<p style="font-weight: bold; text-align: center">Layout 6</p>]] </li>
 +
<li style="display: inline-block; vertical-align: top;"> [[File:layout7.png|thumb|none|160px|<p style="font-weight: bold; text-align: center">Layout 7</p>]] </li>
 +
</ul></div>
  
It is easy to add custom CSS to the Beds24 booking page to change it's style.
+
<span class="" style="color: #f3e504; font-size: 250%;" >{{#fas:lightbulb}} </span>  <span style="font-weight: bold;" >Tip</span>  We recommend you let our  [https://beds24.com/wizard/wizard2.php wizard]  guide you through the set up process.'''
  
 
+
=Booking Widgets=
One of the many things that can be done with CSS is adding a background image.
+
Our widget designer allows you to create your own custom widgets which you can add to your web site.
 
 
Because the booking page is a secure page, your background image needs to be hosted on a secure website otherwise the browser may report that parts of the page are not secure. This simply means hosting it anywhere so it is publicly available using https protocol. You will need to provide your own hosting for the image file.
 
 
 
 
 
A google search for "image host with ssl" should provide lots of possibilities.
 
 
 
Once you have the image securely hosted , add the following to the Property Custom CSS setting on the STYLE settings page. Change the website, directory and filename to point to your image file and it will appear as the background of your booking page.
 
 
 
body {
 
background-image:url('https://www.thehostwebsite.com/dir/to/your/image.gif');
 
}
 

Latest revision as of 10:01, 3 December 2020

Booking Engine
This page is about the menu  (SETTINGS) > BOOKING ENGINE

1 How to install the booking engine

The booking engine allows to collect commission free direct bookings.

Tip This wizard guides you though the options you can set for your booking engine.

2 The Booking Page

The booking page is were guests make their booking. The booking page can be embedded into any web site via a code snippet we provide.

The current version of the booking page is "Responsive". Make sure both "Booking Page Version" and "Check-out Page Version" are set to "Responsive".

The booking page is fully customizable and you have the option to set up multiple layouts if required.

We provide 7 layouts which you can customize further. The layout which is set as "Default" will be used by default and if the Facebook App is used on Facebook.

Current default:

Layout 7

More layouts to choose from:

  • Layout 1

  • Layout 2

  • Layout 3

  • Layout 4

  • Layout 5

  • Layout 6

  • Layout 7

Tip We recommend you let our wizard guide you through the set up process.

3 Booking Widgets

Our widget designer allows you to create your own custom widgets which you can add to your web site.