Customise booking widgets with CSS and JavaScript

Change booking widgets beyond what the widget designer offers by editing the widget code, adding CSS to your website or hosting the widget scripts yourself. Each task below starts from a widget you have generated in Settings > Booking Engine > Booking Widgets.

Required skills: HTML and CSS. Hosting the scripts yourself also needs access to your web server.

Table of Contents

  1. Skip to the checkout page
  2. Change the text on widget labels
  3. Hide dates outside the month in the availability calendar
  4. Adjust widgets for right-to-left languages
  5. Load jQuery UI yourself

Skip to the checkout page

Send guests from the widget straight to checkout for one room, without the booking page in between.

  1. Add this parameter inside the bookWidget({ ... }) block of the widget code: 
    customParameter:'br1-xxxx=book',
  2. Replace xxxx with the ID of the room.

Expected result: when the guest clicks the widget button, the checkout page opens with that room selected.

Change the text on widget labels

The label texts live in the widget's JavaScript file. To change them, host your own edited copy of that file.

  1. Generate the widget and click Get Code.
  2. Download the widget JavaScript file linked in the code: bookWidget.min.js.
  3. Search the file for the label you want to change, edit the text and save the file.
  4. Upload the edited file to your own web server.
  5. In the widget code, change the link to the JavaScript file so it points to your copy.
  6. Paste the updated widget code into the HTML of your website.

Expected result: the widget shows your label texts.

Note: your copy doesn't receive updates Beds24 makes to the original file.

Hide dates outside the month in the availability calendar

Add this CSS to your website's style sheet:

.ui-datepicker { display: none; }

Expected result: the availability calendar widget shows only the dates of each displayed month.

Adjust widgets for right-to-left languages

For languages such as Arabic and Hebrew, adjust the widget alignment with CSS. For example, add this to your website's style sheet for the booking box:

.book-widget label { float: right !important; }
.book-container .book-row .book-col-offset-5 { margin-left: 0; }

Expected result: the booking box labels and fields line up from the right.

Load jQuery UI yourself

The widget loads jQuery UI for its datepicker automatically. Load it yourself instead if the automatic copy conflicts with scripts on your page, or if you must host the files on your own server to comply with GDPR.

  1. If your page doesn't load jQuery yet, add it: 
    <script
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
  2. Add jQuery UI after the jQuery script: 
    <link rel="stylesheet"
  href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script
  src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
    To host the files yourself, download them to your server and change the links to point to your copies. To keep loading sizes down, you only need the jQuery UI datepicker modules.
  3. Add this parameter to the widget code so the widget doesn't load its own copy: 
    loadJQueryUI: false,

Expected result: the datepicker opens using your copy of jQuery UI, and no request goes to an external server for it if you host the files yourself.

Related Articles

Was this article helpful?
0 out of 0 found this helpful

How to Contact us :