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

チャットチャネルがコミュニケーションの受信トレイに接続されている場合、訪問者はウェブサイトからチームとのコミュニケーションを開始できます。チームメンバーは リアルタイムで顧客とチャットしたり 、 ルールベースのチャットボット をセットアップしてプリセットの応答を送信したり、情報を収集したりできます。

この記事では、チャットチャネルをコミュニケーションの受信トレイに接続する方法、チャットウィジェットの外観(ウィジェットの色やアバターなど)をカスタマイズする方法、チームの空き状況を設定する方法を説明します。

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

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

1. HubSpotアカウントにて、上部のナビゲーションバーに表示される設定アイコンsettingsをクリックします。
2. 左側のサイドバーメニューで、[ ヘルプデスク> 受信トレイ受信トレイ & ]に移動します。複数の受信トレイが設定されている場合、［現在のビュー］ドロップダウンメニューで、チャネルを接続する受信トレイを選択します。
3. ［チャネルを接続］をクリックします。
4. ［チャット］の右横にある［編集」をクリックします。
5. ［ウェブ］または［モバイル］を選択します。[次へ]をクリックします。 
6. チャットウィジェットの色は、デフォルトではアカウントの ブランディング設定に合わせて設定されています。色をカスタマイズするには、 プリセットの色 を選択するか、 16進数の値を手動で入力するか、 カラーパレット をクリックしてカスタム色を選択します。
7. [フォント ]ドロップダウンメニューをクリックし、 フォントを選択します。
   
   
   
8. [次へ]をクリックします。
9. [ 空き状況 ]ページでは、チームがチャットに対応可能と表示されるタイミングを設定し、訪問者の期待値を知らせます。空き状況オプションを選択するには、次の手順に従います。
   • ユーザーの空き状況に基づく:訪問者は、 割り当てルール で割り当てられた少なくとも1人のチームメンバーが対応可能な場合にチームとチャットできます。
   • チャット営業時間に基づく：チームがチャットに対応できることを示す、定期的な曜日と時間を設定します。ボットを作成して使用する場合は、受信トレイの設定に基づいて ボットの空き状況の設定方法をご確認ください 。 ドロップダウンメニュー を使用して、チームの勤務時間を設定します。新しい日時の範囲を追加するには、［+時間を追加］をクリックします。
   • チャットは24時間無休で利用可能:チームが常にチャットに対応できることを表示する場合は、このチェックボックスをオンにします。
     
     
10. [ 空き状況の動作 ]セクションで、チームの空き状況に基づいてチャット動作を設定し、訪問者にいつ返信できるかを知らせます。オプションを選択します。
    
    • チームの勤務時間内のチャット動作を設定するには、［対応可能］タブをクリックします。［通常の返信所要時間を表示］ドロップダウンメニューをクリックし、返信時間を選択します。
    • チームが離席中の場合のチャット動作を設定するには、［離席中］タブをクリックします。[離席中メッセージを表示]ドロップダウンメニューをクリックし、離席中のモードウィジェットの動作を選択します。
      
      
      
    • チームが対応できない場合の訪問者への対応を設定するには、[ オフライン動作を設定]タブのドロップダウンメニューをクリックして、営業時間外にサイトにアクセスした訪問者に対し、[戻る時間を表示]するか、[離席中メッセージを表示]するか、あるいは[チャット起動メニューを非表示]にするかを選択します。
    • チームの対応量が最大に達した場合の訪問者への対応を設定するには（Service Hub Enterpriseのみ）、［全てのチームメンバーが最大対応量に達した場合］ドロップダウンメニューをクリックし、待機メッセージを表示するか、チャットランチャーを非表示にするか、あるいは何もしないかを選択します。ユーザーのチャット対応量上限の設定について詳細をご確認ください。
11. ［次へ］をクリックします。
12. チャットフローがまだ作成されていない場合は、チャット見出し、歓迎メッセージ、割り当てを設定するよう求められます。
    
    • [チャット見出し]ドロップダウンメニュー をクリックし、チャットウィジェットに表示する 名前 と アバター を選択します。
    • テキストボックスに ウェルカムメッセージを入力します。
      
      
      
    • [ 受信した コミュニケーション を割り当てる]スイッチをオンに切り替えて、コミュニケーションの割り当て先となるユーザーおよびチームを選択します。
    • [割り当て先]ドロップダウンメニューをクリックし、割り当てオプションを選択します。
      • 特定のユーザーおよびチーム:受信したメッセージを、選択したユーザーまたはチームに割り当てます。［特定のユーザーおよびチーム］ドロップダウンメニューからユーザーまたはチームを選択します。
      • コンタクト担当者:受信したメッセージをコンタクト担当者に割り当てます。コンタクトにはレコードに担当者が割り当てられていて、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. [設定 ]タブで、アクセント色やフォントなど、ウィジェットの外観を編集します。 
5. 訪問者がメッセージにファイルを添付できるようにするには、[添付ファイル]スイッチをオンに切り替えます。特定のページで添付ファイルを無効にするには、チャット ウィジェット SDKの使用方法について詳細をご確認ください。 
6. 自動チャット履歴を有効にするには、次の手順に従います。
   • [チャット履歴 ]チェックボックスをオンにします。
   • [ 送信元 ]ドロップダウンメニューをクリックし、チャット履歴の送信元 E メールアドレス を選択します。 
   • チャット履歴は、コミュニケーションがクローズされた後にチャットを開始したコンタクトにEメールで送信されます。 

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

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

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

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

モバイルSDK設定の編集

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

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

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

1. HubSpotアカウントにて、上部のナビゲーションバーに表示される設定アイコンsettingsをクリックします。
2. 左のサイドバーメニューで、［受信トレイとヘルプデスク］>［受信トレイ］に移動します。複数の受信トレイが設定されている場合は、［現在のビュー］ドロップダウンメニューで、チャットを接続する受信トレイを選択します。
3. チャットチャネルにカーソルを合わせて、［編集］をクリックします。
4. [空き状況 ]タブに移動し、オプションを選択します。
   • ユーザーの空き状況に基づく:訪問者は、 割り当てルール で割り当てられた少なくとも1人のチームメンバーが対応可能な場合にチームとチャットできます。割り当てられたメンバーが対応できない場合、訪問者はメッセージを送信できません。
   • チャット営業時間に基づく：チームがチャットに対応できることを示す、定期的な曜日と時間を設定します。ドロップダウンメニュー を使用して、チームの勤務時間を設定します。新しい日時の範囲を追加するには、［+時間を追加］をクリックします。
   
   
   
   • チャットは24時間無休で利用可能：チームが常にチャットに対応できることを表示する場合は、このチェックボックスをオンにします。
5. チャットフローの空き状況の動作を設定し、返信を期待できる時間を訪問者に知らせます。オプションを選択します。
   • チームが対応可能な場合にチャットを表示するには、［対応可能］タブをクリックします。さらに、[ 通常の返信所要時間を表示 ]ドロップダウンメニューをクリックし、返信までの所要時間の見込みを訪問者に知らせます。
   
   
   
   • チームが離席中であるときにチャットを表示するには、［離席中］タブをクリックします。次に、[離席中メッセージを表示 ]ドロップダウンメニューをクリックし、 ウィジェットの動作を選択します。
   • チームの勤務時間外の訪問者の対応を設定するには、[ 勤務時間外]タブをクリックします。次に、[ オフライン動作を設定 ]ドロップダウンメニューをクリックし、営業時間外にサイトにアクセスした訪問者が、返却時間を表示するか、離席中のメッセージを表示するか、あるいはチャット起動メニューを非表示にするかを選択します。

   注: 訪問者が チームの勤務時間外にメッセージを送信することはできません。

   • チームの対応量が最大に達した場合（Service Hub Enterpriseのみ）の訪問者の対応を設定するには、［全てのチームメンバーが最大対応量に達した場合］ドロップダウンメニューをクリックし、待機メッセージを表示するか、チャットランチャーを非表示にするか、何もしないかを選択します。ユーザーのチャット対応量制限の設定について詳しくご確認ください。
6. 左下の[ 保存]をクリックします。

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

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