Skip to main content

Onboarding BE script implementation

Anna Korsak
Updated

AZDS Custom Booking Engine Integration

Script integration

 
Add the following lines at the end of body (on your staging/development site, so it can be tested before go-live). Please ensure there are no wrappers around the scripts – no divs and 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.

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.



image-20240806-121704.png
 
 
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 ( ).

3.2. DON’T use any positioning and display styles over the <html> and <body> tags, for example:

image-20240815-114742.png


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


image-20240815-115035.png

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

image-20240815-115416.png


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

 

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.

 

 






image-20240801-115538.png

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.

*Available to Green Date Admin-level users and above, only.

 

  •  
 

Related to

Related articles