WBE Overlay Documentation

  1. Integration

    2. The WBE+ will work as an overlay over the actual site. To integrate it just paste the following code into your Website.

    Add the script to the 
    <head></head>
    -Element or to the Wordpress "wp_enqueue_script" function.

    1. HTML
      2. Paste this code in the 
      <head></head>
      element of your page.
      <script type='text/javascript' src='https://res-online.ch/wbePlus/incubator.js.php?hotelID=2081&username=WBEPlus&password=H41g18Nv'></script>
    2. Wordpress
      3. Paste this code in the "function.php" file of your theme.
      							function hopa_wbe() {
								wp_enqueue_script( 'script-name', 'https://res-online.ch/wbePlus/incubator.js.php?hotelID=2081&username=WBEPlus&password=H41g18Nv', array(), '1.0.0', true );
							}

							add_action( 'wp_enqueue_scripts', 'hopa_wbe' );
  2. Quickstarter
    1. Quickstarter

      2. For the Quickstarter just create an element with the class "wbe-quickstarter-container" where you want the Quickstarter to show up.

      							<div class="wbe-quickstarter-container"></div>

      The Quickstarter should automatically resize to the given space. If you don't like the breaks that it made, just adjust it with CSS.

    2. Custom Quickstarter

      3. In case you want to keep your own Quickstarter use the function "wbeCustomQuick" to transmit the parameters:

      hotelID is optional

      									
      wbeCustomQuick(arrival, departure, adults, childs, babies, hotelID)
      
									
      wbeCustomQuick("2025-11-08", "2025-11-09", 2, 1, 0, 2081)
  3. Styles

    4. You have two possibilities to change the design of your WBE.

    1. Colors
      2. For simple color changes you can use this:
    2. Stylesheet
      3. For more precise styles use the stylesheet below to add your overwrites.
  4. Disable Multiproperty

    5. In case you need an integration without the Multiproperty solution add the parameter "multiProperty=false" to the script

    <script type='text/javascript' src='https://res-online.ch/wbePlus/incubator.js.php?hotelID=2081&username=WBEPlus&password=H41g18Nv&multiProperty=false'></script>
  5. Filter Multiproperty

    6. If you want to have 2 different sites with different hotels you can filter the hotels that should be showed

    <script type='text/javascript' src='https://res-online.ch/wbePlus/incubator.js.php?hotelID=2081&username=WBEPlus&password=H41g18Nv&multiPropertyFilter=XXXX,XXXX,XXXX'></script>
  6. Filter Rooms

    7. For hiding certain rooms you can use the parameter bellow:

    <script type='text/javascript' src='https://res-online.ch/wbePlus/incubator.js.php?hotelID=2081&username=WBEPlus&password=H41g18Nv&excludedRooms=XXXX,XXXX,XXXX'></script>
  7. Functions

    8. As the WBE is always running in the background you have the possibility to access some of its functions.

    1. Open WBE
      2. If you want to add an Button to your website that opens the WBE, use an click-event with the funtion "wbeOpenOverlay()"
      <button onclick="wbeOpenOverlay()">Book now</button>
    2. Auto open
      3. If you need to directly open the overlay when the user loads the site, add the following parameter to your URL.
      http://hotelwebsite.com/book/index.php?wbeAutoOpen
    3. Change Hotel
      4. In case you want to change the hotel in multiproperty use the following function: 
      <button onclick="wbeChangeHotel(hotelID)">Change Hotel</button>
    4. Change/Pre-select Room
      5. For selecting a specific room and opening the WBE use the following function:
      <button onclick="wbeSelectRoom(roomID)">Book this Room</button>
    5. Select Package
      6. For selecting a specific package and opening the WBE use the following function:
      <button onclick="wbeOpenPackage(packageID, hotelID[optional])">Book this Package</button>
    6. Change Language
      7. The WBE will try to set the language automatically to homepages language. For this it will read the "lang" attribute in the HMTL tag:
      <html lang="de">
      In case you don't have the attribute set or want to change it otherwise, you can use the following function:
      wbeChangeLang("en")

      You can also pass it as an parameter in the starter script:
      <script type='text/javascript' src='https://res-online.ch/wbePlus/incubator.js.php?hotelID=2081&username=WBEPlus&password=H41g18Nv&lang=de'></script>

      Possible languages: de -> German, en -> English, fr -> French, es -> Spanish, it -> Italian

    More functions will be available later...

  8. Parameters

    9. It is possible to pass parameters with predefined values to the WBE

    Please replace {{yourhotelwebsite}} with the actual URL where the Booking engine is implemented.

    1. Guest Selection
      2. {{yourhotelwebsite}}?wbeDeeplink&wbeArrival=2025-11-08&wbeDeparture=2025-11-09&wbeAdults=2&wbeChildren=1
    2. Package Direct Link
      3. Opens predefined package
      {{yourhotelwebsite}}?wbeOpenPackage={{packageID}}
    3. Select Room
      4. Put a specific room at first place and pre select it
      {{yourhotelwebsite}}?wbeSelectRoom={{roomID}}
    4. Promotion
      5. Passes promotion Code
      {{yourhotelwebsite}}?wbePromo={{promoCode}}
    5. Change Hotel
      6. Only for multiproperty properties
      {{yourhotelwebsite}}?wbeChangeHotel={{hotelID}}
  9. Packages

    10. You can open the overlay with an specific Package. To do so use the function "wbeOpenPackage".

    wbeOpenPackage(packageID)

    URL:

    www.hotelwebsite.com?wbeOpenPackage=707
    1. Packages
      2. IDName
      7077Nights Package
      23683Nächte/4Tage @ CHF 385pp
      23694Nächte/5Tage @ CHF 485p.p

    The following code will open the package "7Nights Package".

    wbeOpenPackage(707)

    More packages can be created in the Backoffice.

  10. Rooms

    11. Show the rooms best price directly in your website.

    Create an element with the class "wbe_roomPrice" and add the atributes "roomid" and "numofdays" (Number of days sets the range within it should search for the best available price). This will display an formated price with currency ex. [€ 130]

    <div class="wbe_roomPrice" data-roomid="XXXX" data-numofdays="1"></div>
    1. Rooms
      2. IDName
      1646Comfort Einzelzimmer
      1648Komfort Doppelzimmer
      1649Superior Doppelzimmer
      3331Deluxe Zimmer mit Balkon
      1647Komfort Dreibettzimmer
      3332Komfort Familienzimmer
      1718Deluxe Penthouse Suite mit Panoramablick
      7078Central Serviced Apartment 1 (not in Use)
      7553Central Serviced Apartment 2 (not in use)
      9985Central Serviced Apartment 3 (not in use)
  11. Tracking

    12. Supported Tracking Plugins

    1. Google Analytics

      2. Works automatically if Google Analytics is already implemented in the webpage

      Enhanced E-commerce needs to be enabled.
    2. Google Tag Manager (GA4 E-commerce)

      3. Make sure you have a GA4 Configuration

      Google Tag Manager

      Create a Tag with the Tag Type "Google Analytics: GA4 Event" and the event name "{{Event}}". Also make sure to toggle the "Send Ecommerce data" setting

      Google Tag Manager

      Link the created Tag to a Trigger of the type "Custom Event" and paste the following as "Event name". Make sure to toggle the "Use regex matching" setting

      view_item|view_item_list|select_item|add_to_cart|remove_from_cart|view_cart|begin_checkout|add_payment_info|add_shipping_info|purchase
      Currently only "begin_checkout" and "purchase" are being used, but this may change in the future

      Google Tag Manager

      After publishing your changes, you should be able to see the new events in the Google Analytics 4 App.
      You can use the Debugview to get almost realtime events.

      Google Tag Manager
    3. Google Tag Manager (Deprecated, use Google Tag Manager (GA4 E-commerce) instead)

      4. The Web Booking Engine triggers three different events for the Google Tag Manager:

      Enhanced E-commerce needs to be enabled. (In Google Analytics and in the variable of GTM)
      Google Tag Manager
      Events

      Can be directly linked to Google Analytics Events

      {
    action: 'add_extra',
    category: 'WBE',
    nonInteraction: false,
    actionLabel: 'Add extra',
    event: 'wbeEvent'
}
      Google Tag Manager Google Tag Manager
      Reservation

      Can be directly linked to Google Analytics E-Commerce

      {
    ecommerce: {
        purchase: {
            actionField: {
                id: 'XXXXXXXXXX',
                affiliation: 'HotelPartner',
                revenue: 1200,
                tax: '0',
                shipping: '0'
            },
            products: [
                {id: '1803', name: 'Single Room', category: 'Rooms', quantity: 1, price: 500},
                ...
            ]
        }
    },
    event: 'wbeReservation'
}
      Google Tag Manager Google Tag Manager
      Config Change 
      {
    wbeArrival: '2025-11-08',
    wbeDeparture: '2025-11-09',
    wbeAdults: 2,
    wbeChilds: 0,
    event: 'wbeConfigChange'
}
    4. Other

      5. For the following Plugins, please send us the respective logins

      • Sojern
      • Adwords
      • Remarketing
      • MyHotelShop
      • Hotelchamp
      • CheckEffect
      • AdPulse
      • ReachLocal
      • Facebook
      • Triptease
      • LiveRate
      • Altelis
  12. Live Prices URL

    13. In case you need to display the day prices, you can use the following URL:

    https://wbech1.res-online.net//wbePlus/livePrices.php?hotelID=2081&token=H41g18Nv&lang=en&rooms=1646,1648,1649,3331,1647,3332,1718,7078,7553,9985
  13. Mail

    14. In order to send mails from the hotels mail adress we need their SMTP data.