JavaScript Installation

JavaScript Installation

Info
Purpose:
This section explains how to check and configure the JavaScript used to install tripla Bot and tripla Book on a website.
⏱ Estimated time: ~10 mins
Warning
  1. Please note that the setup method differs for users of Booking Suite and WIX.
  2. For facilities that have contracted tripla Bot, please embed the script directly within the tag, not through GTM (Google Tag Manager).

1. Where to Set

  1. Setting page: Property Management Screen
  2. Action: 'Admin Setting'  →"Tripla Setup"
Tripla Book
Tripla Bot

2. Basic Installation

Step 1Place the copied code right above the </head> tag in your website’s homepage.
Step 2Add data-triplabot-draggable="true" as shown in the example below, you will be able to move the chat icon around on the homepage.
  1. <head>

    <!-- ... -->

    <script async src="https://tripla.jp/sdk/javascript/tripla.min.js" data-triplabot-code="xxxxxxxxxxxxxxxxxxxxx" data-triplabot-draggable="true"></script>
    </head>
Step 3Reload (refresh) your homepage, If the chatbot appears, the setup is complete.

3. Installation on Booking Suite

Step 1Go to the Suite Admin Panel → Content → Pages, and click Edit Homepage.
Step 2・Scroll to the bottom and insert the code in the Insert Code section.
・Save the changes and preview the page to confirm proper operation.
Step 3If everything looks good, click Publish to complete the process.

4. Installation on Wix

  1. For websites created with WIX, please refer to the WIX manual.
  2. Specify Header as the location where the code snippet is added.
Warning
  1. Due to Wix specifications, settings using CSS selectors are not supported.
  2. Even if the position is defined with CSS, the search bar will not be displayed.
  3. To display the search bar in Wix, set it to Center of the page or Fixed at bottom of the page.
    *Because the search bar may appear during page transitions, displaying it as “    Fixed at bottom of the page” is recommended.

5. Installation on WordPress

Step 1Install the plugin.
Step 2Install and activate “Insert Headers and Footers.”
Step 3Open the plugin settings.
Step 4In the WordPress admin panel, go to Settings > Insert Headers and Footers.
Step 5Add the code: insert the JavaScript into the <head> section.

    • Related Articles

    • Chatbot Widget Settings

      Purpose: This section is to explain how to configure chatbot's appearance, name, icon image and more. ⏱ Estimated time: ~10mins 1. Where to Set Setting page: Property Management Screen Action: 'Setting' → "Widget Setting" → "Chatbot Widget" After ...

    • Recommender Widget

      Purpose: This section explains how to configure the recommender widget, which uses AI recommendations to display the most suitable room type for each user by plan. ⏱ Estimated time: ~10mins Plans are displayed at the lowest price within the past ...

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

    • tripla Book – Google Hotel Ads Integration

      Purpose: This section explains how to integrate Tripla Book with Google Hotel Ads, Google’s hotel search and advertising service. ⏱ Estimated time: ~10mins Requirements for Appearing in Google’s Free Booking Links: A Google Business Profile account ...

    • How to Set Up SNS Account Login (SSO)

      Purpose This section explains the flow for registering as a member using a guest’s SNS account. ⏱ Estimated time: ~10 min There are two integration methods. Enable Social Media SSO-Link from the tripla membership login screen to the SSO login screen ...