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

ウェブチャットを作成する

更新日時 2020年 12月 8日

対象製品

すべての製品とプラン
ウェブチャットによるチャットフローを構築して、担当者が訪問者と直接やり取りすることができます。ウェブチャットはウェブサイト上のページにウィジェットとして表示され、訪問者はウィジェットをクリックして貴社の担当者とリアルタイムのコミュニケーションを始めることができます。価格ページの訪問者と営業チームがやり取りするためのウェブチャットを作成したり、ナレッジベース記事の訪問者とサポートチームがやり取りするためのもう1つのウェブチャットを作成したりできます。

注:「アカウントアクセス」権限を持っているユーザーのみがチャットフローを作成および編集できます。

ウェブサイトへの訪問者に自動で応答するボットによるチャットフローを作成する場合は、ボットを作成する方法を参照してください。

live-chat-exampleFacebook Messengerアカウント用のウェブチャットを作成することもできます。Facebook Messenger用のチャットフローを作成する方法をご覧ください。

始める前に

ウェブチャットを作成するにはまず、チャットチャネルをコミュニケーションの受信トレイに接続する必要があります。チャットチャネルでは、チームの空き状況やウィジェットの外観をカスタマイズします。また、HubSpot上でホスティングされていないウェブサイトにウェブチャットを追加する場合は、外部ページにトラッキングコードも追加してからウェブチャットを作成する必要があります。トラッキングコードがインストールされていない場合、ウェブチャットが表示されません

  • HubSpotアカウントにログインした状態で[コミュニケーション]>[チャットフロー]を選択します。
  • 右上の[チャットフローを作成]をクリックします。
  • [ウェブサイト]を選択します。
  • 左側のサイドバーで、[ウェブチャット]オプションを選択します。
    • チャットを訪問者がすぐに開始できるように設定する場合は、[ウェブチャット]を選択します。
    • Service HubのProfessionalアカウントまたはEnterpriseアカウントをご利用で少なくとも3つナレッジベース記事を公開している場合は、[ナレッジベース検索およびウェブチャット]を選択して、ウェブ チャット ウィジェットから直接ナレッジベースを検索できるオプションを追加します。
  • [次へ]をクリックします。
  • アカウントに複数の受信トレイが設定されている場合は、[受信トレイを選択]ドロップダウンをクリックし、別の受信トレイを選択します。
  • チャットフローの言語を英語から変更するには、左側の[言語を選択]ドロップダウンメニューをクリックし、別の言語を選択します。
  • [次へ]をクリックします。
  • コミュニケーションの受信トレイが複数ある場合は、ダイアログボックスで、ドロップダウンメニューをクリックし、特定の共有受信トレイを選択します。

1. 作成 - 歓迎メッセージを作成する

ウェブチャットセットアップの[作成]タブにリダイレクトされます。ここでチャットウィジェットの動作をカスタマイズし、訪問者への挨拶メッセージを作成します。

注:単一ページのアプリにチャットウィジェットを埋め込む場合、またはAPIを使用してウェブチャットをカスタマイズする場合は、開発者ドキュメントでHubSpotコミュニケーションAPIの使い方を参照してください。

  • 訪問者がチャットを開始した時点で最初に表示されるメッセージをカスタマイズするには、[歓迎メッセージを作成]テキストボックスにメッセージを入力します。歓迎メッセージの言語を変更する方法をご覧ください。
  • ウェブチャットにナレッジベース検索バーを追加するには、[ナレッジベース検索を有効化]スイッチをクリックしてオンに切り替えます。
  • コミュニケーションを特定のチームメンバーに自動的に割り当てるには、[自動的にコミュニケーションを割り当て]スイッチをクリックしてオンに切り替えます。次に、ドロップダウンメニューを使用して、コミュニケーションを割り当てるユーザーまたはチームを選択します。コミュニケーションの受信トレイ内の自動割り当てルールの設定方法をご覧ください。

注:自動割り当てルールには、Sales HubまたはService Hubの有料ユーザーのみを含めることができます。

  • Eメールアドレスを訪問者に提供してもらうタイミングを指定するには、[訪問者にEメールアドレスを尋ねる]ドロップダウンメニューをクリックします。コミュニケーションの受信トレイでのコンタクトの作成をご覧ください。
  • [Eメール キャプチャー メッセージ]テキストボックスに、チャットウィジェットが訪問者にEメールアドレスを尋ねる際に表示されるメッセージを入力します。

updated-live-chat-build-tab

  • 右上の[プレビュー]をクリックして、ウェブチャットのプレビューを表示します。

  • 続行するには、下部の[保存]をクリックしてから、左側のサイドバーの[対象]タブをクリックします。

2. 対象 - ウェブチャットの表示位置を決定する

[対象]タブで、ウェブ チャット ウィジェットがウェブサイトページに表示される位置を指定できます。ウェブチャットウィジェットは、訪問者が特定のページURLにアクセスした時点で、または訪問者に関する確認済みの情報に基づいて表示することができます。ターゲティングオプションを組み合わせることで、サイトへの訪問者に合わせてパーソナライズすることもできます。チャットフローで使用できるさまざまなターゲティングオプションとターゲティングルールをご覧ください。

  • 訪問者が特定のウェブサイトURLにアクセスした時点でウェブ チャット ウィジェットを表示するには、[ウェブサイトURL]セクションに進み、次の手順に従います。
    1. 1つ目のドロップダウンメニューをクリックし、[ウェブサイトURL]を選択します。
    2. 2つ目のドロップダウンメニューをクリックし、ターゲティングルールを選択します。
    3. テキストフィールドにルール条件を入力します。website-url-targeting
  • URLに特定のクエリーパラメーターが含まれるウェブサイトページに訪問者がアクセスした時点でウェブチャットウィジェットを表示するには、次の手順を実行します。
    1. 1つ目のドロップダウンメニューをクリックし、[クエリーパラメーター]を選択します。
    2. 1つ目のテキストフィールドに、クエリーパラメーター名を入力します。
    3. 2つ目のテキストフィールドに、クエリーパラメーター値を入力します。query-parameter-targeting
  • 別のルールを追加するには、[ルールを追加]をクリックします。
  • 特定のページ(プライバシーポリシーのページなど)をウェブチャットウィジェットの対象から除外するには、[除外ルールを追加]をクリックします。

特定のコンタクトについて、確認済みの情報に基づいてウェブチャットの対象にすることもできます。訪問者情報に基づいて条件を設定するには、[訪問者の情報および行動]セクションに進み、次の手順に従います。

  • 1つ目のドロップダウンメニューをクリックし、フィルターを選択します。確認済みの特定のコンタクト、または不明な訪問者を対象として絞り込むフィルターを使用することができます。
  • 2つ目のドロップダウンメニューをクリックし、条件を選択します。
  • 別のルールを追加するには、[ルールを追加]をクリックします。
  • 特定のページ(プライバシー ポリシー ページなど)をポップアップフォームの対象から除外するには、[除外ルールを追加]をクリックします。
  • 別のフィルターグループを作成してターゲティングルールを追加するには、[フィルターグループを追加]をクリックします。target-based-on-visitor-behavior
  • 続行するには、下部の[保存]をクリックしてから、左側のサイドバーの[表示]タブをクリックします。
ターゲティングルールに複数のフィルターグループが設定されている場合は、ターゲティングルール内でのAND/ORロジックの仕組みについての詳細をご確認ください。

3. 表示 - ウェブチャットの外観をカスタマイズする

[表示]タブで、チャット見出し、チャットウィジェットの動作、チャットウィジェットのトリガーなど、ウェブチャットの表示設定をカスタマイズします。ウェブチャットのアクセントカラーとページ上の配置を編集するには、受信トレイ設定でチャットウィジェットの外観をさらにカスタマイズする方法を参照してください。

  • [チャット見出し]ドロップダウンメニューをクリックし、チャットウィジェットに表示される名前とアバターを選択します。
    • カスタムブランディング:一般的なチーム名と画像を表示します。プラスアイコンaddをクリックして画像をアップロードし、表示する名前を入力します。
    • 特定のユーザーおよびチーム:表示する名前の横にあるチェックボックスを選択してオンにします。3人以上のユーザーを選択した場合、ユーザーがランダムに表示されます。チャットフロー言語が表示名にどのように影響するかをご覧ください。
    • コンタクト担当者:[新規訪問者の場合]ドロップダウンメニューをクリックし、チャットを開始した新規訪問者または未割り当ての訪問者に対する代替オプションを選択します。edit-live-chat-heading
  • [チャット画面の動作]セクションで、デスクトップまたはモバイル画面でのウィジェットの動作を制御します。

注:訪問者がチャットフローを最小化した場合、24時間後にhs-messages-hide-welcome-message Cookieが有効期限切れになるまで、HubSpotはすべてのページとチャットフロー全体にわたって訪問者の選択に従います。この動作はチャット表示動作の設定と競合する可能性があるため、チャットフローが想定通りにポップアップ表示されないことがあります。

    • [デスクトップ]タブで、優先する表示動作の横にあるラジオボタンを選択します。
      • 歓迎メッセージをポップアップで開く:チャットウィジェットの上にある歓迎メッセージのプレビューを表示します。
      • チャットランチャーのみを表示:チャットランチャーのみを表示して、訪問者がクリックしないとチャットウィンドウを開くことができないようにします。
      • 歓迎メッセージを表示し、トリガー適合時にチャットウィジェットをポップアップで開く:歓迎メッセージのプレビューを表示してから、トリガーが満たされた時点、または訪問者がウィジェットをクリックした時点のいずれかが最初に発生したときに、チャットを開きます。
    • [モバイル]タブで、優先する表示動作の横にあるラジオボタンを選択します。
      • 歓迎メッセージをポップアップで開く:チャットウィジェットの上にある歓迎メッセージのプレビューを表示します。
      • チャットランチャーのみを表示:チャットランチャーのみを表示して、訪問者がクリックしないとチャットウィンドウを開くことができないようにします。chat-display-behavior-desktop-and-mobile

注:モバイルデバイスでチャットフローを無効にするには、ターゲティング設定で、モバイルデバイスでページが表示されたときにチャットフローを非表示にする除外ルールを追加することができます。

  • チャットウィジェットをページに読み込むタイミングを指定することもできます。チャット表示トリガーの横にあるチェックボックスをオンにします。
    • 離脱の意思があるとき:訪問者のマウスがブラウザーウィンドウの上部に移動した時点でウェブ チャット ウィジェットをトリガーします。
    • ページでの滞在時間(秒):訪問者がページにアクセスしている間に指定された時間(秒単位)が経過した時点でウェブ チャット ウィジェットをトリガーします。

注:ページの読み込みにかかる時間を短縮するために、HubSpotでは5秒以上の遅延を設定することを推奨しています。サイトのページ読み込み時間に関する詳細をご覧ください。 

    • ページのスクロールの割合:訪問者がページ上の特定のポイントまでスクロールした時点でウェブチャットウィジェットをトリガーします。
  • 続行するには、下部の[保存]をクリックし、左側のサイドバーの[オプション]タブをクリックします。

4. オプション

[オプション]タブで、ウェブチャットの言語設定をカスタマイズします。アカウントの一般データ保護規則(GDPR)設定を有効にしている場合、ウェブチャットをカスタマイズして、ウェブサイトの訪問者にコミュニケーションへの同意を求める手順を含めることもできます。

  • ウェブ チャット ウィジェットのCookie同意テキストを有効にするには、[チャットのCookieを収集することに同意]スイッチをクリックしてオンに切り替えます。バナーに表示されるCookieへの同意テキストは、カスタマイズできません
  • Cookie同意テキストを有効にすると、同意バナーが表示されるタイミングを選択できるようになります。
    • 訪問者がチャットを開始する前に同意バナーを表示するには、[訪問者がチャットを開始する前に同意バナーを表示]ラジオボタンを選択します。
    • 訪問者がページを離れようとしているときにバナーを表示するには、[訪問者がページを離れそうなときに同意バナーを表示]ラジオボタンを選択します。

consent-banner-with-display-options

注:訪問者の識別APIを通じて識別された訪問者には、チャットウィジェット内でCookieの収集同意に関するGDPR設定が表示されません。これは、HubSpotによってmessagesUtk Cookieが削除されないためです。アナリティクスCookieのバナーへの影響はありません。訪問者ID APIの詳細は、HubSpotの開発者ドキュメントを参照してください。

  • 訪問者からデータの処理に関する同意を得るには、[データの処理への同意]をクリックしてオンに切り替えます。
    • [同意のタイプ]ドロップダウンメニューをクリックし、次のいずれかを選択します。
      • 明示的な同意が必要:訪問者がメッセージを送信するには、[同意する]をクリックする必要があります。
      • 正当な利害関係:訪問者は、チャットの開始を以って同意したものと見なされます。データ処理に関する同意のテキストは引き続き表示されますが、チャットを開始する際に[同意する]をクリックする必要はありませんupdated-chat-widget
    • [処理同意テキスト]フィールドに、HubSpotの既定のテキストが表示されます。このテキストを編集して、訪問者に関する個人情報の保存および処理が必要な理由を説明することができます。同意テキストをカスタマイズした後、既定のテキストに戻す場合は、[HubSpot提供の既定のテキストにリセット]をクリックします。consent-to-process-default-text
  • チャットを開始したときに、訪問者を特定のサブスクリプションタイプにオプトインするには、[コミュニケーション同意]スイッチをクリックしてオンにします。
    • [サブスクリプションタイプ]ドロップダウンメニューをクリックし、訪問者をオプトインするサブスクリプションタイプを選択します。
    • [チェックボックスラベル]テキストフィールドを使用して、顧客が同意するコミュニケーションタイプについて説明します。chatflows-live-chat-consent-to-communicate

注:こうした機能はHubSpotに組み込まれていますが、状況に応じた最適なコンプライアンス上のアドバイスについては自社の法務部門にご相談ください。

ウェブチャットの設定が完了したら、右上にあるスイッチをクリックしてオンに切り替えてウェブサイトページに追加します。ウェブサイト訪問者とのチャットを開始する準備ができたら、コミュニケーションの受信トレイで受信メッセージに対応する方法を参照してください。

enable-chatflow