Web チャット

Web チャットは、ボットを自社の Web サイトに設置する機能です。訪問者が画面の隅にあるチャットボタンを押して質問すると、ボットが同じフローとナレッジで回答し、会話は LINE・Facebook・Instagram と一緒にチャット画面に届きます。

概要

Web チャットはチャネルの一つで、ほかのプラットフォームのアカウントは必要ありません。設定できる場所は 2 か所あり、内容は同じです。

「Channels」（チャネル）›「Add channel」›「Website chat」。設定後は、Web チャットのカードの「⋯」メニューから「View setup steps」を選びます
「Settings」（設定）›「Website chat」

設定は「Set the look」（見た目の設定）、「Add the code to your website」（サイトへのコード追加）、「Check the install」（設置の確認）の 3 ステップで、所要時間は 5 分ほどです。コードを貼り付けたら、サイトを一度開くだけで確認が自動的に完了します。

Web サイト訪問者との会話は、ほかのチャネルのメッセージと一緒にチャット画面に届きます。

見た目

ステップ 1「Set the look」：

項目	内容
Brand name（ブランド名）	チャットウィンドウのタイトルバーに表示されます。空欄の場合、タイトルは「Chat with us」になります。
Greeting（あいさつ）	チャットボタンの横に表示され、6 秒後に自動で閉じます。一文で十分です。
Brand color（ブランドカラー）	チャットボタンとチャットウィンドウのタイトルバーに使われます。
Brand logo（ブランドロゴ）	チャットボタンのアイコンとしても使われます。PNG・JPG・GIF に対応し、正方形の画像がおすすめです。
Chat button position（ボタンの位置）	多くのサイトでは「Bottom right」（右下）に置きます。右下にすでにほかのボタン（カートやページ上部へ戻るボタンなど）がある場合は「Bottom left」（左下）を選びます。
Adjust distance from the screen edges（画面端からの距離）	パソコンとスマートフォンそれぞれで、チャットボタンと画面の左右・下端との距離（px）を設定し、サイト側のボタンと重ならないようにします。

ブランドカラーを選ぶと、Chatbotta がアイコンとタイトル文字を濃い色にするか白にするかを自動で決め、コントラストを確認します。コントラストが不十分な場合は別の色を提案し、ワンクリックで切り替えられます。

右側の「Preview」（プレビュー）では「Desktop」と「Phone」を切り替えて、調整しながら確認できます。「Try website chat in a new tab」を押すと実際にチャットを試せます。設定が済んだら「Save look」を押します。

訪問者がチャットを開いたときに最初に表示される会話は、「On follow」（友だち追加時）トリガーのフローから送られます。ここで設定するあいさつではありません。

Web サイトへの設置

ステップ 2「Add the code to your website」：サイトの構築に使っているサービスを選び、画面の手順に沿って「Copy code」でコードをコピーします。コードにはプロジェクト ID がすでに入っているので、そのまま貼り付けてください。

プラットフォーム	貼り付ける場所
WordPress	「WPCode – Insert Headers and Footers」プラグインをインストールし、Code Snippets › Header & Footer の Footer 欄に貼り付けます。WordPress.com ではプラグインを使えるプランが必要です。
Shopify	オンラインストア › テーマ › ⋯ › コードを編集：theme.liquid の `</body>` の 1 行上。
SHOPLINE	アプリ › カスタムコード › コードを追加で、位置を「下部」にします。管理画面にカスタムコードがない場合（台湾の SHOPLINE ストアの多く）は、マーケティングとトラッキング › トラッキング設定で Google Tag Manager を連携し、GTM で設置します。
CYBERBIZ	サイトの外観 › テーマ管理 › コードエディタ：theme.liquid の `</body>` の 1 行上。
Wix	設定 › カスタムコード：「コードを追加するページ」で「すべてのページ」、「コードを配置する場所」で「Body - 末尾」を選びます。Wix のカスタムコードは、独自ドメインを接続して公開済みのサイトでのみ読み込まれます。
Google Tag Manager	「すべてのページ」（All Pages）で配信するカスタム HTML タグを新規作成し、保存後に「送信」して「公開」します。
その他（HTML）	すべてのページで使われるテンプレートの `</body>` の 1 行上。

コードは次のような形です（必ず Chatbotta の画面からコピーしてください）。

サイトに直接貼り付け
Google Tag Manager

<script>
  window.ChatbottaConfig = { chatbotId: 'YOUR_PROJECT_ID' };
</script>
<script src="https://app.chatbotta.com/webchat-widget.js" async></script>

2 つの <script> ブロックを両方とも貼り付けます。

<script>
  window.ChatbottaConfig = { chatbotId: 'YOUR_PROJECT_ID' };
  var s = document.createElement('script');
  s.src = 'https://app.chatbotta.com/webchat-widget.js';
  s.async = true;
  document.head.appendChild(s);
</script>

GTM 用のコードは 1 つのブロックです。カスタム HTML タグに貼り付けてください。コンテナを送信・公開するまで、サイトにチャットボタンは表示されません。

コードを貼り付けたら「Done, check the install」を押します。

設置の確認

ステップ 3「Check the install」：「Website address」にコードを設置したページのアドレスを入力し、「Check install」を押します。訪問者が初めてそのページを開くと Chatbotta がチャットボタンを検知し、このステップに自動でチェックが入ります。確認結果は次のいずれかです。

Chat button seen on your site（サイトでチャットボタンを確認）： 完了です。「Done」を押します。
The code is on the page（コードはページ上にあります）： そのページを一度開けば確認が完了します。
Your site uses Google Tag Manager（GTM を使用中）： タグが送信・公開済みであることを確かめてから、ページを一度開きます。
The chat code belongs to another project（別プロジェクトのコード）： このプロジェクトのコードに貼り替えます。
Only part of the code is there（コードの一部のみ）： コードは 2 つの script ブロックでできています。コード全体をもう一度コピーして貼り付けます。
No chat code found（コードが見つからない）： コードが body の終わりより前に貼られ、保存または公開されていることを確認します。サイトがキャッシュを使っている場合は、クリアしてから再確認します。
Couldn’t open the address（アドレスを開けない）： アドレスが正しいこと、サイトが公開されている（ログイン不要で見られる）ことを確認します。

その後、「Channels」の Web チャットのカードには「Waiting for a test message」（テストメッセージ待ち）と表示されます。サイトを開いてメッセージを送り、ボットが返信すれば「Connected」（接続済み）になります。

まだ Web サイトがない場合は、ステップ 2 の「No website yet?」にチャットリンクがあります。SNS やボタン、QR コードに載せれば、お客様がリンクを開いてそのままチャットできます。「Open chat link」で試すこともできます。このリンクを開いても、設置の確認は完了しません。

サイトの隅に丸いチャットボタンが表示されます。あいさつを設定している場合はボタンの横に表示され、6 秒後に自動で閉じます。
訪問者はチャットを開くとすぐに入力できます。接続中は読み込み画面が表示され、接続できない場合は反応しないウィンドウのままにせず、「Can’t connect right now」と「Retry」を表示します。
チャットウィンドウ自体の表示言語は訪問者のブラウザに合わせます。英語のブラウザでは英語、それ以外では繁体字中国語になります。ボットの返信は、フローとナレッジの言語のままです。
送信できなかったメッセージには「Not sent」と表示され、訪問者は再送信できます。
同じブラウザで再訪した訪問者は、前回の会話の続きから始められます。

有人対応への引き継ぎ

Web サイトの訪問者は匿名の通りすがりであることが多いものです。会話が有人対応に移ると（フローが「Hand off to a person」（有人対応に引き継ぐ）ステップに到達した場合、またはチャット画面であなたが対応を引き継いだ場合）、チャットウィンドウに「A person will take over this chat」と「Leave a message here and we’ll reply as soon as we can.」が表示されます。チャット画面からの返信は、訪問者のウィンドウに「Support team」として表示されます。

後から連絡できるよう、訪問者に LINE や Messenger で会話を続けてもらうこともできます。ステップ 1 の「When visitors want a person」で設定します。表示されるのは接続済みのチャネルだけです。

LINE 公式アカウントへ引き継ぐ： 訪問者が「Continue on LINE」を押すと、6 桁のコード（30 分間有効）が表示されます。コードをコピーして「Open LINE」を押し、公式アカウントを友だち追加してコードを送ると、Web サイトの会話が LINE に移り、チャットウィンドウに「Linked to LINE」と表示されます。LINE 公式アカウントを複数接続している場合は、「LINE Official Account to hand off to」で引き継ぎ先を選びます。一時停止中のアカウントは選択肢に表示されません。
Facebook Messenger へ引き継ぐ： 接続済みの Facebook ページを選びます。訪問者が「Continue on Messenger」を押すとそのページの Messenger に移動し、連携後はチャットウィンドウに「Linked to Messenger」と表示されます。

会話が移った後も、チーム側はチャット画面で Web サイト上の会話をすべて確認できるため、訪問者が同じ説明を繰り返す必要はなく、その後は LINE または Messenger で会話を続けられます。LINE アカウントや Facebook ページがまだ接続されていない場合、このセクションには「No LINE Official Account or Facebook Page is connected yet. Connect one to turn on hand-off here.」と表示されます。選択していたチャネルの接続が後で解除されると、訪問者にはその選択肢が表示されなくなります。

流れの概要はWeb サイト訪問者を LINE へをご覧ください。

JavaScript API

設置コードが読み込まれると、サイト側から window.Chatbotta を通じてチャットを操作できます。たとえば商品ページでボットにその商品を紹介させたり、会員番号を会話に渡したりできます。ステップ 2 の一番下にある「Advanced: control the chat window with JavaScript」にも例があります。

メソッド	内容
`Chatbotta.open()` / `Chatbotta.close()`	チャットウィンドウを開く／閉じる。サイト独自の「お問い合わせ」ボタンなどにつなげられます
`Chatbotta.triggerFlow('STEP_ID')`	指定したステップからボットが話し始めます。新しい訪問者の場合はこのステップがウェルカムフローの代わりになり、再訪した訪問者の場合は既存の会話の続きになります
`Chatbotta.sendMessage('text')`	訪問者としてメッセージを送信します。ボットは通常のメッセージと同様に返信します
`Chatbotta.setVariables({ field_name: value })`	フィールド名を指定してこの訪問者のフィールドに値を設定し、フロー内のステップで使えるようにします
`Chatbotta.on('ready' \| 'open' \| 'close', fn)`	チャットの準備完了・オープン・クローズ時に独自のコードを実行します

triggerFlow と sendMessage はチャットウィンドウも開きます。開かずにバックグラウンドで準備だけしたい場合は { open: false } を加えます。チャットの準備ができると、ページには chatbotta:ready イベントも送られます。

<script>
  function withChatbotta(fn) {
    if (window.Chatbotta) fn(window.Chatbotta)
    else window.addEventListener('chatbotta:ready', function () { fn(window.Chatbotta) }, { once: true })
  }
  withChatbotta(function (chat) {
    chat.setVariables({ member_id: 'A123' })
    chat.triggerFlow('PASTE_STEP_ID')
  })
</script>

window.Chatbotta は設置コードが読み込まれた時点で使えます。チャットウィンドウの準備ができる前の呼び出しはキューに入り、準備ができ次第、順番に実行されます。

訪問者によるデータの改ざんを防ぐため、値を設定できるのは Web サイトに開放したフィールドだけです。「Fields」（フィールド）パネルでフィールドのアクションメニューを開いて「Let your website set it」を選び、公開してください。対応するのはテキストと数値のフィールドのみで、1 回の呼び出しで最大 20 フィールド、テキストは最大 1,000 文字です。開放されていない、存在しない、または形式が合わないフィールドはスキップされ、ブラウザのコンソールに [Chatbotta] の警告が表示されます。これらの値は訪問者のブラウザから送られるため、権限や割引の判定には絶対に使わないでください。

トラブルシューティング

サイトにチャットボタンが表示されない

ステップ 3「Check the install」でアドレスを確認し、表示された内容に従って対処します
すべてのページで読み込まれる場所にコードがあり、2 つの <script> ブロックが両方あることを確認します
GTM の場合、タグが「すべてのページ」（All Pages）で配信され、コンテナが公開済みであることを確認します（保存だけでは反映されません）
サイトがキャッシュや CDN を使っている場合は、クリアしてから再度試します
ブラウザの開発者ツールのコンソールでエラーを確認します。サイトに Content Security Policy を設定している場合は、app.chatbotta.com を許可する必要があります

チャットボタンがほかのボタンと重なる

「Bottom left」に切り替えるか、「Adjust distance from the screen edges」でパソコンとスマートフォンの距離を調整します。

訪問者に LINE や Messenger の選択肢が表示されない

引き継ぎの選択肢は、担当者が会話を引き継いだときにだけ表示され、接続済みのチャネルだけが一覧に出ます。「Channels」で LINE 公式アカウントまたは Facebook ページが「Connected」になっていることを確認し、ステップ 1 の「When visitors want a person」を確認してください。

JavaScript API が動かない

設置コードの読み込み後に呼び出しているか確認します。または上記の withChatbotta パターンを使います
triggerFlow に渡すステップは公開済みである必要があります
コンソールに [Chatbotta] の警告が出ている場合は、そこに示されたステップ ID やフィールド設定を確認します

チャットは動くのにボットが返信しない場合は、ボットが返信しないときはをご覧ください。

チャネルステータス、再認証、接続解除

LINE 公式アカウントを接続する

Facebook と Instagram を接続する

Web サイトに AI チャットウィンドウを追加する