Spider-Booking Website Integration - HTML Integration of Widgets

Besides the integration via link (href=) on the page, Spider-Booking also provides a widget through which the visitor can immediately define a date and the details of their search on the website. The widget must be integrated via the HTML code of the webpage and can be customized to your needs.

The default widget looks like this:

Here are a few examples of how the widget integration looks implemented:

Horizontals Widget: https://wanderlust-guesthouse.ch/

Verticals Widget: https://wald-hotel-sellin.de/ 

Each house has a specific link into the widget documentation that can be emailed. 

To get the specific link for your house, go to Interfaces >> WBE >> Spider-Booking 4 in the Hotel-Spider Extranet under the tab "General" >> "Widget documentation" - enter the e-mail address and click on "Send documentation".

https://extranet.hotel-spider.ch/hotel/#/bookingchannels/387

 The link is always https://wbe-static.hotel-spider.com/widget-doc/index.html?hotelId=HOTEL_ID

The widget consists of a code element that must be placed in the HEADER of the page and a code part that must be added in the BODY of the page (where the widget will be displayed on the page). 

All the details and full code are explained in your account-specific documentation. At the top of the documentation, you will also find a complete example of how to integrate the widget on a blank HTML page:

jQuery

Note: The jQuery library is required for the Hotel-Spider widget to work. If it already exists on your site, you don't need to include it again (just ignore the first script element above). Any version above 1.12.4 should be compatible, but not all versions have been tested.

You can also easily adapt the jQuery version and replace it with the latest version you need. 
https://code.jquery.com/

You have a wide range of variables to integrate the widget optimally on your page:  

Default form: 

Vertical form:

 Deactivate fields:

You can limit the input fields to the date only.

Specific Language:

If the language should always be fixed and not browser dependent, this parameter can also be fixed. 

Iframe mode:

By default, the widget opens the booking engine in a separate window with our URL. If you want to prevent the booker from leaving your website, you can embed the SB4 in Iframe mode: 

Furthermore, there are options to customize the date format, to set a language that is not yet supported and to set the preselected person selection.

Widget integration is easy to implement for a web professional, but can be done by non-professionals as well. It is very important to follow all details of the documentation. If you have any questions, please contact our support with a link to the website where you have already integrated the widget, along with your specific questions.