The responsive booking page is the current, mobile-friendly version of the Beds24 booking page. Its modular design lets you control the layout fully, and you add it to your website with a booking widget or an iframe.
Table of Contents
- How the responsive booking page works
- Add the booking page to your website
- Languages and currencies
- Additional options
- Developer options
- Multiple properties
- Change from the adaptive to the responsive booking page
How the responsive booking page works
The page is built from modules, such as picture sliders, descriptions, availability calendars and price tables, which you add, remove and arrange. Beds24 provides templates with preset modules as a starting point, and you can save up to six layouts to show different looks on different websites. You set this up in Settings > Booking Engine > Property Booking Page > Layout. For step-by-step instructions, see Customise the responsive booking page layout.
- Pictures: upload them in Settings > Booking Engine > Pictures and assign them to the property, rooms or offers. See Pictures.
- Wizards: the booking engine wizard guides you through the options for your booking engine, and the booking page setup wizard guides you through customising your booking page.
- General settings that apply to all layouts, such as the minimum and maximum number of guests and nights and the type of price display, are in Settings > Booking Engine > Property Booking Page.
Add the booking page to your website
- Choose from a range of widgets in Settings > Booking Engine > Booking Widgets. See How to use Widgets.
- To embed the booking page in your website, generate the code in Settings > Booking Engine > Booking Widgets > Iframe Generator. Click the context help (? icons) for information on the iframe settings.
Languages and currencies
-
Currency converter: let guests see your prices in other currencies. To open the page with a conversion, add for example
&cur=EURor&cur=USDto the URL. With a WordPress shortcode, addcur=EURorcur=USDto the shortcode. - Multiple languages: set your default language and activate more languages. Enter your descriptive texts in every language you use. On a multilingual website, you can embed the booking page with a different default language for each language version. See Multilingual Booking Page.
For both settings, see Languages.
Additional options
Unless stated otherwise, these settings are in Settings > Booking Engine > Property Booking Page.
Single or multiple room bookings
Let guests book one room or unit, several, or choose themselves:
| Setting | Booking strip shows |
|---|---|
| Guest Can choose | A Book Multiple button at the top right |
| Enable | Check in, Check out and Nights |
| Disable | Check in, Check out, Nights and Guests |
Enquiries and requests
If you use Fixed Prices, you can let guests send an enquiry when you have availability but no price is found. See Allow Enquiries. To accept only requests instead of confirmed bookings, go to Settings > Booking Engine and set Booking Type to Request.
Price multiplier
Adjust the prices on your booking page by entering * followed by a multiplier:
-
*1.23raises the price by 23%. -
*0.85lowers the price to 85% of the normal price.
Add a logo
Steps:
- Go to Settings > Booking Engine > Pictures, choose your logo file and upload it.
- Scroll to the picture, click Manage and copy the URL at the bottom of the page.
- Go to Settings > Booking Engine > Property Booking Page > Content, Property Description 1, and click Edit.
- Click the Image icon, paste the URL, add a description if needed, resize the image and click OK. Position it with the alignment options (centre, left or right).
- Click Save.
Expected result: your logo shows at the top of the booking page.
Messages and warnings
Add messages to the booking page, and change the default warnings shown when a room isn't available, in Settings > Booking Engine > Property Booking Page > Content.
Note: the minimum stay warning shows at offer level. If it doesn't show, all your offers are set to Only if available. Set at least one offer to Always, and the warning displays when the searched dates aren't available.
Spam protection
In Settings > Booking Engine > Property Booking Page > Behaviour:
- Set On Screen Captcha code to Must be Entered, and guests must enter a captcha code to continue the booking.
- Set Code Sent to Email Address to Must be Entered, and guests can only continue after entering a code sent to them automatically.
Review widget
Tripadvisor and many other review services provide a code snippet for reviews.
- Copy the widget code from your review service account.
- In an editable field on the booking page, click Edit, then Source in the editor, and paste the code into the source code.
- Make sure the module you use is activated.
Triptease price comparison
To use the Triptease price comparison widget, you need a Triptease account.
Cookie consent
Generate a cookie consent script with a tool such as Cookie Consent by Insites, then add it in Settings > Booking Engine > Property Booking Page > Developer > Advanced HTML Settings.
Google Font
See Google Font on Booking Page.
Chat
Chat systems provide a script you add to Insert in HTML <HEAD>:
- for a property booking page: Settings > Booking Engine > Property Booking Page > Developer
- for the multi property booking page: Settings > Booking Engine > Multi Booking Page > Developer
Accessibility
The booking page has basic optimisation for barrier-free access. For the colours and headings to add, see Make your booking page accessible.
Developer options
In Settings > Booking Engine > Property Booking Page > Developer you can:
- apply your own CSS styles
- add scripts, for example for Google Analytics
- replace any fixed text on the booking page
Stripe and Paymill insert their own payment buttons, which you can't change. To change the text of the other payment buttons, add the matching snippet to Advanced HTML Settings:
Custom Instruction:
<script type="text/javascript">
$(document).ready(function() { $("#buttoncustominstruction").val("the new text"); });
</script>Authorize.Net:
<script type="text/javascript">
$(document).ready(function() { $("#buttonauthorizenet").val("the new text"); });
</script>PayPal:
<script type="text/javascript">
$(document).ready(function() { $("#buttonpaypal").val("the new text"); });
</script>For more developer options, see How to use Developers options.
Multiple properties
If you have several properties, the multi property booking page shows all properties in your account and links to each property booking page, where the booking is made. See How to setup Multiple Properties.
Change from the adaptive to the responsive booking page
Steps:
- Go to Settings > Booking Engine and set Booking Page Version to Responsive. This activates Layout 1.
- Assign your pictures again: go to Settings > Booking Engine > Pictures, set the selector to the room, choose Offer 1 and activate the pictures you want to show.
- If you use more than one offer, repeat step 2 for each offer.
Expected result: your live booking page uses the responsive design.
Tip: to preview the responsive design without changing your live website, add &version=3 to your booking page URL. Add a layout number to see other layouts, for example &version=3&layout=2 shows layout 2.
Important notes
- Setting Booking Page Version to Responsive changes your live website to the new design straight away.
- You can test on a copy of your property instead. Deactivate all channel manager connections in the copy. The normal monthly fee applies to the extra rooms, so you may want to reduce the number of rooms in the copy. When you finish, apply the changes to your real property with User icon > Account Management > Manage Account > Clone Property Settings.