Launch from Existing Search Panel

If a custom-designed or existing search panel is used instead of the search panel provided by tripla,

the booking widget can be launched using a JavaScript function.

*This setting is intended for website administrators.

1. window.TriplaBookingWidget Method

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

2. 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.

3. Parameter

Used when bed-sharing is allowed or when children are not permitted to stay.

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

• Widget Settings (Search Bar)

  Purpose: This section explains how to install the booking widget and search bar on the website. ⏱ Estimated time: ~10mins In addition to the search bar provided by tripla, the booking widget can also be launched from a custom-designed search bar or ...

• Copy an Existing Plan

  Purpose: This section is to explain on how to create new plan by copying existing plan content. Estimate time: ~10mins 1. Where to Set Setting Page: Property Management screen Action: 'Plan' → [Choose the plan to copy] 2. How to Set Step 1 Choose the ...

• Default Search Conditions

  Purpose: This section explains how to configure the default search window displayed when guests search for accommodation. ⏱ Estimated time: ~10mins 1. Where to Set Setting Page: Property Management screen Action: 'Setting' → 'Default Search ...

• Permissions Management

  Purpose: This section explains how to manage the users or accounts that can access and operate the admin panel. These users are referred to as administrators, accounts, or concierges. ⏱ Estimated Time: ~10 Minutes. Account and Email Address Rules ...

• URL Parameters for Booking Widget

  Purpose: This section is to explain how to create URL to launch various booking widget screens, by placing links with specific URL parameters on the property homepage. ⏱ Estimated time: ~10 mins "URL parameters" refer to variables (strings) appended ...