Javascriptの設置

Javascriptの設置

Info
tripla Bot、tripla Bookのホームページへの設置用Javaスクリプトの確認方法と設定方法です。

Alert
※Booking Suiteをご利用の方とWIXをご利用の方は設定方法が異なりますのでご注意ください。
※triplaBotをご契約の施設様の場合はGTMではなくタグ内に直接埋め込んでください。


１．JavaScriptの確認方法


Book
Bot
施設管理画面ー管理者設定ーtripla設定

施設管理画面ー管理者設定ーtripla設定





２．設置方法


基本的な設置方法

コピーしたコードをホームページの </head> の直上に設置してください。
下記の例の通り data-triplabot-draggable="true" を追加すると、ホームページ上でチャットアイコンを移動することができます。
  1. <head>

    ---省略---

    <script async src="https://tripla.jp/sdk/javascript/tripla.min.js" data-triplabot-code="xxxxxxxxxxxxxxxxxxxxx" data-triplabot-draggable="true"></script>
    </head>

ホームページを「再読み込み」して、チャットボットが表示されたら完了です。


Booking Suiteへの設置方法


Suite管理画面→コンテンツ→ページ→ホームページ編集をクリックしてください。




ページ下にある「コードを挿入」からコードを挿入→保存→プレビューで確認可能です。



ご確認いただいて、問題なければ、[公開]をクリックして終了です。


WIXへの設置方法


WIXでホームページを制作されている場合は下記のリンクをご確認ください。 コードスニペットを追加する箇所は『ヘッダー』を指定してください。　
※設定の詳細につて、WIX側のマニュアルを参考してください。
Warning
Wixの仕様上、CSSセレクタでの設定はできません。
CSSで位置を設定しても検索バーが表示されないためご注意ください。
Wixで検索バーを表示するには、「ページ中央」・「ページ下部固定」でご設定ください。
※ページ遷移時に検索窓が表示されてしまうため、「ページ下部固定」での表示をお勧めいたします。

WordPressでの設置方法


１．プラグインをインストール
２．「Insert Headers and Footers」をインストールして有効化します。

３．プラグイン設定を開く
４．WordPress管理画面で 設定 > Insert Headers and Footers を選択。
５．コードを追加　<head> にJavaScriptを追加する。

Studioの場合の注意事項

studioでも有料プランであれば、Javascriptの設置が可能です。
ただし、プレビューでは確認できないため、動作確認は本番公開後にお願いします。



    • Related Articles

    • サービス導入までのチェックリスト

      tripla Book導入～本番公開までの流れ 本番公開前 １．管理画面にログインする ＜新規ご契約法人のお客様＞ support@tripla.jpから送られる「triplaサービス パスワード通知」メールからログインしてください。 届いていない場合、迷惑メールに入っていないかご確認ください。迷惑メールにもない場合は、弊社までお問合せください。 有効期限は24時間です。 既に一度ログインしたことがある場合は、「パスワードを忘れた場合？」から再度お試しください。 ...

    • 検索バー、空室検索画面の設定

      ※こちらの設定はホームページ担当者が設定する内容です。 ホームページへ宿泊プラン検索画面（ブッキングウィジェット）、検索バーの設置をします。 triplaが提供する検索バー以外に、自前のデザインや検索パネルからjavascriptのファンクションで予約ウィジェットを呼び出すことも可能です。 詳細はこちらよりご覧ください。 triplaが提供する検索バーの設置方法 設定する場所 施設管理画面ー設定ーウィジェット設定ー予約ウィジェットを開きます。 検索バー ...

    • 既存の検索パネルから予約ウィジェットを呼び出す

      ※こちらの設定はホームページ担当者が設定する内容です。 triplaの提供している検索パネルではなく、自前のデザインや既存の検索パネルが既にある場合、javascriptのファンクションで、予約ウィジェットを呼び出すことができます。 window.TriplaBookingWidgetメソッド window.TriplaBookingWidget ( action, {params}, 'tripla_hotel_code_optional' // triplabotCode ) ...

    • 弊社へのお問い合わせについて

      ご担当者各位 平素より、triplaサービスをご利用いただき誠にありがとうございます。 弊社へお問い合わせいただく際のお願いについてお知らせいたします。 管理画面のお問い合わせについて 管理画面の設定に関しまして、下記3つの方法にてお問い合わせが可能でございます。 ①チャットボット ②お問い合わせフォーム（Zohoフォーム） ③電話窓口 それぞれのメリット・デメリットは下記の通りでございますため、必要に応じてご活用いただけますと幸いです。 お問い合わせ方法 有効活用できるケース ...

    • 管理画面の権限の管理

      tripla管理画面には、権限によってアクセスできるページや操作できる範囲の制限が設定されています。 管理画面にアクセスし操作できる人やアカウントのことを、管理者やアカウント、コンシェルジュと呼んでいます。 ⏱所要時間：アカウントの追加やメールアドレス、パスワードの変更などは約５分で可能です。 アカウントとメールアドレスのルール triplaの管理画面では、1つのメールアドレスにつき1つの権限しか付与できません。 ...