チャット体験を構築する
Zoomのツールを使えば、コードをほとんど、またはまったく書かずに、チャット体験を簡単にカスタマイズして立ち上げることができます。
チャットエンゲージメントウィンドウ
チャットエンゲージメントウィンドウは、ユーザーが仮想エージェントまたは有人エージェントとメッセージをやり取りする方法です。Zoomのツールを使えば、見やすく操作しやすく、会社のブランドに合ったチャットウィンドウを構築できます。
チャットエンゲージメントウィンドウを作成または編集するには、ZoomのWeb管理画面に移動します。
そこからクリック +キャンペーンを追加 または既存のキャンペーンの下書きを開きます。スクロールして チャットエンゲージメントウィンドウ セクションでウィンドウを作成または編集します。
ウィンドウサイズとモバイル体験
Zoomのチャットエンゲージメントウィンドウはレスポンシブ対応です。つまり、ユーザーがデスクトップまたはスマートフォンからサイトにアクセスすると、レイアウトが自動的に調整されます。
モバイル端末では、限られた画面スペースを最大限に活用し、すっきりとして読みやすい体験を確保するため、チャットウィンドウは全画面で開きます。
デスクトップ端末でチャットにアクセスするユーザー向けに、ウィンドウの高さは3つのサイズオプションから選択できます。
S: 540ピクセル
M: 650ピクセル、 デフォルト
L: 780ピクセル
注
読みやすさを確保するため、幅は常に420ピクセルに固定されています。
ヘッダーバー
この チャットヘッダーバー は、チャットデザインの重要な要素です。適切に設計されると、ユーザーにサポート体験で何を期待できるかという文脈を与え、会話への信頼感を高めます。ヘッダーを使ってサポートチームに関する情報を共有したり、ブランドのロゴや色を追加したりできます。
Zoom CXでは、選択できるヘッダーデザインオプションが複数用意されています。
フルヘッダー画像
426ピクセル×95ピクセルの画像を追加してヘッダー領域全体を埋めることができ、カスタムデザインに最適です。
アバター画像サイズ
40×40ピクセルの画像を追加して、ヘッダーバー内に単独で、またはヘッダーテキストと並べて表示できます。
ヘッダーテキストのみ
チーム名、対応状況、サポート時間など、簡単なメモを共有できます。H1、H2、H3、または本文段落サイズを使用して、ヘッダーテキストのサイズを調整します。
すっきりとしたミニマルなデザインにするには、 空のままにすることもでき、ユーザーの注意をチャットに集中させられます。
次を使用して、 ヘッダーの背景とアイコンに任意の色を選択できます。これは、チャットデザインをWebサイトに調和させるのに役立ちます。
ご注意
背景色を変更する場合は、最小化アイコンとメニューアイコンが引き続き見えることを確認してください。アイコンの色も変更する必要がある場合があります。
チャットバブル、テキスト、アイコンなどの色
エンゲージメントウィンドウビルダーでは、チャットに使用する正確な色を選べます。ウィンドウの各部分に16進コードを入力し、プレビューを確認して見え方を確認します。
Zoomには、開始に役立つテンプレートが用意されています。見た目を良くし（そして読みやすく保つために）、ブランドカラーを使い、テキストと背景色の間に十分なコントラストがあることを確認してください。
ようこそ画面
この ようこそ画面 Zoom コンタクトセンター と Zoom Virtual Agent のようこそ画面は、チャットが始まる前に表示されるオプションの紹介画面で、お客様に挨拶したり、情報を収集したり、ブランドに合わせて体験を調整したりする機会を提供します。
これはWebチャット体験で利用できます。設定するには、 チャットエンゲージメント ウィンドウをクリックし、次に ようこそ画面 タブ。
招待状のデザイン
招待状は、Webサイト上でサポート体験を開始するものです。最も一般的なのは、 固定 招待状タイプです、これはWebサイトに表示されるフローティングアイコンです。ユーザーがこれをクリックすると、チャットウィンドウが開き、体験が始まります。
招待状を作成または編集するには、ZoomのWeb管理者に移動します。
そこから、 +キャンペーンを追加 または既存のキャンペーンの下書きを開きます。スクロールして 招待状 セクションをクリックして新しい招待状を作成します。
次の設定をあなたの Sticky 招待状 アイコンに対して設定することができます:
ボタンサイズ: チャット招待アイコンのサイズは、簡単に目につきクリックまたはタップしやすい十分な大きさにする必要がありますが、ユーザー体験を妨げたり重要なコンテンツを覆ったりしないよう、大きすぎてもいけません。Zoomでは3種類の招待状サイズを用意しています:
S: 40ピクセル
M: 56ピクセル, デフォルト
L: 72ピクセル
ボタンの色: ウェブサイトの背景に対して高いコントラストを持つボタンの色を選択してください。次を参考にすることをおすすめします WCAG 2.1 ガイドライン。これは、アイコンやボタンなどのユーザーインターフェース（UI）コンポーネントがその背景に対して最低3:1のコントラスト比を満たすことを意味します。
アイコン: アイコンは、ボタンをタップしたときに何が起こるかをユーザーがイメージするのに役立ちます。Zoom では、チャットの開始を示すデフォルトのデザインをいくつか選択できます。また、SVGファイルを使用して独自のカスタムアイコンを追加することもできます。SVGファイルは10MB未満である必要があります。
角の半径: 招待状アイコンをどのくらい角丸または四角にしたいですか？あなたのサイトを見て、ボタンの見た目にパターンがあるか確認するか、ブランドチームに好みがあるか聞いてみてください。8ピクセルのように角の半径を小さくすると、招待状はより四角くなります。28ピクセルのように角の半径を大きくすると、招待状はより丸くなります。
招待状にテキストを追加する： 招待状ボタンにテキストラベルを追加すると、より分かりやすく、親しみやすくなります。ユーザーはボタンの目的をすぐに理解できるため、アイコンの意味を推測する必要がありません。ただし、その分スペースを多く使い、特にモバイルでは画面を煩雑に見せることがあります。対象者と、彼らが最もよく使うデバイスを必ず考慮してください。フォントを追加する場合は、Arial、Georgia、Tahoma、Verdana のプリセットフォントから選択するか、TTFファイルを使って独自のカスタムフォントをアップロードできます。
ページ上の招待状の位置情報
サポート招待状アイコンの最も一般的な位置情報は右下隅で、下端と側面から20ピクセルずらします。これは通常、重要なコンテンツを遮らずに見つけやすい位置です。
ご自身のサイトをデスクトップとモバイルの両方で確認することをおすすめします。サイトにすでにこの位置にバナーやボタンがある場合、顧客の使いやすさを損なったり、ユーザーの流れを妨げたりする可能性があります。
同じ場所に、Cookieバナー、ナビゲーションバー、または別のウィジェットなどの要素がすでにある場合は、左または右に配置を変更するか、下端や左右からのオフセットを調整することを検討してください。
例
モバイルデバイスで、チャット招待状ボタンがページ下部の重要なリンクを覆っていることに気づいた場合は、招待状アイコンがその要素を覆わなくなるまでオフセットを増やしてください。
また、「消費者が招待状をドラッグして移動できるように有効にする」ことで、ユーザーがページ上でアイコンをさらに自由に移動できるようにすることもできます。
よくある質問
チャット招待状アイコンが、モバイル端末の特定のページでユーザーの操作を妨げたり、気を散らしたりしています。どのような選択肢がありますか？
回答：
これを実現する方法はいくつかあります。
オプション1： ページ上の招待状アイコンの位置を変更します。offset と position オプションを使用して、ページ上での招待状の配置を移動できます。これは招待状を編集することで設定されます。
オプション2: ページの位置情報に基づいてチャットのアイコンを表示または非表示にします。すべての注文ページでチャット招待状を完全に削除したい場合は、注文ページを除外するように位置情報（Location）を編集してください。たとえば、URL に「checkout」を含むすべてのページを除外できます。
オプション3: デバイスごとにターゲティングを設定します。招待状アイコンをモバイルサイトに表示したくない場合は、［キャンペーン ターゲティング］の下にある「モバイル ফোন」オプションのチェックを外してください。設定するには、クリックしてください キャンペーン, ターゲティング.
Zoom Campaigns では、 埋め込み招待状 オプションを提供しています。これは、チャットを起動するためにデフォルトの固定アイコンを使いたくない場合に利用できます。これにより、メニュー内のボタンやページ上のリンクのような、サイト上の任意の要素を、チャットウィンドウを開くトリガーにできます。
これを行うには、サイトの HTML にその要素を作成し、Zoom Campaign SDK を使ってチャットに接続します。ユーザーがその要素をクリックすると、チャットウィンドウが起動し、キャンペーン体験が始まります。必要であれば、サイト上の既存の HTML を使ってチャットウィンドウを起動することもできます。
ご注意
固定の招待状アイコンと、サイト上のボタンクリックでチャットを開くトリガーの両方を使いたいですか？
固定の招待状オプションを使用してキャンペーンを作成し、その後 Zoom の Campaign SDK を使ってチャットを開きます。
プロアクティブメッセージ
もっと積極的な方法でユーザーの注意を引き、チームや仮想エージェントとチャットしてもらいたい場合はどうでしょうか？ Zoomのプロアクティブメッセージ機能を使うと、顧客が招待状をクリックしてチャットを始めるのを待つのではなく、訪問者との会話を開始するよう設定できます。
仕組み
エンゲージメント向上: 適切なタイミングで人々の注意を引き、サポートを提供できます。
リードの増加: カスタムメッセージとボタンにより、エージェントとチャットして詳細情報を確認したり、フォローアップの通話のために情報を共有したりするよう促せます。
より迅速なサポート: 訪問者をボットまたはライブエージェントにすばやく接続し、遅延なく回答を得られるようにします。
ユーザーがプロアクティブメッセージが有効になっているページにアクセスすると、メッセージが表示され、ボタンをクリックして特定のフローを開始できます。
どこで設定するか
この機能は次の下で設定されます キャンペーンで、以下を使用するWebページ上のチャットキャンペーンで利用できます 固定 招待状タイプ。
ユーザーをターゲットにする
プロアクティブメッセージに遅延を設定して、特定の時間そのページにいたユーザーにだけ表示されるようにできます。また、ユーザーに24時間以内に1回だけメッセージを表示するのか、ユーザーがページを更新したり別の一致するページを訪れたりしたときにプロアクティブメッセージを再表示するのかも選択できます。
よくある質問
いつでもチャットを開始できるように招待状アイコンを表示したい一方で、特定のページ（たとえば自社の料金ページ）でお客様の声にプロアクティブメッセージも送りたい場合、どう設定すればよいですか？
回答
2つのキャンペーンを作成する必要があります。1つはサイト全体に表示する通常の招待状用（「Campaign A」）、もう1つはプロアクティブメッセージを表示したいページ用（「Campaign B」）です。
各キャンペーンについて、重複しないようにキャンペーンの位置情報を定義する必要があります。
例
キャンペーン A の位置情報は「zoom.us/pricing」を除外し、キャンペーン B の位置情報には「zoom.us/pricing」を含める必要があります。こうすることで、URL に「zoom.us」が含まれる場所を訪れたユーザーには通常の招待状が表示されますが、特定のページ「zoom.us/pricing」にアクセスしたユーザーには、プロアクティブメッセージが表示されます。
アバター
アバターは、ウェブチャットのメッセージの横に表示される画像です。会話に個性とブランディングをもたらすのに役立ちます。
ユーザーがエージェントに接続する前に送信されるメッセージ（たとえば、ウェルカムメッセージや Zoom Virtual Agent）については、すべてのエクスペリエンスに共通するデフォルトのアバターを 1 つ設定することも、個々のチャットフローごとに固有のアバターを設定することもできます。これにより、一貫性を保つことも、異なるブランドやユースケースに合わせてエクスペリエンスを調整することもできます。
を使用している場合は、 Zoom コンタクトセンター次の項目をクリックしてください:
設定
消費者エクスペリエンス
デフォルトのフローメッセージのアバターと名前。
を使用している場合は、 Zoom Virtual Agent のみ次の項目をクリックしてください:
AI Studio
仮想エージェント
チャットボット
設定
顧客がボットから Zoom コンタクトセンターのライブエージェントに移動するとき、エージェントのアバターの表示方法も制御できます。コンタクトセンターのエージェントのプロフィール画像、イニシャル、または設定済みのアバター画像を表示するように選択できます。
設定するには、以下をクリックします:
設定
消費者エクスペリエンス
表示画像
追加のチャット構成設定
Zoom Campaign SDK でウェブチャットウィンドウを制御する
Zoom コンタクトセンター (ZCC) と Zoom Virtual Agent (ZVA) の Campaign SDK により、開発者はウェブチャットの動作や Web サイトとのやり取りをより細かく制御できます。ユーザーの操作、ページのコンテキスト、またはカスタムロジックに基づいて、チャットの動作をプログラムで開く、閉じる、制御することができます。
たとえば、ユーザーがページに一定秒数滞在したときや、特定のボタンをクリックしたときに、チャットウィンドウが自動的に開くように設定できます。
参照 Zoom Developer Documentation SDK Reference 詳細について。
サイト全体のチャットの永続化
チャットの永続化は、ユーザーのチャット セッションがサイト上の異なるページ間を移動しても継続するかどうかを制御します。
永続化が 有効な場合 （デフォルト）： 同じチャットがページをまたいで開いたままになるため、ユーザーは中断なく会話を続行できます。
永続化が 無効: チャットは、ユーザーが新しいページに移動しても継続しません。ただし、そのページが最初のキャンペーンで定義された位置情報の一部として明示的に含まれている場合は除きます。
この変更により、同じドメイン上に複数のブランドや部門を持つ企業が、チャットキャンペーンを分けて管理しやすくなります。関連のないページ間でユーザーがチャットを引き継ぐことを防ぎ、手動設定の必要性も減らします。
この設定は次の場所で見つけられます Zoom コンタクトセンター および Zoom Virtual Agent 設定.
サウンド通知
デフォルトでは、エージェントまたは仮想エージェントがウェブチャットでメッセージを送信すると、消費者には通知サウンドが再生されます。デフォルトのサウンドがブランド体験にとって邪魔に感じられる場合は、次の場所でオフにできます Zoom コンタクトセンター または Zoom Virtual Agent 設定.
消費者は、必要に応じてチャットメニューから再度有効にすることもできます。
最終更新
役に立ちましたか？