Add a booking box, booking strip or availability calendar to your own website with the widget designer, so guests can pick their dates and go straight to your Beds24 booking page. You design the widget in Beds24, copy the code it generates and paste it into your website's HTML.
Quick Guide
- Go to Settings > Booking Engine > Booking Widgets.
- Choose a widget and adjust its settings.
- Click Refresh to preview it, then click Get Code.
- Paste the code into the HTML of the page where the widget should appear.
Table of Contents
- Add a widget to your website
- Add more than one widget to the same page
- Troubleshooting
- Important notes
Add a widget to your website
The widget designer builds the widget code for you. You only need to be able to paste HTML into your website.
Prerequisites: access to edit the HTML of your website, or a web designer who can do it for you. Your page must use UTF-8 character encoding.
Steps:
- Go to Settings > Booking Engine > Booking Widgets.
- Choose the widget you want to create.
- Adjust the settings you want to change.
- Click Refresh to see a preview.
- Click Get Code and copy the code snippet.
- Open the page on your website where the widget should appear and paste the code into its HTML. If you are not sure how, check the help for your website builder or CMS on adding custom HTML.
Expected result: the widget appears on your page. When a guest selects dates and clicks the button, your Beds24 booking page opens with those dates.
Note: if you use the Beds24 WordPress plugin, follow the WordPress plugin instructions instead. To open the booking page inside your own website and pass on the guest's dates and number of guests, set it up as described in Embed your booking page in an iframe.
Add more than one widget to the same page
The first part of the widget code loads the scripts every widget needs, so paste it only once per page.
- Paste the complete code of the first widget.
- For each additional widget, paste its code starting from this line:
<!-- Place this div on your page where you want the widget to show -->
Expected result: all widgets load on the same page without conflicts.
Troubleshooting
| Issue / Error | Likely cause | Resolution |
|---|---|---|
| The datepicker does not open, or other scripts on the page stop working. | The widget loads its own copy of jQuery UI, which can conflict with a copy already on your page. | Load jQuery UI yourself and stop the widget from loading it. See Load jQuery UI yourself. |
Console error bookWidget is not a function. |
Your page does not accept the name jQuery in scripts. |
In the widget code, replace every jQuery with $. For example, jQuery(document).ready(function() { becomes $(document).ready(function() {. |
| The widget does not work on a Wix site. | Wix does not support jQuery the way most website builders do. | Ask Wix whether you can add jQuery to your page. If you can't, use a booking button, links or the legacy widgets. |
| A second widget on the page does not show, or breaks the first one. | The shared first part of the widget code was pasted twice. | Paste the second widget's code only from the <!-- Place this div ... --> line. See Add more than one widget to the same page. |
| The widget shows garbled characters or does not load. | The page does not use UTF-8 character encoding. | Set your page encoding to UTF-8, or ask your web designer to. |
| The booking page opens without the dates or number of guests the guest selected. | The booking page is embedded on your site in a way that does not receive the widget's selection. | Follow Embed your booking page in an iframe to pass the selection on. |
| Dates more than a year ahead show as available in the availability calendar, but guests can't book them. | The availability calendar only processes data one year in advance. | This is expected behaviour. No fix is needed. |
Important notes
- The datepicker in the widgets shows dates up to one year in advance.
- The widgets need jQuery on your page. If your website can't use jQuery, use a booking button, links or the legacy widgets.
- If you must comply with GDPR, you may need to host the jQuery UI files on your own server. See Load jQuery UI yourself.
- To change how a widget looks or behaves beyond the widget designer, see Booking widget parameters.