WBE Steps Documentation

  1. Integration
    2. 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=2717&username=WBEPlus&password=escBAga&type=step'></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=2717&username=WBEPlus&password=escBAga&type=step', array(), '1.0.0', true );
							}

							add_action( 'wp_enqueue_scripts', 'hopa_wbe' );
    Then create an element with the ID: wbe_container where you want the booking engine to appear
    							<div id="wbe_container"></div>
  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.

      Add an data attribut (data-redirect) with the URL where the WBE is implemented

      Please replace "http://hotelwebsite.com/Booking" with the actual website!

      							<div class="wbe-quickstarter-container" data-redirect="http://hotelwebsite.com/Booking"></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, redirect the user to the site where the main WBE is implemented and with the following parameters

      									{{yourhotelwebsite}}?wbeDeeplink&wbeArrival=2024-05-19&wbeDeparture=2024-05-20&wbeAdults=2&wbeChildren=1
  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=2717&username=WBEPlus&password=escBAga&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=2717&username=WBEPlus&password=escBAga&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=2717&username=WBEPlus&password=escBAga&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. Change Language
      2. 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=2717&username=WBEPlus&password=escBAga&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=2024-05-19&wbeDeparture=2024-05-20&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=

    At the moment there are no active Packages

    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
      5224Einzelzimmer
      5223Doppelzimmer zur Einzelnutzung
      5222Doppelzimmer Standard
      5226Einzelzimmer frz. Bett
      5225Doppelzimmer frz. Bett
  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: '2024-05-19',
    wbeDeparture: '2024-05-20',
    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://wbede2.res-online.net//wbePlus/livePrices.php?hotelID=2717&token=escBAga&lang=en&rooms=5224,5223,5222,5226,5225
  13. Mail

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