Explore

Spider-Booking 4 WBE widget

Introduction

Spider-Booking 4 WBE widget is a powerful widget to enhance your Hotel Spider WBE with easy initialization

Easy installation:

1/ Add the stylesheet below before </head> end

  • <link rel="stylesheet" href="https://wbe-static.hotel-spider.com/widget/spiderBooking4.css">

2/ Add scripts below before </body> end

  • <script src="https://code.jquery.com/jquery-1.12.4.min.js"
        integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>

  • <script src="https://wbe-static.hotel-spider.com/widget/spiderBooking4.js"></script>

The integrity and crossorigin attributes are used for Subresource Integrity (SRI) checking.This allows browsers to ensure that resources hosted on third-party servers have not been tampered with. Use of SRI is recommended as a best-practice, whenever libraries are loaded from a third-party source.
Read more at srihash.org

Note: The jQuery library is needed for Hotel-Spider's widget to run. If it is already present on your website,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 of the versions have been tested.

3/ Identify the HTML element where you want to have the widget

<div id="spiderBooking"></div>

4/ Instanciate the widget in your container on document load

$(function() {
  $('#spiderBooking').SpiderBooking4({
    hotelId: '%docHotelId%'
  });
});

Complete example

Complete HTML document:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Spider-Booking 4 Widget</title>
    <link rel="stylesheet" href="https://wbe-static.hotel-spider.com/widget/spiderBooking4.css">
</head>

<body>
    <div id="spiderBooking"></div>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"
	        integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
    <script src="https://wbe-static.hotel-spider.com/widget/spiderBooking4.js"></script>
    <script>
        $(function() {
            $('#spiderBooking').SpiderBooking4({
                hotelId: '%docHotelId%'
            });
        });
    </script>
</body>

</html>

Demo

Default form

Displays default form

Usage:

$('#spiderBooking').SpiderBooking4({
  hotelId: '%docHotelId%'
});

Vertical form

Displays vertical form

Usage:

$('#spiderBookingVertical').SpiderBooking4({
  hotelId: '%docHotelId%',
  template: 'vertical',
});

Homepage form

Displays bigger form with bigger inputs

Usage:

$('#spiderBookingHomepage').SpiderBooking4({
  hotelId: '%docHotelId%',
  template: 'homepage',
});

Disable guests fields

Displays only date field

Usage:

$('#spiderBookingDisableFields').SpiderBooking4({
  hotelId: '%docHotelId%',
  displayNbPersons: false
});

Specify lang

By default the form uses html.lang attribute. You can define one of de, en, fr force the widget language.

Usage:

$('#spiderBookingSpecifyLang').SpiderBooking4({
  hotelId: '%docHotelId%',
  lang: 'de'
});

Advanced features

Iframe mode

Displays WBE in iframe instead of redirecting

Options:

You can define special params for the iframe modal:

modalParams: {
  ...
}

Modal options

Option

Type

Default value

Description

scrollElement

DOM Node

document.body

Main element which is scrolled on the page. It will be styled with overflow: hidden when modal opened.

scrollbarPaddingSelectors

Array of selectors

['body']

Elements which are glitched when overflow: hidden is added. Padding with current scroll-bar width will be added for them.

Usage:

$('#spiderBookingIframe').SpiderBooking4({
  hotelId: '%docHotelId%',
  type: 'iframe',
  modalParams: {
    scrollbarPaddingSelectors: ['body', 'header']
  }
});

Specify guests fields

Customize guests inputs

Options:

To use custom field options you can define displayNbPersons as object with following keys: adults, children, infants

Each key can contain the following values:

Option

Type

Default value

Description

display

Boolean

true

Define whether to display the field. This option doesn't work for adults field. It will always be visible if option displayNbPersons is defined with values true or {...object}

initial

Number

Different in dependence on field

  • adults: 1
  • children: 0
  • infants: 0

Initial value for the field

min

Number

Different in dependence on field

  • adults: 1
  • children: 0
  • infants: 0

Min value for the field

max

Number

Different in dependence on field

  • adults: 8
  • children: 4
  • infants: 4

Max value for the field

Usage:

$('#spiderBookingCustomFields').SpiderBooking4({
  hotelId: '%docHotelId%',
  displayNbPersons: {
    adults: {
      initial: 2
    },
    children: {
      min: 2,
      initial: 3,
      max: 6,
    },
    infants: {
      display: false
    }
  }
});

Target a single room type

Redirects the user to a specific room if it's available. When unavailable on the selected dates, the default results page is shown.

Usage:

$('#spiderBookingIframe').SpiderBooking4({
  hotelId: '%docHotelId%',
  roomId: 'roomId',
});

Warning: Please be careful to correctly set the guest fields boundaries according to the configuration of the specific room type.

Localization

Define your own localization to use with form

Options:

To use custom locale you have to define option locale with lang key.

locale: {
  it: {
    ...
  }
}

Then, if you need to use only defined locale, you can specify lang option.

lang: it

Otherwise the widget will use lang attribute of the html tag or 'en' if it is not defined.

The object can contain following values: submitButton, fields, datepicker

Option

Type

Default value

Description

submitButton

String

Search

Submit button translation

fields

Object

{ adults: {...}, children: {...}, infants: {...} }

Guests fields translation (see below)

datepicker

object

{label: '', weekdays: [], months: [], firstDayOfWeek: num, ordinal: func, rangeSeparator: ''}

Datepicker translation (see below)

Fields options

fields is an object with following keys: adults, children, infants

Each key can contain the following values:

Option

Type

Default value

Description

label

String

Different in dependence on field

  • adults: 'Adults'
  • children: 'Children'
  • infants: 'Infants'

Define label translation for each field

values

Object

 
{
  singular: 'Guest',
  plural: 'Guests'
}

Define Singular and Plural translation for each field's options list

Datepicker options

Option

Type

Default value

Description

label

String

'Check-in - Check-out'

Define label translation for the datepicker

weekdays

Object

 
{
  shorthand: [
    'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'
    ],
  longhand: [
    'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'
    ],
}

Define short and long names for days of the week. Values should always start from Sunday

months

Object

 
{
  shorthand: [
    'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
    ],
  longhand: [
    'January', 'February', 'March', 'April', 'May', 'June',
    'July', 'August', 'September', 'October', 'November', 'December'
    ],
}

Define short and long names for months. Values should always start from January

firstDayOfWeek

Number

0

Define first day of the week. Values should be between 0 - Sunday and 6 - Saturday.

ordinal

Function

 
function ordinal(nth) {
  const s = nth % 100;
  if (s > 3 && s < 21) return 'th';

  switch (s % 10) {
    case 1:
      return 'st';

    case 2:
      return 'nd';

    case 3:
      return 'rd';

    default:
      return 'th';
  }
}

Define how to order numbers for special date format.

rangeSeparator

String

' to '

Define separator for range dates (value between Check-in and Check-out dates

Usage:

$('#spiderBookingSpecifyLocalization').SpiderBooking4({
  hotelId: '%docHotelId%',
  lang: 'it',
  localization: {
    it: {
      submitButton: 'Ricerca',
      fields: {
        adults: {
          label: 'Adulti',
          values: {
            singular: 'Ospite',
            plural: 'Ospiti',
          },
        },
        children: {
          label: 'Bambini',
          values: {
            singular: 'Ospite',
            plural: 'Ospiti',
          },
        },
        infants: {
          label: 'Neonati',
          values: {
            singular: 'Ospite',
            plural: 'Ospiti',
          },
        },
      },
      datepicker: {
        label: 'Registrare',
        weekdays: {
          shorthand: ['Dom', 'Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab'],
          longhand: ['Domenica', 'Lunedì', 'Martedì', 'Mercoledì', 'Giovedì', 'Venerdì', 'Sabato'],
        },
        months: {
          shorthand: ['Gen', 'Feb', 'Mar', 'Apr', 'Mag', 'Giu', 'Lug', 'Ago', 'Set', 'Ott', 'Nov', 'Dic'],
          longhand: ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno', 'Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre'],
        },
        firstDayOfWeek: 1,
        ordinal: () => '°',
        rangeSeparator: ' al ',
      },
    },
  },
});

Specify date format

Displays another date format

Formatting tokens:

Token

Description

Example

d

Day of the month, 2 digits with leading zeros

01 to 31

D

A textual representation of a day

Mon through Sun

l (lowercase 'L')

A full textual representation of the day of the week

Sunday through Saturday

j

Day of the month without leading zeros

1 to 31

J

Day of the month without leading zeros and ordinal suffix. Uses ordinal function for current locale. Explore more

1st, 2nd, to 31st

w

Numeric representation of the day of the week

0 (for Sunday) through 6 (for Saturday)

F

A full textual representation of a month

January through December

m

Numeric representation of a month, with leading zero

01 through 12

n

Numeric representation of a month, without leading zeros

1 through 12

M

A short textual representation of a month

Jan through Dec

y

A two digit representation of a year

99 or 03

Y

A full numeric representation of a year, 4 digits

1999 or 2003

Usage:

$('#spiderBookingSpecifyDateFormat').SpiderBooking4({
  hotelId: '%docHotelId%',
  dateFormat: 'Y, F J',
});

Parameters details

Option

Type

Default value

Description

hotelId

String

N/A

ID of the hotel

channelId

String

N/A

ID of the channel

lang

String

$(document.documentElement).attr('lang') || 'en'

Default lang for the widget, can be one of: de, fr, en. Languages list can be extended with localization option. Explore more

localization

Object

{}

Extends default languages list. Explore more

template

String

'horizontal'

Widget template. Explore more

  • horizontal:
     Horizontal form
  • vertical:
     Vertical form
  • homepage:
     Bigger form with bigger inputs. Especially for homepage

type

String

'form'

Type of the widget. Define action on submit the form (press search button) Explore more

  • form:
     Open Hotel Spider WBE in new window with submitted params
  • iframe:
     Open 
    modal window
    with Hotel Spider WBE

displayNbPersons

Boolean, Object

true

Define special options for guests fields. Explore more

  • true:
     Display all fields (Adults, Children, Infants)
  • false:
     Hide all fields (Adults, Children, Infants)
  • {...params}:
     Define special options for each field.

dateFormat

String

'D, M d'

Define date format for Check-in - Check-out field. Explore more

promoCode

String

N/A

Optional promotion code

roomId

String

N/A

ID of the room.

  • roomId:
     Open Hotel Spider WBE directly on the room page

utm

Object

N/A

Optional Google Analytics tracking parameters. Explore more 

  • {...params}:
     Define special options for each field.
  • Required parameters by Google Analytics : 
    utm_source
    , 
    utm_medium
    , and 
    utm_campaign
    .