Skip to main content

Onboarding BE script implementation

Anna Korsak
Updated

AZDS Custom Booking Engine Integration

1.Script integration. Add the following lines at the end of body (on your staging/development site, so it can be tested before go-live).

IMPORTANT NOTE: Please ensure there are no wrappers around the scripts – no divs.

Please ensure the script and booking layout is only injected once.

 Example (you need to enter your hotel’s information):

<script type="text/javascript">
var BOOKING_SETTINGS = {
"hotel": "hotel-zoe",
"theme": "boutique-gallery",
"lang": "en",
"emergency": {
"email": "info@hotelzoesf.com",
"phone": "800-648-4626"
}
};
</script>
<booking-layout></booking-layout>
<script type="text/javascript"
src="//newbooking.azds.com/inline.bundle.js"></script>
<link href="//newbooking.azds.com/api/hotel/hotel-zoe/styles" rel="stylesheet"
type="text/css" />

Note: Please verify outage email and outage phone number.

  1. Button integration.  Change website reservation/booking links to “#/booking/step-1”

<a href="#/booking/step-1" class="check-availability-btn" style="text-decoration:
none;"> CHECK AVAILABILITY </a>

Note: Please add all styles related with your button or booking form.

  • Special Offer Page Booking Button integration: change special offer reservation/booking links to “#/booking/step-1?promo=PROMOCODE”

  • Rooms/Suites Booking Button integration: change special offer reservation/booking links to “#/booking/step-1?room=ROOMCODE”

  • Group Booking Button integration: change special offer reservation/booking links to“#/booking/step-1?group=GROUPCODE''

to update cached files of the previous version of APP in WordPress

The problem comes in when the client change integration script or cache our scripts content on their side. When we release the new version of app it fails.

Root causes:

  1. booking settings version

  2. the script is double-inserted

  3. CSS styles conflicts 
    3.1. If possible, we'd recommend implementing the booking engine on a single/blank page. This will allow your web team and our development team to make changes as needed without the potential for impactful styling conflicts. A good example of this type of implementation is Badrutt's Palace (Luxury Winter Hotel Swiss Alps | Badrutt's Palace Hotel ).
    3.2. DON’T use any positioning and display styles over the <html> and <body> tags, for example:

    3.3. DON’T put styles for tag selectors (p, span, a, button, div, ul, li, strong, img and etc.), for example


    3.4. DON’T customize the position and display properties for third-party components like calendars, pop-ups, carousels and etc. For example:


    3.5. Keep specificity as low as possible without using tag selectors:
    DON’T:
    .content #intro .icon { … }
    DO:
    .intro-icon { … }
    3.6. Use one-class selectors when possible:
    DON’T:
    .button.active { … }
    DO:
    .button-active { … }
    3.7. Decouple selectors from HTML structure:
    DON’T:
    .header nav li button { … }
    DO:
    .header-button { … }
    3.8. Make all selectors referring to a page/component start with the same word:
    DON’T:
    .front-page-title { … }
    .intro-home { … }
    .home-text { … }
    DO:
    .home-title { … }
    .home-intro { … }
    .home-text { … }
    3.9. Never use generic words for classes as the ONLY selector:
    DON’T:
    .highlighted {
    font-weight: bold;
    }
    DO:
    .user-name.highlighted {
    font-weight: bold;
    }
    OR:
    .user-name-highlighted {
    font-weight: bold;
    }
    3.11. DON’T use !important
     

Debug the issues

BE app is not working

  • Check that BOOKING_SETTINGS available on the page.

    1. Open browser console.

    2. Type BOOKING_SETTINGS and press “Enter”

    3. Verify that it returns JSON object.

 

  • Check that https://newbooking.azds.com/inline.bundle.js is loaded

    1. Open “Network” tab in dev tools

    2. Filter by inline.bundle.js

       

  • Check if <booking-layout></booking-layout> element exist on the page

    • Open console tab in browser DevTools

    • Type document.getElementsByTagName('booking-layout').length and press “Enter“

    • Verify that it returns number greater than 0



       

For Additional Support

Click here to complete the Support Request Form*. 

  1. Your email address—a support agent will reply via email.
  2. Subject—Provide the property name and issue title.
  3. Description—describe the issue in detail.
  4. Priority—accurately* indicate the level of the request (low, normal, high or urgent). *Selecting the correct priority level ensures the request is routed to the correct agent.
  5. My request is for the following— indicate the request is for Booking Engine (RevRaise).
  6. Attachments (if applicable)—attach relevant docs/images.
  7. Click Submit.

Zendesk will generate a ticket number. To check the status of the ticket, click here and enter the ticket number in the Search field on the left side of the screen.

Related to

Related articles