Booking Engine - Adding a booking widget you your website

Modified on Tue, 24 Sep at 10:58 AM

If you want to add a booking widget you your website, you can generate one in Godo under  Settings > Booking Engine > Booking Widgets. After you are done styling and editing your widget, you need to click the button "Get HTML Code". In the field below you will get a code, similar to this: 


<!-- bookingWidget requires jQuery and jQueryUI -->

<!-- Include the following line ONCE ONLY on the page, preferably in the document head -->

<script src='https://media.xmlcal.com/widget/1.00/js/bookWidget.min.js'></script>


<!-- Place this div on your page where you want the widget to show -->

<div id='bookWidget-41052-74220-0-1614769304'> </div>


<!-- The following will initialize the widget in the above div -->

<script>

jQuery(document).ready(function() {

    jQuery('#bookWidget-41052-74220-0-1614769304').bookWidget({

        propid:74220,

        formAction:'https://property.godo.is/booking.php',
        redirect:'https://your page containing the iframe',

        widgetLang:'en',

        widgetType:'BookingBox'

    });

});

</script>

*the yellow marked parameter is only used if you are using an embedded iframe


What you need to do

  1. Add required libraries into the <head> of the webpage. The codes below were taken from here: https://developers.google.com/speed/libraries

    JQuery - Only add this library if JQuery is not yet included in your theme. Having it included more than once will cause an error.
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    JQueryUI
    <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>
  2. Take the codes that are enclosed in <script> tags from the generated widget code and place them also in the <head> of the webpage.
  3. Take the <div id="bookWidget-123456..."> and place it inside of the <body> tag of the webpage.
  4. if you are using the iframe: make sure the redirect parameter (the one marked yellow) contains the url of the page that contains your booking page iframe. If you are using just the standalone booking page, you don't need to use the redirect parameter at all.



                                                                                    Next category


Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article