ウェブチャットを作成する
更新日時 2023年 1月 19日
対象製品
すべての製品とプラン |
注:[CRM]タブで「チャットフロー」権限を持つユーザーのみが、チャットフローを作成して編集できます。
ウェブサイトへの訪問者に自動で応答するボットによるチャットフローを作成する場合は、ボットを作成する方法を参照してください。
Facebook Messengerアカウント用のウェブチャットを作成することもできます。Facebook Messenger用のチャットフローを作成する方法をご確認ください。
始める前に
ウェブチャットを作成するにはまず、チャットチャネルをコミュニケーションの受信トレイに接続する必要があります。チャットチャネルでは、チームの空き状況やウィジェットの外観をカスタマイズします。また、HubSpot上でホスティングされていないウェブサイトにウェブチャットを追加する場合は、外部ページにトラッキングコードも追加してからウェブチャットを作成する必要があります。トラッキングコードがインストールされていない場合、ウェブチャットが表示されません。
- HubSpotアカウントにログインした状態で[コミュニケーション]>[チャットフロー]を選択します。
- 右上の[チャットフローを作成]をクリックします。
- [ウェブサイト]を選択します。
- 左側のサイドバーで、[ウェブチャット]オプションを選択します。
- チャットを訪問者がすぐに開始できるように設定する場合は、[ウェブチャット]を選択します。
- Service HubのProfessionalアカウントまたはEnterpriseアカウントをご利用で少なくとも3つのナレッジベース記事を公開している場合は、[ナレッジベース検索およびウェブチャット]を選択して、ウェブ チャット ウィジェットから直接ナレッジベースを検索できるオプションを追加します。
- [次へ]をクリックします。
- アカウントに複数の受信トレイが設定されている場合は、[受信トレイを選択]ドロップダウンをクリックし、別の受信トレイを選択します。
- チャットフローの言語を英語から変更するには、左側の[言語を選択]ドロップダウンメニューをクリックし、別の言語を選択します。
- [次へ]をクリックします。
1. 作成 - 歓迎メッセージを作成する
ウェブチャットセットアップの[作成]タブにリダイレクトされます。ここでチャットウィジェットの動作をカスタマイズし、訪問者への挨拶メッセージを作成します。
注:単一ページのアプリにチャットウィジェットを埋め込む場合、またはAPIを使用してウェブチャットをカスタマイズする場合は、開発者ドキュメントでHubSpotコミュニケーションAPIの使い方を参照してください。
- 訪問者が初めてチャットを開始したときに表示されるメッセージをカスタマイズするには、[歓迎メッセージ]をクリックしてセクションを展開し、[歓迎メッセージを作成]テキストボックスにテキストを入力します。歓迎メッセージの言語を変更する方法をご覧ください。
- ナレッジベース検索バーをウェブチャットに追加するには、[ナレッジベース検索]をクリックしてセクションを展開し、[ナレッジベース検索を有効化]スイッチをクリックしてオンに切り替えます。
- 受信されるコミュニケーションを特定のチームメンバーにルーティングするには、[自動的にコミュニケーションを割り当て]をクリックしてセクションを展開し、[コミュニケーションを自動的に割り当てる] スイッチをクリックしてオンに切り替えます。ドロップダウンメニューを使用して、コミュニケーションの割り当て先となるユーザーまたはチームを選択します。コミュニケーションの受信トレイ内の自動割り当てルールの設定方法をご覧ください。
注:自動割り当てルールには、Sales HubまたはService Hubの有料ユーザーのみを含めることができます。
- Eメールアドレスを提供するように訪問者に求めるタイミングを指定するには、[Eメールキャプチャー]をクリックしてセクションを展開します。[訪問者をEメールアドレスに依頼する]ドロップダウンメニューをクリックし、オプションを選択し、訪問者のEメールアドレスを尋ねるときに表示されるメッセージを入力します。コミュニケーションの受信トレイでのコンタクトの作成をご覧ください。
- 続行するには、下部の[保存]をクリックして、[ターゲット]タブをクリックします。
2. 対象 - ウェブチャットの表示位置を決定する
[対象]タブで、ウェブ チャット ウィジェットがウェブサイトページに表示される位置を指定できます。ウェブチャットウィジェットは、訪問者が特定のページURLにアクセスした時点で、または訪問者に関する確認済みの情報に基づいて表示することができます。ターゲティングオプションを組み合わせることで、サイトへの訪問者に合わせてパーソナライズすることもできます。チャットフローで使用できる、さまざまなターゲティングオプションとターゲティングルールについて詳細をご確認ください。
- 訪問者が特定のウェブサイトURLにアクセスした時点でウェブ チャット ウィジェットを表示するには、[ウェブサイトURL]セクションに進み、次の手順に従います。
- 最初のドロップダウンメニューをクリックし、[ウェブサイトURL]を選択します。
- 2つ目のドロップダウンメニューをクリックし、ターゲティングルールを選択します。
- テキストフィールドにルールの条件を入力します。
- URLに特定のクエリーパラメーターが含まれるウェブサイトページに訪問者がアクセスした時点でウェブチャットウィジェットを表示するには、次の手順に従います。
- 最初のドロップダウンメニューをクリックし、[クエリーパラメーター]を選択します。
- 1つ目のテキストフィールドに、クエリーパラメーター名を入力します。
- 2つ目のテキストフィールドに、クエリーパラメーターの値を入力します。
- 別のルールを追加するには、[ルールを追加]をクリックします。
- 特定のページ(プライバシーポリシーのページなど)をウェブチャットウィジェットの対象から除外するには、[除外ルールを追加]をクリックします。
特定のコンタクトについて、確認済みの情報に基づいてウェブチャットの対象にすることもできます。訪問者情報に基づいて条件を設定するには、[訪問者の情報および行動]セクションに進み、次の手順に従います。
- 1つ目のドロップダウンメニューをクリックし、フィルターを選択します。既知の特定のコンタクト、または不明な訪問者を対象として絞り込むフィルターを使用することができます。
- 2つ目のドロップダウンメニューをクリックし、条件を選択します。
- 別のルールを追加するには、[ルールを追加]をクリックします。
- 特定のページ(プライバシー ポリシー ページなど)をポップアップフォームの対象から除外するには、[除外ルールを追加]をクリックします。
- 別のフィルターグループを作成してターゲティングルールを追加するには、[フィルターグループを追加]をクリックします。
- 続行するには、画面下の[保存]をクリックして。[表示]タブをクリックします。
3. 表示 - ウェブチャットの外観をカスタマイズする
[表示]タブで、チャット見出し、チャットウィジェットの動作、チャットウィジェットのトリガーなど、ウェブチャットの表示設定をカスタマイズします。ウェブチャットのアクセントカラーとページ上の配置を編集するには、受信トレイ設定でチャットウィジェットの外観をさらにカスタマイズする方法を参照してください。
- [チャットアバターを選択]セクションをクリックして展開し、[チャット見出し]ドロップダウンメニューをクリックして、チャットウィジェットに表示される名前とアバターを選択します。
- カスタムブランディング:一般的なチーム名とイメージを表示します。
- プラスアイコンの追加をクリックして画像やGIFをアップロードし、表示する名前を入力してください。
- ユーザー名やアバターではなく、チャット会話全体にカスタムブランディングを適用するには、「エージェントの別名として会話全体にカスタムブランディングを使用する」チェックボックスを選択します。カスタムブランディングは、チャットの文字起こしにも表示されます。
- カスタムブランディング:一般的なチーム名とイメージを表示します。
注意:エージェントの別名として会話を通じてカスタムブランドを使用するチェックボックスを選択した場合、会議ツールを介してチャットウィジェットに追加された会議リンクは削除されます。
-
- 特定のユーザーおよびチーム:表示する名前の横にあるチェックボックスをオンにします。3人以上のユーザーを選択した場合、ユーザーがランダムに表示されます。チャットフロー言語が表示名にどのように影響するかをご覧ください。
- コンタクト担当者:チャットを開始した新規訪問者または未割り当ての訪問者に対しては、[コンタクト担当者がいない場合、次のメンバーに割り当てる]ドロップダウンメニューをクリックして、代替オプションを選択します。

- [チャット画面の動作]セクションで、デスクトップまたはモバイル画面でのウィジェットの動作を制御します。
注:訪問者がチャットフローを最小化した場合、24時間後にhs-messages-hide-welcome-message Cookieが有効期限切れになるまで、HubSpotはすべてのページとチャットフロー全体にわたって訪問者の選択に従います。この動作はチャット表示動作の設定と競合する可能性があるため、チャットフローが想定通りにポップアップ表示されないことがあります。
-
- [デスクトップ]タブで、使用する表示動作の横にあるラジオボタンを選択します。
- 歓迎メッセージをポップアップで開く:チャットウィジェットの上にある歓迎メッセージのプレビューを表示します。
- [デスクトップ]タブで、使用する表示動作の横にあるラジオボタンを選択します。
-
-
- チャット起動メニューのみを表示:チャット起動メニューのみを表示して、訪問者がクリックしたときのみチャットウィンドウを開くようにします。
- 歓迎メッセージを表示し、トリガー適合時にチャットウィジェットをポップアップで開く:歓迎メッセージのプレビューを表示し、トリガー条件が満たされたとき、または訪問者がウィジェットをクリックしたときのいずれかが最初に発生した時点でチャットを開きます。
-
-
- 選択されている表示動作によっては、チャットウィジェットをページに読み込むタイミングを指定することもできます。チャット表示トリガーの横にあるチェックボックスをオンにします。選択したトリガーはデスクトップ、タブレット、モバイルで適用されます。
-
-
- 離脱の意思があるとき:訪問者のマウスがブラウザーウィンドウの上部に移動した時点でウェブ チャット ウィジェットをトリガーします。
- ページでの滞在時間(秒):訪問者がページにアクセスしている間に指定された時間(秒単位)が経過した時点でウェブ チャット ウィジェットをトリガーします。
-
注:ページの読み込み時間を短縮するために、5秒以上の遅延を設定することをお勧めします。サイトのページ読み込み時間に関する詳細をご覧ください。
-
-
- ページのスクロールの割合:訪問者がページ上の特定の場所にスクロールした時点でウェブ チャット ウィジェットをトリガーします。
-
-
- [モバイル]タブで、使用する表示動作の横にあるラジオボタンを選択します。
- 歓迎メッセージをポップアップで開く:チャットウィジェットの上にある歓迎メッセージのプレビューを表示します。
- チャットランチャーのみを表示:チャットランチャーのみを表示して、訪問者がクリックしないとチャットウィンドウを開くことができないようにします。
- [モバイル]タブで、使用する表示動作の横にあるラジオボタンを選択します。
注:モバイルデバイスでチャットフローを無効にするには、ターゲティング設定で、モバイルデバイスでページが表示されたときにチャットフローを非表示にする除外ルールを追加することができます。
- 続行するには、下部の[保存]をクリックし、[オプション]タブをクリックします。
4. オプション
[オプション]タブで、ウェブチャットの言語設定をカスタマイズします。アカウントの一般データ保護規則(GDPR)設定を有効にしている場合、ウェブチャットをカスタマイズして、ウェブサイトの訪問者にコミュニケーションへの同意を求める手順を含めることもできます。
- [言語を選択]ドロップダウンメニューをクリックし、コンテキスト ウィジェット データの言語設定を選択してから、[保存]をクリックします。
- ウェブ チャット ウィジェットのCookieの同意テキストを有効にするには、[チャットのCookieを収集することに同意]スイッチをクリックしてオンに切り替えます。バナーに表示されるCookieへの同意テキストはカスタマイズできません。
- Cookieの同意テキストを有効にすると、同意バナーが表示されるタイミングを選択できるようになります。
- 訪問者がチャットを開始する前に同意バナーを表示するには、[訪問者がチャットを開始する前に同意バナーを表示]ラジオボタンを選択します。
- 訪問者がページを離れようとしているときにバナーを表示するには、[訪問者がページを離れそうなときに同意バナーを表示]ラジオボタンを選択します。
注意:クッキーの収集に同意するためのGDPR設定は、Visitor Identification APIを通じて識別された訪問者にはチャットウィジェット内に表示されません。これは、HubSpotによってmessagesUtk Cookieが設定されないためです。アナリティクスCookieのバナーへの影響はありません。訪問者ID APIの詳細は、HubSpotの開発者ドキュメントを参照してください。
- 訪問者からデータの処理に関する同意を得るには、[データの処理への同意]をクリックしてオンに切り替えます。
- [同意のタイプ]ドロップダウンメニューをクリックし、次のいずれかを選択します。
- 明示的な同意が必要:訪問者がメッセージを送信するには、[同意する]をクリックする必要があります。
- 正当な利害関係:訪問者がチャットを開始した時点で黙示的に同意したことになります。データ処理に関する同意のテキストは引き続き表示されますが、チャットを開始する際に[同意する]をクリックする必要はありません。
- [処理同意テキスト]フィールドに、HubSpotの既定のテキストが表示されます。このテキストを編集して、訪問者に関する個人情報の保存および処理が必要な理由を説明することができます。同意テキストをカスタマイズした後、既定のテキストに戻す場合は、[HubSpot提供の既定のテキストにリセット]をクリックします。
- [同意のタイプ]ドロップダウンメニューをクリックし、次のいずれかを選択します。
- チャットを開始したときに、訪問者を特定のサブスクリプションタイプにオプトインするには、[コミュニケーション同意]スイッチをクリックしてオンにします。
- [サブスクリプションタイプ]ドロップダウンメニューをクリックし、訪問者をオプトインするサブスクリプションタイプを選択します。
- [チェックボックスラベル]テキストフィールドを使用して、顧客が同意するコミュニケーションタイプについて説明します。
注:上記の機能はHubSpotに組み込まれていますが、個々の状況に応じた最適なコンプライアンス上のアドバイスについては自社の法務部門にご相談ください。
- ご利用のアカウントにマーケティングコンタクトへのアクセス権があり、このチャットフローから作成されるコンタクトをマーケティングコンタクトとして設定する場合は、[マーケティングコンタクト]スイッチをクリックしてオンに切り替えます。
- チャットウィジェット内から顧客満足度アンケートを送信することができます。チャットコミュニケーションが終了すると、アンケートがチャットウィジェットに表示されます。収集されたアンケートの回答は、アンケートの詳細ページと、コミュニケーションの受信トレイのスレッドに表示されます。
- 「チャット訪問者からフィードバックを収集」セクションで、[既存のアンケートを接続]ドロップダウンメニューをクリックし、アンケートを選択します。
ご注意:配信方法として「チャット」選択されている既存のアンケートのみ接続することができます。
-
- ボットに接続する新しいアンケートを作成するには、[新規アンケートを作成]をクリックします。配送方法は必ず[チャット]を選択してください。
- [保存]をクリックします。
ウェブチャットの確認およびウェブサイトページへの追加
ウェブチャットのセットアップが完了したら、右上にある[プレビュー]をクリックして、ウェブチャットがどのようにウェブサイトに表示されるかを確認します。スイッチをクリックしてオンに切り替えると、これがウェブサイトページに追加されます。ウェブサイト訪問者とのチャットを開始する準備ができたら、コミュニケーションの受信トレイで受信メッセージに対応する方法を参照してください。
Thank you for your feedback, it means a lot to us.
関連記事
-
Automatically open the chat widget on a specific page URL
After you create a live chat for your website pages, you can automatically open a chat widget when a visitor loads a specific page URL.
Community -
チャットとEメールでのコミュニケーションに関するレポート
...
ナレッジベース -
ログイン訪問者とのチャット
外部サイトでログイン機能を使用している場合、またはHubSpotでホストされている非公開のページ、ブログ記事、またはナレッジベースコンテンツにアクセスするためにメンバー登録が必要な場合は、コミュニケーション受信トレイ...
ナレッジベース