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

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

更新日時 2025年8月22日

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

すべての製品とプラン

ウェブチャットによるチャットフローを構築して、担当者が訪問者と直接やり取りすることができます。ウェブチャットはウェブサイトページにウィジェットとして表示され、訪問者はチームのだれかとリアルタイムでコミュニケーションを始めることができます。

例えば、価格ページの訪問者と営業チームがやり取りするためのウェブチャットを作成したり、ナレッジベース記事の訪問者とサポートチームがやり取りするためのもう1つのウェブチャットを作成したりできます。

顧客対応エージェント または ルールベースのチャットボットの作成について詳細をご確認ください。

アクセス権限が必要 チャットフローを作成および編集するには、 チャットフロー権限 が必要です。



live-chat-widget

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

チャットウィジェットをセットアップする

ウェブチャットフローを初めて作成する場合は、チャットウィジェットをセットアップするように求められます。チームの空き状況、チャットフローの動作、外観をカスタマイズします。チャットウィジェットを設定済みの場合は、チャットフローの作成方法をご確認ください。

また、HubSpotでホスティングされていないウェブサイトにウェブチャットを追加する場合は、ウェブチャットを作成する前に外部ページにトラッキングコードを追加する必要があります。追跡コードがインストールされていない場合、ウェブチャットは表示されません。

  1. HubSpotアカウントにて、[サービス]>[チャットフロー]の順に進みます。
  2. 右上の[チャットフローを作成]をクリックします。
  3. [ウェブサイト]を選択します。
  4. 初めてチャットフローを作成する場合は、チャットウィジェットをセットアップする必要があります。ダイアログボックスで、[ チャットをセットアップ]をクリックします。
  5. [ 表示 ]タブで、アクセント色を選択します。
  6. [次へ]をクリックします。
  7. [ チャットフロー ]タブで、チャット名と動作をカスタマイズします。
    • [チャット見出し]ドロップダウンメニュー をクリックし、チャットウィジェットに表示する 名前アバター を選択します。
    • テキストボックスに ウェルカムメッセージを入力します。
    • [ 受信したチケットの割り当て先]ドロップダウンメニュー をクリックし、チケットの割り当て先となるユーザーおよびチームを選択します。
  8. [次へ]をクリックします。
  9. [ 空き状況 ]タブでは、チームがチャットに対応可能と表示されるタイミングを設定し、訪問者の期待値を通知します。空き状況オプションを選択するには、次の手順に従います。
    • ユーザーの空き状況に基づく:訪問者は、 割り当てルール で割り当てられた少なくとも1人のチームメンバーが対応可能な場合にチームとチャットできます。
  10. チャット営業時間に基づく:チームがチャットに対応できることを示す、定期的な曜日と時間を設定します。ボットを作成して使用する場合は、受信トレイの設定に基づいて ボットの空き状況の設定方法をご確認ください ドロップダウンメニュー を使用して、チームの勤務時間を設定します。新しい日時の範囲を追加するには、[+時間を追加]をクリックします。
  11. チャットは24時間無休で利用可能:チームが常にチャットに対応できることを表示する場合は、このチェックボックスをオンにします。
  12. チャットフローの空き状況の動作を設定し、返信を期待できる時間を訪問者に知らせます。オプションを選択します。
    • チームが対応可能な場合にチャットを表示するには、[対応可能]タブをクリックします。[通常の返信所要時間を表示]ドロップダウンメニューをクリックし、返信時間を選択します。
    • チームが離席中であるときにチャットを表示するには、[離席中]タブをクリックします。[離席中メッセージを表示]ドロップダウンメニューをクリックし、ウィジェットの動作を選択します。
    • チームが対応可能でない場合にチャットを表示するには、[オフライン動作を設定]タブのドロップダウンメニューをクリックして、訪問者が営業時間外にサイトにアクセスした場合に戻ってくる時間を表示するか、離席中メッセージを表示するか、それともチャット起動メニューを非表示にするかを選択します。
    • チームの対応量が最大に達した場合(Service Hub Enterpriseのみ)の訪問者の対応を設定するには、[全てのチームメンバーが最大対応量に達した場合]ドロップダウンメニューをクリックし、待機メッセージを表示するか、チャットランチャーを非表示にするか、何もしないかを選択します。ユーザーのチャット対応量制限の設定について詳しくご確認ください。
  13. [次へ]をクリックします。
  14. プレビューの上部にあるデバイスごとのボタンを使用して、チャットウィジェットが異なるデバイス上でどのように表示されるかをプレビューします。
  15. [ 公開]をクリックします。ただし、外部ウェブサイト上でチャットウィジェットを使用する場合は、ウェブサイトページに HubSpotのトラッキングコードを追加する必要があります

チャットフローを作成

  1. HubSpotアカウントにて、[サービス]>[チャットフロー]の順に進みます。
  2. 右上の[チャットフローを作成]をクリックします。
  3. [ ウェブサイト ] を選択します。
  4. [ワークスペース]ページで、次の操作を行います。
    • ドロップダウンメニューをクリックして受信トレイまたはヘルプデスクを選択します。 選択できるのはチャネルが接続されている受信トレイのみです。チャネルと受信トレイの接続について詳細をご確認ください
    • チャットフローの言語を英語から変更するには、[言語を選択]ドロップダウンメニューをクリックし、別の言語を選択します。
    • [次へ]をクリックします。
  5. [チャットフロー]ページで、[ライブエージェント]を選択します。
  6. [ ナレッジベース ]ページでは、ナレッジベースの参照検索バーをウェブチャットに追加できます。[ ナレッジベース検索を有効化 ]スイッチをオンに切り替え、[ ナレッジベース ]ドロップダウンメニューをクリックしてナレッジベースを選択または作成します。 ナレッジベースの参照とウェブチャットでの検索についての詳細をご確認ください。
  7. [作成]をクリックします。

チャットフローの設定を行う

チャットフローを作成したら、[ チャット]タブが表示されます。ここでは、ウェブチャットの動作をカスタマイズしたり、訪問者を歓迎するウェルカムメッセージを作成したりできます。

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

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

割り当て

  • 受信したコミュニケーションを特定のメンバーに割り振りするには、[コミュニケーションの自動割り当て]をクリックしてセクションを展開し、[コミュニケーションの自動割り当て]スイッチをクリックしてオンに切り替えます。ドロップダウンメニューを使用して、コミュニケーションの割り当て先となるユーザーまたはチームを選択します。詳しくは、コミュニケーションの受信トレイまたはヘルプデスクでの割り振りルールの設定をご確認ください。

注: 割り振りルールに含めることができるのは 、Sales Hubまたは Service Hub の有料シートが割り当てられ ているユーザーのみです。

パーソナライズ

  • 訪問者が初めてチャットを開始したときに表示されるメッセージをカスタマイズするには、[歓迎メッセージ]をクリックしてセクションを展開し、[歓迎メッセージを作成]テキストボックスにテキストを入力します。歓迎メッセージの言語を変更する方法をご覧ください。
  • Eメールアドレスを提供するように訪問者に求めるタイミングを指定するには、[Eメールキャプチャー]をクリックしてセクションを展開します。[訪問者をEメールアドレスに依頼する]ドロップダウンメニューをクリックし、オプションを選択し、訪問者のEメールアドレスを尋ねるときに表示されるメッセージを入力します。

陳列

  • [ チャットアバターを選択 ]セクションをクリックして展開し、[ チャット見出し]ドロップダウンメニューをクリックして、チャットウィジェットに表示する名前とアバターを選択します。
    • カスタムブランディング:一般的なチーム名とイメージを表示します。
      • add プラスアイコンをクリックして画像またはGIFをアップロードし、表示する 名前を入力します。
      • ユーザーの名前やアバターの代わりに、カスタムブランディングをチャットコミュニケーション全体に適用するには、[エージェントのエイリアスとしてコミュニケーション全体でカスタムブランディングを使用]チェックボックスをオンにします。カスタムブランディングは、チャットの文字起こしにも表示されます。
      • [チャット画面の動作]セクションで、パソコンまたはモバイル画面でのウィジェットの動作を制御します。

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

    • [デスクトップ]タブで、使用する表示動作を選択します。
      • 歓迎メッセージをポップアップで開く:チャットウィジェットの上に歓迎メッセージのプレビューを表示します。
      • チャット起動メニューのみを表示:チャット起動メニューのみを表示して、訪問者がクリックしたときのみチャットウィンドウを開くようにします。
      • 歓迎メッセージを表示し、トリガー適合時にチャットウィジェットをポップアップで開く:歓迎メッセージのプレビューを表示し、トリガー条件が満たされたとき、または訪問者がウィジェットをクリックしたときのいずれかが最初に発生した時点でチャットを開きます。
    • 選択されている表示動作によっては、チャットウィジェットをページに読み込むタイミングを指定することもできます。チャット表示トリガーの横にあるチェックボックスをオンにします。選択したトリガーはパソコン、タブレット、モバイルで適用されます。
      • 離脱の意思があるとき:訪問者のマウスがブラウザーウィンドウの上部に移動した時点でウェブ チャット ウィジェットをトリガーします。
      • ページでの滞在時間(秒):訪問者がページにアクセスしている間に指定された時間(秒単位)が経過した時点でウェブ チャット ウィジェットをトリガーします。

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

      • ページのスクロールの割合:訪問者がページ上の特定のポイントまでスクロールした時点でウェブ チャット ウィジェットをトリガーします。
    • [モバイル]タブで、使用する表示動作を選択します。
      • 歓迎メッセージをポップアップで開く:チャットウィジェットの上に歓迎メッセージのプレビューを表示します。
      • チャット起動メニューのみを表示: チャット起動メニューのみを表示して、訪問者がクリックしたときにのみチャットウィンドウを開くようにします。

        チャット画面の動作

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


  • 続行するには、画面下の [保存 ]をクリックし、[ ナレッジベース ]タブをクリックします。

ナレッジベースの参照と検索を有効にする (Service Hub Professional または Enterprise のみ)

[ ナレッジベース ]タブでは、ウェブチャットの [ヘルプ ]タブを表示できます。訪問者はナレッジベース記事を参照したり検索したりすることができます。

  • [ ナレッジベース検索を有効化 ]スイッチをオンにします。
  • [ ナレッジベース ]ドロップダウンメニューをクリックし、既存の ナレッジベースを選択します。
  • ナレッジベースを作成するには、[ ナレッジベースを追加 ]をクリックし、手順に従って操作します。HubSpotでのナレッジベースの作成について詳細をご確認ください。
  • 続行するには、画面下の[保存]をクリックして、[対象]タブをクリックします。

ターゲティングルールを設定する

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

  • 訪問者が特定のウェブサイトURLにいるときに[ウェブサイトURL]セクションにウェブチャットウィジェットを表示するには、次のようにします。
    • 最初のドロップダウンメニューをクリックし、[ウェブサイトURL]を選択します。
    • 2つ目の ドロップダウンメニュー をクリックし、 ターゲティングルールを選択します。
    • テキストフィールドにルール基準を入力します。フーディー
  • 訪問者がURLに特定のクエリーパラメーターを含むウェブサイトページにいるときに、ウェブチャットウィジェットを表示する:
    • 最初のドロップダウンメニューをクリックし、[クエリーパラメーター]を選択します。
    • 1つ目のテキストフィールドに、クエリーパラメーター名を入力します。
    • 2つ目のテキストフィールドに、クエリーパラメーターの値を入力します。

      query param-1
  • 別のルールを追加するには、[ルールを追加]をクリックします。
  • 特定のページ(プライバシーポリシーのページなど)をウェブ チャット ウィジェットの対象から除外するには、[除外ルールを追加]をクリックします。

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

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

チャットフローオプションを管理

[ オプション]タブで、ウェブチャットの言語、デフォルトのチケットプロパティー、データのプライバシーと同意の設定をカスタマイズします。

注: 新しいチャットフローを作成する場合、[ チャットのCookieを収集することに同意]と[データの処理への同意]の設定 は既定で有効になっています。これらの設定を変更するには、ウェブチャットのデータ&プライバシーオプションを編集する方法を獲得します。

  • ウェブチャットから作成されるチケットのプロパティーをカスタマイズするには、[ このチャットフローのチケットプロパティーを設定]をクリックします。
    • 右側のパネルで、ドロップダウンメニューをクリックし、各プロパティーの値を選択します。
    • プロパティーを追加するには、[ 別のチケットプロパティーを追加]をクリックします。
  • ウェブチャットを新規作成すると、Cookie同意は既定で有効になっています。この設定をオフにするには、[ チャットのCookieを収集することに同意]スイッチ をオンに切り替えます。
  • Cookie同意が有効になっている場合、同意バナーを表示するタイミングを選択します。
    • 訪問者がチャットを開始する前に同意バナーを表示するには、[ 訪問者がチャットを開始する前に同意バナーを表示]を選択します。
    • 訪問者がページを離れようとしているときにバナーを表示するには、[ 訪問者がページを離れそうなときに同意バナーを表示]を選択します。
  • [ チャットのCookieを収集することに同意]テキスト フィールドのテキストフィールドを編集して、Cookieがどのように使用されるかを説明することができます。既定のテキストに戻すには、[ 既定にリセット]をクリックします。

チャットフロー-収集するための同意-チャットクッキー

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

  • ウェブチャットを新規作成すると、[ データ処理への同意 ]設定は既定でオンになります。この設定をオフにするには、[ データの処理への同意 ]スイッチをオフに切り替えます。
  • [ データ処理への同意 ]設定がオンになっている場合は、[ 同意のタイプ ]ドロップダウンメニューをクリックし、次のオプションから選択します。
      • 明示的な同意が必要:訪問者がメッセージを送信するには、[同意する]をクリックする必要があります。
      • 正当な利害関係:訪問者がチャットを開始した時点で黙示的に同意したことになります。データ処理に関する同意のテキストは引き続き表示されますが、チャットを開始する際に [同意する] をクリックする必要はありません。
    • [処理同意テキスト]フィールドに、HubSpotのデフォルトのテキストが表示されます。テキストを編集して、訪問者の個人情報を保存して処理する必要がある理由を説明し、プライバシーポリシーへのリンクを追加できます。デフォルトのテキストに戻すには、[ HubSpot提供の文面にリセット]をクリックします。chatflows-consent-to-processed-data
    • 訪問者がチャットを始めたときに 配信カテゴリー にオプトインするには、[ コミュニケーションの同意]スイッチをオンに切り替えます。
      • [ 配信カテゴリー]ドロップダウンメニューをクリックし、訪問者にオプトインさせる配信カテゴリー を選択します。
      • [チェックボックスラベル]テキスト フィールドに、HubSpotの既定のテキストが表示されます。このテキストはアカウントの既定値に基づいてパーソナライズされ、最初に使用可能な値( 会社名アカウント名会社ドメイン)が使用されます。アカウントの既定の編集について詳細をご確認ください。
      • テキストを編集して、 顧客が共同で同意するコミュニケーションのタイプを通知し、該当する場合はプライバシーポリシーへのリンクを追加できます。既定のテキストに戻すには、[既定のテキストにリセット]をクリックします。

      チャットフローコミュニケーションの同意

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

チャットフロー - マーケティングコンタクト

  • チャットウィジェット内から 顧客満足度アンケート を送信することができます。チャットコミュニケーションが終了すると、アンケートがチャットウィジェットに表示されます。収集されたアンケートの回答は、アンケートの詳細ページと、コミュニケーションの受信トレイまたはヘルプデスクのスレッドに表示されます。
    • 「チャット訪問者からフィードバックを収集」セクションで、[既存のアンケートを接続]ドロップダウンメニューをクリックし、アンケートを選択します。

注:配信方法として[チャット]を選択している既存のアンケートにのみ接続できます。

チャットフローフィードバック

    • ボットに接続する新しいアンケートを作成するには、[ 新規アンケートを作成 ]をクリックします。 配送方法は必ず[チャット ]を選択してください。
  • [保存]をクリックします。

ウェブチャットの確認およびウェブサイトページへの追加

ウェブチャットのセットアップが完了したら、右上にある[プレビュー]をクリックして、ウェブチャットがどのようにウェブサイトに表示されるかを確認します。スイッチをクリックしてオンに切り替えると、これがウェブサイトページに追加されます。ウェブサイト訪問者とのチャットを開始する準備ができたら、 コミュニケーションの受信トレイで受信メッセージに対応する 方法または ヘルプデスクを参照してください。

チャットフローを-有効化

チャットフローを編集

  1. HubSpotアカウントにて、[サービス]>[チャットフロー]の順に進みます。
  2. 新しいチャットフローを作成するか、既存のチャットフローにマウスポインターを合わせて、[編集]をクリックします。
  3. [ビルド]、[対象]、[表示]、および[オプション]タブの間を移動して、チャットフローを編集します。
  4. 完了したら、左下の[保存]をクリックします。
この記事はお役に立ちましたか?
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。