Call the booking widget from an existing search panel

This setting should be configured by the website administrator.  

If you are not using tripla's default search panel and have your own custom design or an existing search panel, you can launch the booking widget using a JavaScript function.

window.TriplaBookingWidget Method

1. window.TriplaBookingWidget
2. (
3.  action,
4. {params},
5.  'tripla_hotel_code_optional'  // triplabotCode
6. )
   

Parameter (If using Setting of kids tier)

action	'advanced_search'
params	An object with the following attributes
	checkIn:	Required：'yyyy/mm/dd' Specify the check-in date by format
	checkOut:	Required：'yyyy/mm/dd' Specify the check-out date by format
	adults:	Required：Specify the number of adults
	kidsTiers: [{ code: 'A', children: 1 }]:	Required：Specify the Kids tiers and number of children as an array. Use `code` to indicate the category ID.
	roomCount:	Required：Specify the number of rooms. The default value is 1.
	isDayUs:	Optional: Specify when searching for day-use plans. The default value is `false`. When `isDayUse` is set to `true`, the check-out date is not required (if specified, it will be ignored).
'tripla_hotel_code_optional'	Optional: For brand properties, you need to specify the `triplabotCode` of the property where the booking widget should be launched. By default, the `triplabotCode` from the configuration settings is used.

Parameter (used when shared-bed is enabled or when kids are not allowed)

action	'advanced_search'
params	'advanced_search'
	checkIn:	Required：'yyyy/mm/dd' Specify the check-in date by format
	checkOut:	Required：'yyyy/mm/dd' Specify the check-out date by format
	rooms: [{ adults: 2, children: 0 }, { adults: 1, children: 1 }]	Specify the number of adults and children for each room as an array.   The number of adults is required, and at least one room must be specified.
	isDayUse:	Optional: Specify when searching for day-use plans. The default value is `false`. If the value of `isDayUse` is set to `true`, the check-out date is not required (if specified, it will be ignored).
'tripla_hotel_code_optional'	Optional: For brand properties, it is necessary to specify the `triplabotCode` of the property where the booking widget should be launched. By default, the `triplabotCode` from the configuration settings is used.

1. window.TriplaBookingWidget('search_multiple_room',
2.  {
3.  checkIn: '2023/07/17',
4.  checkOut: '2023/07/18',
5.  rooms: [
6.  {
7.  adults: 2  // 2 adults in 1st room
8.  }, 
9.  {
10.  adults: 1  // 1 adult in 2nd room
11.  }
12.  ] 
13.  }, '60afebc3ac8e15c5d0a497b1ec41d611' // Property tripla  code
14. )
15. 
    
16. // By setting the number of guests for each room in the `rooms` array, it becomes possible to perform a multi-room search.

By loading the configuration code of your property from our booking engine, the `window.TriplaBookingWidget` method becomes available.  

You can launch the booking widget by calling this method and passing the relevant parameters as arguments.

The configuration code can be found in the Property Management Screen → Admin Settings → tripla Setup. The term "Settings code" refers to the entire code provided there.*

If your existing search panel includes a dropdown list to select a property (in the case of brand properties), you need to dynamically set the `triplabotCode` of the selected property in order to display the corresponding search results.  

The `triplabotCode` can be found within the code in Property Management Screen → Admin Settings → tripla Settings.

window.TriplaBookingWidget Method example（If using Kids tier）

1. window.TriplaBookingWidget('advanced_search', { checkIn: '2021/10/19', checkOut: '2021/10/20', adults: 3, kidsTiers: [{ code: 'A', children: 1 }, { code: 'B', children: 1 }], roomCount: 2, isDayUse: false }, '60afebc3ac8e12c5d0a493b1ec41d611') // triplabotCode
   

window.TriplaBookingWidget Method example (used when shared-bed is enabled or when kids are not allowed)

1. window.TriplaBookingWidget('advanced_search',
2. { 
3.  checkIn: '2021/10/19',
4.  checkOut: '2021/10/20',
5.  rooms: [{ adults: 2, children: 0 }, { adults: 1, children: 1 }], 
6.  isDayUse: false
7. }, 
8.  '60afebc3ac8e12c5d0a493b1ec41d611') //  triplabotCode
9. 
   

• Related Articles

• Booking Widget URL Parameters

  A URL parameter refers to a variable (string) added to the end of a URL. By placing links with specific URL parameters on your website, you can launch various views of the booking widget. All standard URL parameters can be used even when using a ...

• Search Bar and Availability Search Screen Settings

  ※This setting is intended for your website administrator. This section is for installing the accommodation plan search screen (Booking Widget) and search bar on your website. In addition to the search bar provided by tripla, it is also possible to ...

• Booking Widget URL Parameters When Using a Subdomain

  URL parameters refer to variables (strings) added to the end of a URL. By placing links with specific URL parameters on your website, you can launch various views of the reservation widget. If you're using a custom subdomain for your reservation ...

• Permission Management in the Admin Panel

  Access to pages and functionality within the tripla admin panel is restricted based on assigned permissions. Users who can access and operate the admin panel are referred to as administrators, accounts, or concierges. ⏱ Estimated Time: Adding ...

• How to use the admin panel editor

  In the text editor on the admin panel, you can select the icons at the top to change the font size, align paragraphs, and add links to text, making it easier for customers to read. Additionally, plan descriptions can also be written using HTML code. ...