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.
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 launch the booking widget using a JavaScript function from your own custom design or search panel.For more details, please refer to [this guide].
How to Install the tripla Search Bar
Where to Set
Property Management Screen → Settings → Widget Settings → Booking Widget
Search Bar Check the “Install Search Bar” box to display it on the official website.Click on the guest count to increase or decrease the number. | |
Multi-room Search Turn this on to allow customers to search for two or more rooms. Room search limit 最大 9部屋まで設定できます。子供の区分が設定されている場合、部屋の予約制限は部屋の検索制限と同じです。 |
Display tripla widget search bar on
Choose where the search bar appears on your website.
| All Pages Displayed on all pages of the official website. Select the display position from the dropdown. | |
| CSS Selector Use CSS selectors to customize placement and size on the homepage. Contact your website developer for setup. | |
Following Pages You can configure display/exclusion conditions using URLs: Display: Show the search bar Exception: Hide the search bar |
The search bar language automatically changes based on the browser’s language.
If parts of the search bar are hidden when options are opened, check that overflow: hidden is not set in the CSS of the wrapper element.
CSS Selector Warnings
You can adjust the display position of the search bar using CSS selectors.
tripla does not support CSS customization—please consult your web developer.
tripla does not support CSS customization—please consult your web developer.
Do not customize the internal display (e.g., dropdowns for date/guests) using CSS to avoid layout issues after system updates.
Displaying Children on the Search Bar
How children are displayed depends on your child stay settings. For details, see the manual [here].
Header Settings
You can configure the header (top section) of the availability search screen:
Hotel Name/Logo/Custom HTML/CSS
If you want to show different headers for desktop vs. mobile: HTML:
CSS:
|
Custom Design
You can configure the colors of the search bar, buttons (“Book” / “Next”), and header.
Font color (white or black) will be set automatically based on background color. It cannot be changed manually.
Footer
To use a custom footer design, choose “Custom” and enter the HTML/CSS code.
Enable booking flow by clicking
You can copy a link from “Launch booking flow via link click” and embed it in HTML.
| Type | code |
| Link | <a href='#' data-tripla-booking-widget='search'>検索</a> |
| Button | <button type='button' data-tripla-booking-widget='search'>検索</button> |
| Image | <img src='your image url' alt='検索' data-tripla-booking-widget='search' /> |
Use absolute paths for image URLs.
Direct URL
You can also launch the booking widget by appending the following to your domain:?tripla_booking_widget_open=search
Example:
Example:
[**https://<ドメイン名>/?tripla_booking_widget_open=search**](https://tripla-hotel.com/?tripla_booking_widget_open=search)
Additional required fields
You can configure additional required fields during reservation:
Kanji Name When enabled, users must input their name in kanji (required only in Japanese). | |
| Address When enabled, users must enter their address. This info is not shown in the admin panel; use custom questions to capture it if needed. |
Customize the “Search” Button Label
This feature is not supported in trpla Booking in foreign language.
Default Search Result
Choose whether to display search results by room type or by plan.
Sort Order
You can set the order in which plans/room types appear in search results:
When using the "Recommended" , you can choose between AI-based recommendations or a custom order you define.
If you want to sort manually, select the option to use the order set for room types and plans (options will be displayed in the order they were created), and rearrange the plans in the plan list accordingly.
Plans marked with Display Order “1” will appear as the top recommendation. If it has no availability, the next available one will show.
Search without check-in date
Enable searches without specifying a date.
Before enabling the undated search toggle, click “Update lowest price data” to refresh the pricing. Once complete, the last updated date will appear. If the update date is outdated, update again before turning on the toggle. In undated mode, prices are shown like “¥8,000~” and clicking “Book” opens the calendar. | If the update date is outdated, update again before turning on the toggle. In undated mode, prices are shown like “¥8,000~” and clicking “Book” opens the calendar. |
If a plan has a Posting start date in the Plan Details page, it will not appear in undated search.
Prices shown are the lowest for the next 12 months.
Prices are updated once daily (around 1:00 AM). Use the button to refresh earlier.
Day-use plans switch
Enable the toggle “Search for Day-Use Plans” to include such plans in search results.
Custom URL
Enabling this lets you show your official website’s URL in the reservation confirmation email.
Cannot be used with subdomain-based widgets.
When enabled, and a URL is entered, it will appear in the email (JavaScript must be installed on that page).
Chatbot
Choose whether to display the chatbot on the booking widget.
You can toggle this separately for desktop and mobile.
If unchecked, the BRR widget will not be shown.
Admin panel | Desktop | Mobile |
Related Articles
Settings Related to Child Reservations
You can configure settings related to child stays with this feature. ⏱Estimated time: About 5 minutes If you are using TL-Lincoln, it is not possible to configure capacity calculation, inclusion in adult rate calculation, or rate settings on the ...Corporate (Organization) Settings
By creating a corporate membership program and registering the corporate (organization), corporate login will be enabled. For more details about the corporate membership program, please refer to this link. ⏱Estimated time: About 5 minutes. How to ...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. ...Notification Email Settings
You can set up recipients to receive notifications when accommodation reservations or cancellations occur, or when a reservation including an option is made. ⏱ Estimated Time: 5 minutes Reservation emails for dynamic packages will not be forwarded. ...Login to the tripla Administration Screen
First-Time Login After the contract is completed, an email containing the login URL for the tripla administration screen will be sent to one of the following email addresses: - The email address listed on the application form - The email address ...