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

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

更新日時 2020年 7月 28日

ウェブチャットによるチャットフローを作成して、訪問者をチームメンバーに接続します。ウェブチャットは、訪問者がチームのだれかとリアルタイムでコミュニケーションを始めるためにクリックするウェブサイトページ上のウィジェットとして表示されます。価格ページの訪問者をセールスチームのメンバーに接続するためのウェブチャットを作成したり、ナレッジベース記事の訪問者をサポートチームのメンバーに接続するために別のウェブチャットを作成したりできます。

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

ウェブサイト訪問者に自動応答を送信するボットによりチャットフローを作成する場合は、ボットを作成する方法についてご確認ください。

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
  • 続行するには、下部の[保存]をクリックしてから、左側のサイドバーの[表示]タブをクリックします。

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

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

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

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

  • ページにチャットウィジェットを読み込むタイミングを決定することもできます。チャット表示トリガーの横にあるチェックボックスをオンにします。
    • 離脱の意思がある場合:訪問者のマウスがブラウザーウィンドウの上部に移動した時点でウェブ チャット ウィジェットをトリガーします。
    • 秒単位のページでの滞在時間:訪問者がページにアクセスしている間に指定された時間(秒単位)が経過した時点でウェブ チャット ウィジェットをトリガーします。
    • ページのスクロールの割合:訪問者がページ上の特定のポイントまでスクロールした時点でウェブ チャット ウィジェットをトリガーします。
  • 続行するには、下部の[保存]をクリックし、左側のサイドバーの[オプション]タブをクリックします。

注:ウェブチャットのセットアップが完了したら、訪問者が特定のページURLを読み込んだときにチャットウィジェットを自動的に開くことができます。ページURLの末尾に#hs-chat-openを付加します。これにより、訪問者に送信するEメール、ランディングページ、その他マーケティングキャンペーン内のこれらのURLは、チャットウィジェットに直接リンクできるので、チームメンバーの1人とすぐにチャットできます。

4.オプション

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

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

consent-banner-with-display-options

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

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

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

enable-chatflow

/jp/chatflows/create-a-live-chat