Web サイトに Web サイト チャットを追加すると、訪問者とリアルタイムで簡単につながることができます。これは、質問に答えたり、サポートを提供したり、顧客をガイドしたりしながら、サイトでのエクスペリエンスを向上させる優れた方法です。この記事では、MessageHub でライブ チャットを設定し、Web サイト訪問者に準備する方法を学びます。.png)
必要条件
アクティブなClickFunnelsアカウント
MessageHubアプリ
ウェブサイトチャットを理解する
Web サイト チャットを使用すると、Web サイトを通じて直接訪問者とリアルタイムでコミュニケーションをとることができます。これは、企業が顧客を引き付け、即時サポートを提供し、パーソナライズされた支援を提供しながら、ユーザー エクスペリエンスを向上させる便利な方法です。
企業がウェブサイトチャットを使用する方法
カスタマーサポート: 顧客の質問や問題を即座に解決します。
販売に関するお問い合わせ: リアルタイムの推奨事項と回答を提供することで、潜在的な購入者を支援します。
リードジェネレーション: 将来のフォローアップのために、チャットのやり取り中に顧客の詳細を取得します。
サポートされているブラウザとプラットフォーム
Web サイト チャット ウィジェットは、最新のブラウザやプラットフォームのほとんどと互換性があります。最適なエクスペリエンスを得るために、顧客が次のブラウザーバージョン以上を使用していることを確認してください。
Mozilla Firefox: v52+
グーグルクローム:v57+
クロム: v57+
Apple Safari: v14.1+
Microsoft Edge: v16+
さらに、チャットウィジェットは、次のモバイルプラットフォームで動作します。
アンドロイド: v5.0+
iOS: v11.0+
Web サイト チャットの受信トレイの追加
MessageHubでWebサイトチャットの受信トレイを作成するには、次の手順に従います。
ClickFunnels ワークスペースの左側のメニューから MessageHub アプリを開きます。
[ 設定⚙] > [チャットの受信トレイ ] に移動し、右上隅にある [ 受信トレイの追加 ] ボタンをクリックします。
使用可能な受信トレイタイプの一覧から、[ Webサイト]を選択します。
.png)
必須フィールドに入力します。
ウェブサイト名: ウェブサイトの名前を入力します。
Web サイトのドメイン: Web サイトの URL を入力します。
ウィジェットの色: チャットウィジェットのブランドに一致する色を選択します。
ようこそ見出し: これはチャット ウィジェットに表示されるタイトルになります (例: "こんにちは!")。
ウェルカムキャッチフレーズ: 訪問者に挨拶する短いメッセージを追加します (例: 「私たちがお手伝いします!何でも聞いてください。」
チャンネルグリーティングを有効にする: 訪問者が会話を開始したときに、グリーティングメッセージを自動送信するかどうかを設定します。この機能を有効にするには「有効」を選択し、オフのままにするには「無効」を選択します。
受信トレイの詳細が設定されたら、[ 受信トレイの作成 ] をクリックして続行します。
次に、エージェントを受信トレイに割り当てます。
ドロップダウンリストから、この受信トレイでのチャットの処理を担当するエージェントを選択します。
[ エージェントの追加] をクリックして変更を保存します。
この時点で、MessageHub で Web サイト チャットの受信トレイが正常に作成されました。次のステップでは、チャット ウィジェットを Web サイトに接続するように ClickFunnels サイト設定を構成しますが、これについては次のセクションで説明します。
チャットウィジェットの設定
MessageHub で Web サイト チャットの受信トレイを作成した後、ClickFunnels ワークスペースでチャット ウィジェットを有効にして、サイトに表示できるようにします。
ClickFunnelsワークスペースの左側のメニューから サイト アプリを開きます。
[ 概要 ] タブに移動し、右上隅にある 3 つのドットのメニュー をクリックします。次に、ドロップダウンから [ サイト設定 ] を選択します。
.png)
[ MessageHub チャット ウィジェット ] セクションまでスクロールし、[ サイトに MessageHub チャット ウィジェットを表示 ] オプションをオンに切り替えます。
[ サイトの更新 ] をクリックして、変更を保存します。ウィジェットを有効にしてからサイトに表示されるまでに数分かかる場合があります。
Web サイトの受信トレイのカスタマイズ
Web サイトの受信トレイは、Web サイトのブランディングやユーザー エクスペリエンスの好みに合わせてカスタマイズできます。カスタマイズ オプションにアクセスするには、次の手順に従います。
MessageHub で、[設定⚙] > [チャットの受信トレイ] に移動します。
Webサイトの受信トレイの横にある [設定⚙]アイコン をクリックします。
受信トレイの設定で、ページ上部のタブを使用して、ウィジェットのさまざまな側面を構成します。
設定
ここでは、チャットウィジェットの基本情報と機能を構成できます。
チャンネルアバター: チャットウィジェットを表す画像(ロゴなど)をアップロードします。このアバターは、訪問者のチャット インターフェイスに表示されます。
ウェブサイト名とドメイン: 受信トレイ名を定義し、Web サイトのドメイン URL を入力します。
ウェルカム見出しとキャッチフレーズ: ウィジェットに表示されるパーソナライズされた挨拶メッセージとキャッチフレーズを作成します。
ウィジェットの色: ブランドに一致するウィジェットの色を選択します。
チャネル グリーティングを有効にする: 顧客が会話を開始したときに自動グリーティング メッセージをオンにします。
応答時間を設定します。 顧客が返信を期待できる時間を選択します。これは、チャットウィジェットにステータスメッセージとして表示されます。
電子メールコレクトボックスを有効にします。 会話の開始時に顧客のメールを収集するフィールドを追加します。
CSAT を有効にする: 会話後の顧客満足度 (CSAT) 調査を有効または無効にします。
解決後にメッセージを許可する: 会話が解決済みとしてマークされた後に、顧客がフォローアップメッセージを送信できるかどうかを決定します。
電子メールによる会話の継続性を有効にします。 顧客がサイトを離れた場合に、電子メールでチャットの会話を続行できるようにします。
ヘルプセンターを添付する: ヘルプセンターを選択して、ウィジェットにリンクします(利用可能な場合)。
顔立ち
ウィジェットにファイルピッカーを表示します。 ユーザーが会話中にファイルを添付できるようにします。
ウィジェットに絵文字ピッカーを表示します。 訪問者がチャット メッセージで絵文字を使用できるようにします。
ウィジェットから会話を終了することをユーザーに許可します。 訪問者が自分で会話を閉じるオプションを有効にします。
ボットの受信トレイ名とアバターを使用します。 受信トレイ名とアバターを使用してボットの ID をカスタマイズします。
送信者名のスタイル:
友好的: 個人送信者形式 (「Jane from Your Business」など) が表示されます。
プロ: 送信者の名前を「あなたのビジネス」として表示します。
[ 更新 ] をクリックして、設定を編集した後、変更を保存します。
協力
[ コラボレーター] タブでは、エージェントを管理し、この受信トレイの会話の割り当てを構成できます。.png)
ドロップダウンメニューを使用して、受信トレイにアクセスできるエージェントを追加します。エージェントが追加されると、その名前がリストに表示されます。
エージェントを削除するには、エージェントの名前の横にある 「x」アイコン をクリックし、[ 更新] を選択して変更を保存します。
[ 自動割り当てを有効にする ] を切り替えて、追加されたエージェントに会話を自動的に割り当てることができます。
自動割り当て制限を設定して、一度にエージェントに割り当てることができる会話の最大数を定義します。
変更を加えた後、[ 更新 ] をクリックして設定を適用します。
営業時間
[ 営業時間] タブでは、ライブ チャット ウィジェットの可用性を設定できます。.png)
[ この受信トレイのビジネス可用性を有効にする] ボックスをオンにして、受信トレイのビジネス可用性を有効または無効にします。
営業時間外に表示する 訪問者向けの使用不可メッセージ を追加します。テキストエディタを使用して、必要に応じてメッセージをカスタマイズします。
ドロップダウンメニューから、ビジネスに適した タイムゾーン を選択します。
週単位の営業時間を設定するには、対応可能な曜日を確認し、特定の営業時間を設定してください。終日空室については、該当する日の横にある終日チェックボックスをオンにしてください。
利用できない日はオフのままにして、 利用不可としてマークします。
変更を行った後、[ 営業時間設定を更新] をクリックします。
プレチャットフォーム
[ 事前チャットフォーム ] タブでは、チームとの会話を開始する前にユーザー情報を収集できます。カスタマイズする方法は次のとおりです。.png)
プレ チャットフォーム を有効または無効にするには、ドロップダウンメニューから「はい」または「いいえ」を選択します。
ユーザーをガイドする 事前チャットメッセージ を追加します。テキストエディタを使用して、必要に応じてメッセージをフォーマットします。
プレチャットフォームフィールド
チャットを開始する前にユーザーが入力する必要があるフィールドを管理できます。
フィールドの切り替え: 各オプションの横にあるスイッチを使用して、特定のフィールドを有効または無効にします。
フィールドタイプ: サポートされているタイプには、テキスト、電子メール、チェックボックスが含まれます。
必須フィールド: [ 必須 ] 列のチェックボックスをオンにして、フィールドを必須にします。
ラベルとプレースホルダのカスタマイズ: ラベル (ユーザに表示されるフィールド名)と プレースホルダ (フィールド内に表示されるデフォルトのテキスト)を調整します。
[ 事前チャットフォーム設定を更新 ] をクリックして、変更を保存します。
ウィジェットビルダー
ウィ ジェットビルダー タブでは、チャットウィジェットの外観と動作をカスタマイズできます。構成できるオプションは次のとおりです。.png)
ウェブサイトアバター:チャットウィジェットにアバターとして表示する画像をアップロードします。
Webサイト名: ウィジェットに表示するWebサイトの名前を設定します。
ウェルカム見出し: ウィジェットの上部に表示されるグリーティングテキストをカスタマイズします。
ウェルカムキャッチフレーズ: ユーザーがチャットを開始するときにガイドする短いメッセージを追加します。
応答時間: ウィジェットに表示する推定応答時間を設定します。
ウィジェットの色: ブランディングに合わせて色を選択し、ウィジェットの外観を向上させます。
ウィジェットのバブルの位置:チャットバブルの位置を左または右から選択します。
ウィジェットバブルタイプ:ランチャースタイルを 標準 バブルまたは 拡張バブル から選択します。
ウィジェットバブルランチャーのタイトル: ウィジェットバブルに「チャット」などのタイトルを追加します。
これらの設定を調整すると、ライブ プレビューが即座に更新されるため、ウィジェットの外観と機能が希望どおりに機能することを確認できます。すべてのカスタマイズが完了したら、[ ウィジェット設定の更新 ] をクリックして変更を適用します。
構成
[設定] タブでは、Web サイトにライブ チャット ウィジェットを埋め込むための JavaScript コード スニペットにアクセスできます。ただし、このステップはSite Settings内で すでに処理されています。
すべてが正しく機能することを確認するには:
Web サイト トークンの確認: このタブに表示される Web サイト トークン が、ClickFunnels ワークスペースの サイト設定 に自動的に追加されたトークンと一致していることを確認します。トークンが一致しない場合、チャットウィジェットが正しく機能しない可能性があります。
.png)
スクリプトを手動でコピーして貼り付ける必要はありませんが、このタブはトラブルシューティングや高度なカスタマイズに役立ちます。
個々のページへのチャットウィジェットの追加
チャットウィジェットを個々のページに表示する必要がある場合は、次の手順に従います。
ClickFunnels ワークスペースで目的のページに移動し、 ページ エディターを開きます。
ページエディタの右上隅にある 設定(歯車アイコン) をクリックします。
ドロップダウンメニューから [ コードの表示 ] を選択して、コードエディタを表示します。
.png)
[コード] セクションで、[ヘッダーコード] または [フッターコード] 領域を選択して、メッセンジャースクリプトを貼り付けます。スクリプトを見つけるには:
MessageHub で、[設定⚙] > [チャットの受信トレイ] に移動します。
Webサイトの受信トレイの横にある [設定⚙ ]アイコンをクリックします。
受信トレイの設定で、[ 構成 ] タブに移動します。
[保存] をクリックして変更を適用します。
メールによる会話の継続
MessageHub を使用すると、顧客は特定のシナリオで電子メールを介してチャット会話を続けることができます。
対応可能なエージェントがおらず、顧客がチャットにメッセージを残した場合。
エージェントが応答する前に顧客がチャットを離れたとき。
この機能を有効にするには、次のいずれかの方法で顧客の電子メール アドレスが取得されていることを確認します。
Pre-Chat Form: 有効にすると、顧客は会話を開始する前に電子メール アドレスを入力します。
電子メールコレクトプロンプト: プレチャットフォームが無効になっている場合、システムは会話中に顧客に電子メールアドレスを入力するように求めます。
.png)
電子メール アドレスが取得されると、会話はチャットと電子メールの間でシームレスに移行できます。顧客はチャットを要約した電子メール スレッドを受け取り、返信できます。エージェントは、MessageHubダッシュボードから直接メールで会話を続けることができます。
FAQ
チャットに応答できるエージェントがいない場合はどうなりますか?
エージェントがオンラインにいない場合は、 営業時間 メッセージを構成して、訪問者に空き状況を通知できます。さらに、プレチャットフォームまたはメールコレクトプロンプトは顧客情報を取得できるため、後でフォローアップできます。
ウェブサイトトークンとは何ですか、そしてなぜそれが重要なのですか?
ウェブサイトトークンは、チャットウィジェットをMessageHubの対応する受信トレイにリンクする一意の識別子です。Web サイトのコード内のトークンが受信トレイ設定のトークンと一致しない場合、ウィジェットは正しく機能しません。
ウェブサイトトークンを見つけて確認するにはどうすればよいですか?
MessageHub の Web サイト受信トレイの [構成] タブに移動して、Web サイト トークンを見つけます。ClickFunnels のサイト設定に入力されたトークンと一致することを確認してください。
ウィジェットがウェブサイトに表示されるまでにどのくらい時間がかかりますか?
統合後、ウィジェットが表示されるまでに数分かかる場合があります。表示されない場合は、トークンを再確認し、ウィジェット コードが正しく配置されていることを確認してください。
フォローアップのために訪問者のメールをキャプチャするにはどうすればよいですか?
受信トレイの設定でプレチャットフォームを有効にして、会話を開始する前に訪問者にメールの入力を求めることができます。または、プレチャットフォームが無効になっている場合は、メールコレクトプロンプト機能を有効にして、チャット中にメールをキャプチャします。
会話の割り当てを特定のエージェントに制限できますか?
はい、[コラボレーター] タブから特定のエージェントを受信トレイに割り当てることができます。さらに、会話制限付きの自動割り当てを有効にして、チャットの公平な配布を確保できます。