Search Bar and Availability Search Screen Settings

Search Bar and Availability Search Screen Settings

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

Notes
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

Info
The search bar language automatically changes based on the browser’s language.
Notes
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.

Warning
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.
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:
  1. <div id="my-pc-header-container">
  2.   ... put your PC header here ...
  3. </div>
  4. <div id="my-mobile-header-container">
  5.   ... put your Mobile header here ...
  6. </div>
CSS:
  1. /* pc case */
  2. #my-pc-header-container {
  3.   display: block;
  4. }
  5. #my-mobile-header-container {
  6.   display: none;
  7. }

  8. /* mobile case */
  9. @media screen and (max-width:767px){
  10.   #my-pc-header-container {
  11.     display: none;
  12.   }
  13.   #my-mobile-header-container {
  14.     display: block;
  15.   }
  16. }

Custom Design

You can configure the colors of the search bar, buttons (“Book” / “Next”), and header.







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

Typecode
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' />

Alert
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:
[**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.



Alert
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.
Warning
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.
Warning
If unchecked, the BRR widget will not be shown.
Admin panel
Desktop
Mobile









    • Related Articles

    • Default Search Condition Settings

      You can configure the default settings for the search window that appears when a guest initiates a reservation search. You can also choose whether to display only available options or include those that are fully booked. From the Property Management ...
    • Area Settings

      The area setting enables area-based searches using the search bar on the brand top page of a chain hotel. Note: If you wish to implement this on your brand page, a dedicated account will be issued. Please contact tripla before proceeding with the ...
    • Language Settings in the Management Screen

      You can configure the languages used across tripla services. ⏱Estimated time:apporx. 5 minutes After turning languages ON/OFF or editing translations, be sure to click “Save” to apply the changes to the customer-facing screen. ブランド管理画面での言語設定 ...
    • OTA Price Retrieval Settings

      By displaying the lowest price compared to plans sold on OTAs, you can effectively highlight competitive pricing on your official website. Customers can easily see the best rate on your official site without having to compare with OTAs themselves. ...
    • 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 ...