メインコンテンツにスキップ
お客さまへの大切なお知らせ:膨大なサポート情報を少しでも早くお客さまにお届けするため、本コンテンツの日本語版は人間の翻訳者を介さない自動翻訳で提供されております。正確な最新情報については本コンテンツの英語版をご覧ください。

コミュニケーションの受信トレイでチャットチャネルを接続してカスタマイズする

更新日時 2025年9月15日

以下の 製品でご利用いただけます(別途記載されている場合を除きます)。

チャットチャネルをコミュニケーションの受信トレイに接続すると、訪問者がウェブサイトからすぐに、チームとコミュニケーションを開始できます。チームのメンバーは リアルタイムで顧客とチャット できます。あるいは、事前に設定された応答を送信して情報を収集するように ボット を設定することもできます。

チャットウィジェットの外観(ウィジェットの色やアバターなど)をカスタマイズしたり、チームの空き状況を設定したりすることもできます。

既存のチャットフローをヘルプデスクに移行する方法をご覧ください。

チャットチャネルを接続する

  1. HubSpotアカウントにて、上部のナビゲーションバーに表示される設定アイコンsettingsをクリックします。
  2. 左側のサイドバーメニューで、[ ヘルプデスク> 受信トレイ受信トレイ & ]に移動します。複数の受信トレイが設定されている場合、[現在のビュー]ドロップダウンメニューで、チャネルを接続する受信トレイを選択します。
  3. [チャネルを接続]をクリックします。
  4. [チャット]の右横にある[編集」をクリックします。
  5. [ウェブ]または[モバイル]を選択します。
  6. チャットウィジェットの色は、既定ではアカウントの ブランディング設定に合わせて設定されています。色をカスタマイズするには 、画面に表示されている他の色を選択するか、 16進数の値を手動で入力します。あるいは、16進数の値フィールドの右側にある カラーパレットをクリックしてお好きな色を調整することもできます。
  7. [フォント ]ドロップダウンメニューをクリックし、 フォントを選択します。

    ヘルプデスクチャネルの表示設定
  8. [次へ]をクリックします。
  9. [ 空き状況 ]ページでは、チームがチャットに対応可能と表示されるタイミングを設定し、訪問者の期待値を知らせます。空き状況オプションを選択するには、次の手順に従います。
    • ユーザーの空き状況に基づく:訪問者は、 割り当てルール で割り当てられた少なくとも1人のチームメンバーが対応可能な場合にチームとチャットできます。
    • チャット営業時間に基づく:チームがチャットに対応できることを示す、定期的な曜日と時間を設定します。ボットを作成して使用する場合は、受信トレイの設定に基づいて ボットの空き状況の設定方法をご確認ください ドロップダウンメニュー を使用して、チームの勤務時間を設定します。新しい日時の範囲を追加するには、[+時間を追加]をクリックします。
    • チャットは24時間無休で利用可能:チームが常にチャットに対応できることを表示する場合は、このチェックボックスをオンにします。

      ヘルプデスクチャネルチャットis-24-7
  10. [ 空き状況の動作 ]セクションで、チームの空き状況に基づいてチャット動作を設定し、訪問者にいつ返信できるかを知らせます。オプションを選択します。
    • チームの勤務時間内のチャット動作を設定するには、[対応可能]タブをクリックします。[通常の返信所要時間を表示]ドロップダウンメニューをクリックし、返信時間を選択します。
    • チームが離席中の場合のチャット動作を設定するには、[離席中]タブをクリックします。[離席中メッセージを表示]ドロップダウンメニューをクリックし、離席中のモードウィジェットの動作を選択します。

      ヘルプデスクチャネル-チームが離席中
    • チームが対応できない場合の訪問者への対応を設定するには、[ オフライン動作を設定]タブのドロップダウンメニューをクリックして、営業時間外にサイトにアクセスした訪問者に対し、[戻る時間を表示]するか、[離席中メッセージを表示]するか、あるいは[チャット起動メニューを非表示]にするかを選択します。
    • チームの対応量が最大に達した場合の訪問者への対応を設定するには(Service Hub Enterpriseのみ)、[全てのチームメンバーが最大対応量に達した場合]ドロップダウンメニューをクリックし、待機メッセージを表示するか、チャットランチャーを非表示にするか、あるいは何もしないかを選択します。ユーザーのチャット対応量上限の設定について詳細をご確認ください。
  11. [次へ]をクリックします。
  12. チャットフローがまだ作成されていない場合は、チャット見出し、歓迎メッセージ、割り当てを設定するよう求められます。
    • [チャット見出し]ドロップダウンメニュー をクリックし、チャットウィジェットに表示する 名前アバター を選択します。
    • テキストボックスに ウェルカムメッセージを入力します。

      ヘルプデスク-コネクトチャネル-create-first-chatflow
    • [ 受信した コミュニケーション を割り当てる]スイッチをオンに切り替えて、コミュニケーションの割り当て先となるユーザーおよびチームを選択します。
    • [割り当て先]ドロップダウンメニューをクリックし、割り当てオプションを選択します。
        • 特定のユーザーおよびチーム:受信したメッセージを、選択したユーザーまたはチームに割り当てます。[特定のユーザーおよびチーム]ドロップダウンメニューからユーザーまたはチームを選択します。
        • コンタクト担当者:受信したメッセージをコンタクト担当者に割り当てます。コンタクトにはレコードに担当者が割り当てられていて、Cookieで追跡可能である必要があります。担当者がオフラインの場合、メッセージは訪問者の担当者にEメールで送信されます。

      注: 受信メッセージの自動割り振り先として可能なのは 、Sales HubまたはService Hub のシートが割り当てられているユーザーのみです。 

  13. チャットウィジェットの上に歓迎メッセージのプレビューを表示するには、チェックボックスを選択して、 歓迎メッセージをポップアップで開きます。
  14. [次へ]をクリックします。
  15. プレビューの上部にあるデバイスごとのボタンを使用して、チャットウィジェットが異なるデバイス上でどのように表示されるかをプレビューします。
  16. [ 公開]をクリックします。ただし、外部ウェブサイト上でチャットウィジェットを使用する場合は、ウェブサイトページに HubSpotのトラッキングコードを追加する必要があります
      • 手動でコードを追加するには、[ コピー</body>]をクリックし、チャットウィジェットを表示する全てのページのタグ の直前にコードを追加します
      • ページへのコード追加にあたりサポートが必要な場合、[次の手順を表示]ドロップダウンメニューをクリックし、ウェブサイトタイプを選択します。externalLinkアイコンをクリックして、ブラウザー上の別のタブに手順を表示します。ウェブサイトをWordPress上でホスティングする場合は、[ サイトをWordPress上にホスティングする]をクリックし、表示される 手順に従ってWordPressプラグイン をインストールします。

    注: ウェブサイトがWix上でホスティングされている場合、特定のページをチャットフローの対象として設定するには、 チャットウィジェットSDK の使用が必要になる場合があります。Wixでホスティングされているウェブサイトへの トラッキングコードの追加 についてもっと詳しく。

チャットチャネルの設定を編集する

チャットチャネルをコミュニケーションの受信トレイに接続すると、表示の色、フォント、位置を含めて 外観をカスタマイズできます。また、動作を調整したり、スクロール、ページ滞在時間、デバイスタイプなど、訪問者に表示されるタイミングを制御するトリガーを設定することもできます。

表示色とフォントをカスタマイズ

  1. HubSpotアカウントにて、上部のナビゲーションバーに表示される設定アイコンsettingsをクリックします。
  2. 左のサイドバーメニューで、[受信トレイとヘルプデスク]>[受信トレイ]に移動します。複数の受信トレイが設定されている場合は、[現在のビュー]ドロップダウンメニューで、チャットを接続する受信トレイを選択します。
  3. チャットチャネルにカーソルを合わせて、[編集]をクリックします。
  4. [設定]タブで、ウィジェットの外観(アクセントカラーやフォントなど)を編集します。また、[チャット履歴]で、チャット終了後にチャットの内容を自動的に送信するEメールアドレスも編集できます。
ヘルプデスクのセットアップ-チャットの表示-フォント-トランスクリプト

チャットウィジェットの位置をカスタマイズ

ウェブサイトページ上でのチャットウィジェットの表示位置と、訪問者による再配置の方法を選択します。

  1. HubSpotアカウントにて、上部のナビゲーションバーに表示される設定アイコンsettingsをクリックします。
  2. 左のサイドバーメニューで、[受信トレイとヘルプデスク]>[受信トレイ]に移動します。複数の受信トレイが設定されている場合は、[現在のビュー]ドロップダウンメニューで、チャットを接続する受信トレイを選択します。
  3. チャットチャネルにカーソルを合わせて、[編集]をクリックします。
  4. 左のサイドバーメニューで[ ウェブチャット]をクリックします。
  5. チャットウィジェットを左側または右側のどちらに表示するかを選択するには、[ チャットウィジェットの配置]セクションで[ ]または [右]を選択します。
  6. 訪問者がチャットウィジェットをドラッグして再配置できるようにするには、[ チャットウィジェットの移動]スイッチをオンに切り替えます。

    ヘルプデスクチャットチャネル設定

ボット または ウェブチャット エディターでチャットフローの構成と外観を編集する方法をご確認ください。

モバイルSDK設定の編集

モバイルチャットSDKを使用してモバイルチャットフローを編集する場合は、設定ファイルにアクセスしてiOSとAndroidの通知を管理できます。 詳しくは、HubSpotのチャットフローとモバイルアプリの連携に関するナレッジベース記事をご確認ください。

チャットチャネルの空き状況をカスタマイズ

チームの空き状況を表示し、訪問者の期待値を管理しましょう。

  1. HubSpotアカウントにて、上部のナビゲーションバーに表示される設定アイコンsettingsをクリックします。
  2. 左のサイドバーメニューで、[受信トレイとヘルプデスク]>[受信トレイ]に移動します。複数の受信トレイが設定されている場合は、[現在のビュー]ドロップダウンメニューで、チャットを接続する受信トレイを選択します。
  3. チャットチャネルにカーソルを合わせて、[編集]をクリックします。
  4. [空き状況 ]タブに移動し、オプションを選択します。
    • ユーザーの空き状況に基づく:訪問者は、 割り当てルール で割り当てられた少なくとも1人のチームメンバーが対応可能な場合にチームとチャットできます。
    • チャット営業時間に基づく:チームがチャットに対応できることを示す、定期的な曜日と時間を設定します。ドロップダウンメニュー を使用して、チームの勤務時間を設定します。新しい日時の範囲を追加するには、[+時間を追加]をクリックします。

    conversations-inbox-user-availability-conversations-inbox-user-availability(コミュニケーション受信トレイユーザーの可用性)
    • チャットは24時間無休で利用可能:チームが常にチャットに対応できることを表示する場合は、このチェックボックスをオンにします。
  5. チャットフローの空き状況の動作を設定し、返信を期待できる時間を訪問者に知らせます。オプションを選択します。
    • チームが対応可能な場合にチャットを表示するには、[対応可能]タブをクリックします。[通常の返信所要時間を表示]ドロップダウンメニューをクリックし、返信時間を選択します。

    ヘルプデスク-チャット-チャネル-空き状況-設定
    • チームが離席中であるときにチャットを表示するには、[離席中]タブをクリックします。[離席中メッセージを表示]ドロップダウンメニューをクリックし、ウィジェットの動作を選択します。
    • チームが対応できない場合にチャットを表示するには、[勤務時間外]をクリックし、[ オフライン動作を設定 ]ドロップダウンメニューをクリックして、営業時間外にサイトにアクセスした訪問者の返却時間を表示するか、離席中のメッセージを表示するか、またはチャット起動メニューを非表示にするかを選択します。
    • チームの対応量が最大に達した場合(Service Hub Enterpriseのみ)の訪問者の対応を設定するには、[全てのチームメンバーが最大対応量に達した場合]ドロップダウンメニューをクリックし、待機メッセージを表示するか、チャットランチャーを非表示にするか、何もしないかを選択します。ユーザーのチャット対応量制限の設定について詳しくご確認ください。
  6. 左下の[ 保存]をクリックします。

ルールベースのチャットボットまたはウェブチャットエディターの [表示 ]タブで、歓迎メッセージやアバターなどの追加のチャットフロー設定をカスタマイズできます ウェブチャット、ルールベースのチャットフロー、または モバイルチャットフローの外観と動作のカスタマイズについて詳細をご確認ください。

チャネルとコミュニケーションの受信トレイの接続について詳細をご確認ください。

この記事はお役に立ちましたか?
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。