Adaptive Booking Page (Depreciated)

The adaptive booking page is the older version of the Beds24 booking page and is deprecated. Switch to the responsive booking page for the latest, mobile-friendly version: go to Settings > Booking Engine and set Booking Page Version and Check-out Page Version to Responsive.

If you still use the adaptive booking page, the settings below apply. Each setting has context help to guide you.

Table of Contents

1. Choose the general layout
2. Customise design, colours and fonts
3. Add content
4. Further options
5. Change the default text
6. Hide Book Multiple
7. Change the hover text
8. Change the CSS

Choose the general layout

In Settings > Booking Engine > Property Booking Page > Layout, choose to show either a room availability calendar or a number of price columns.

Customise design, colours and fonts

Set the design, colours and fonts in Settings > Booking Engine > Property Booking Page > Style. Watch the video on styling the booking page.

Add content

The numbers refer to the areas in the picture below.

• Room pictures and information (5): add them in Settings > Booking Engine > Property Booking Page > Content. Upload the pictures first in Settings > Booking Engine > Pictures.
• Custom top (2) and bottom (3): for example your logo at the top, and contact information, directions or a link to your terms and conditions at the bottom. Add them in Settings > Booking Engine > Property Booking Page > Content.
• Marketing column (4): add it to show discounts.

Further options

Change the default text

Replace any default text on the booking page in Settings > Booking Engine > Property Booking Page > Developer > Custom Text.

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 Settings > Booking Engine > Property Booking Page > Developer > 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>

Hide Book Multiple

Use the selector in Settings > Booking Engine > Property Booking Page > Layout.

Change the hover text

• To hide the number of rooms or units left, add this to Settings > Booking Engine > Property Booking Page > Developer > Custom CSS:

  .ptdaynumavail {display:none;}

• To turn off the hover text, add this script to Settings > Booking Engine > Property Booking Page > Developer > Advanced HTML Settings:

  <script>
  $(document).ready(function() {
    var $title = $("td,div,span");
    $.each($title, function(index, value) {
      $(this).tooltip({
        disabled:true
      });
    });
  });
  </script>

Change the CSS

Web designers use CSS to define the look and formatting of a page. For common adjustments and where to paste the code, see How to use Custom CSS.

Related Articles

• Responsive Booking Page
• How to use Custom CSS
• Pictures