17,129
edits
Changes
Jump to navigation
Jump to search
To set up or change your booking page go in the [[Category:How to menu to SETTINGS -> BOOKING PAGE in the left menu. ]][[Category:Getting_Started]][[Category:Widgets|WidgetsBooking_Engine]] connect your website to your booking <div class="heading">Booking Engine</div> This page.is about the menu {{#fas:cog}} (SETTINGS) > BOOKING ENGINE
Your <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 page can be fully customised: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".
*FontsThe booking page is fully customizable and you have the option to set up multiple layouts if required.
*Information textWe 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 guestsCurrent default: [[File:layout7.png|thumb|none|300px|<p style="font-weight: bold; text-align: center">Layout 7</p>]]
It is easy to add custom CSS to <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 Beds24 booking page to change itset up process.'''s style.
no edit summary
__TOC__
=How to install the booking engine=
The booking engine allows to collect commission free direct bookings.
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>
=Booking Widgets=One of the many things that can be done with CSS is adding a background image. Because the booking page is a secure page, your background image needs Our widget designer allows you 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 create your own hosting for the image file. A google search for "image host with ssl" should provide lots of possibilities. Once custom widgets which you have the image securely hosted , can 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 pageweb site. body {background-image:url('https://www.thehostwebsite.com/dir/to/your/image.gif');}
