チャット体験を構築する
Zoomのツールを使えば、ほとんどコードを書かなくても、チャット体験を簡単にカスタマイズして公開できます。
チャット エンゲージメント ウィンドウ
チャット エンゲージメント ウィンドウは、ユーザーが仮想エージェントまたは人間のエージェントにメッセージを送るためのものです。Zoomのツールを使えば、見やすく操作しやすく、会社のブランドに合ったチャット ウィンドウを作成できます。
チャット エンゲージメント ウィンドウを作成または編集するには、ZoomのWeb管理者に移動します。
コンタクトセンター
コンタクトセンター、キャンペーン管理。
バーチャルエージェント
AI Studio、バーチャルエージェント、キャンペーン。
そこで次をクリックします +キャンペーンを追加 または既存のキャンペーンの下書きを開きます。次までスクロールします チャット エンゲージメント ウィンドウ そのセクションでウィンドウを作成または編集します。
ウィンドウサイズとモバイルでの体験
Zoomのチャット エンゲージメント ウィンドウはレスポンシブ対応で、ユーザーがデスクトップまたはスマートフォンからサイトにアクセスすると、レイアウトが自動的に調整されます。
モバイルデバイスでは、画面の限られたスペースを最大限に活用し、すっきりと読みやすい体験を実現するため、チャット ウィンドウは全画面で開きます。
デスクトップデバイスからチャットにアクセスするユーザーには、ウィンドウの高さを次の3つのサイズから選択できます:
S: 540ピクセル
M: 650ピクセル、 デフォルト
L: 780ピクセル
ヘッダー バー
この チャット ヘッダー バー は、チャット設計の重要な要素です。入念に設計すると、サポート体験に何を期待できるかという文脈をユーザーに示し、会話への安心感を与えます。ヘッダーを使ってサポートチームに関する情報を共有したり、ブランドのロゴや色を追加したりできます。
Zoom CXでは、選択できるヘッダーのデザインオプションがいくつか用意されています。
ヘッダー全体画像
ヘッダー領域全体を埋める426ピクセル×95ピクセルの画像を追加します。カスタムデザインに最適です。
アバター画像サイズ
ヘッダー バーに表示される40ピクセル×40ピクセルの画像を追加します。単独で、またはヘッダーテキストと並べて表示されます。
ヘッダーテキストのみ
チーム名、オンライン状況、サポート時間など、さまざまな内容について簡単なメモを共有できます。H1、H2、H3、または本文のサイズを使ってヘッダーテキストのサイズを調整します。
シンプルでミニマルなデザインにするには、 空のままにすることで、ユーザーをチャットに集中させることができます。
次を使用できます ヘッダーの背景色とアイコンに任意の色を選択、チャットのデザインをWebサイトに合わせるのに便利です。
注意
背景色を変更する場合は、最小化とメニューのアイコンが引き続き見えることを確認してください。アイコンの色も変更する必要がある場合があります。
チャット吹き出し、テキスト、アイコンなどの色
エンゲージメント ウィンドウ ビルダーでは、チャットに必要な正確な色を選択できます。ウィンドウの各部分に16進コードを入力し、プレビューを見て表示を確認します。
Zoomには、すぐに使えるテンプレートが用意されています。見た目を美しく、読みやすく保つために、ブランドカラーを使用し、テキスト色と背景色のコントラストが十分であることを確認してください。
ウェルカム画面
この ウェルカム画面 ZoomコンタクトセンターおよびZoom Virtual Agentでは、チャット開始前に表示されるオプションの導入画面で、顧客にあいさつしたり、情報を収集したり、体験をブランドに合わせたりする機会を提供します。
これはWebチャット体験で利用できます。設定するには、次をクリックします チャット エンゲージメント ウィンドウ、次に ウェルカム画面 タブ。
招待状デザイン
招待状とは、Webサイトでサポート体験を開始するものです。最も一般的なのは 固定 招待状タイプで、Webサイトに表示されるフローティングアイコンです。ユーザーがこれをクリックすると、チャット ウィンドウが開き、体験が始まります。
招待状を作成または編集するには、Zoom の Web 管理者に移動します。
コンタクトセンター
コンタクトセンター、キャンペーン管理。
バーチャルエージェント
AI Studio、バーチャルエージェント、キャンペーン。
そこで、クリックします +キャンペーンを追加 または既存のキャンペーンの下書きを開きます。次までスクロールします 招待状 セクションで新しい招待状を作成します。
次の設定を、あなたの 固定招待状 アイコン:
ボタンサイズ: チャット招待状アイコンのサイズは、簡単に気づいてクリックまたはタップできるほど十分に大きく、しかしユーザー体験を妨げたり重要なコンテンツを隠したりしない程度に抑える必要があります。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: ページ上の招待状アイコンの位置を変更します。オフセットと位置のオプションを使用して、ページ上での招待状の配置を移動できます。これは招待状を編集して設定します。
オプション 2: ページの位置情報に基づいてチャットのアイコンを表示または非表示にします。すべての注文を確定ページからチャットの招待状を完全に削除したい場合は、Location を編集して注文を確定ページを除外します。たとえば、URL 内に「注文を確定」が含まれるすべてのページを除外できます。
オプション3: デバイス別にターゲティングを設定します。モバイルサイトに招待状アイコンを表示したくない場合は、[キャンペーン ターゲティング] の下にある「モバイル ফোন」オプションのチェックを外してください。設定するには、クリック キャンペーン, ターゲティング.
Zoom Campaigns は、ひとつの 埋め込み招待状 オプションを提供します。これは、チャットを起動するためにデフォルトの固定アイコンを使いたくない場合に便利です。これにより、メニュー内のボタンやページ上のリンクのように、サイト上の任意の要素を、チャット ウィンドウを開くためのトリガーにできます。
これを行うには、サイトの HTML に要素を作成し、Zoom Campaign SDK を使ってそれをチャットに接続します。ユーザーがその要素をクリックすると、チャット ウィンドウが起動し、キャンペーン体験が始まります。必要であれば、サイト上の既存の HTML を使ってチャット ウィンドウを起動することもできます。
注意
固定の招待状アイコンと、サイト上でボタンをクリックしてチャットの開始もトリガーしたいですか？
固定の招待状オプションを使ってキャンペーンを作成し、次に Zoom の Campaign SDK を使ってチャットの開始をトリガーします。
プロアクティブ メッセージ
チームや仮想エージェントとチャットしてもらうために、ユーザーの注意を引く、もっとアクティブな方法が必要な場合はどうでしょうか？ Zoom のプロアクティブ メッセージ機能を使うと、招待状をクリックして顧客がチャットを開始するのを待つのではなく、企業側から訪問者に会話を開始するよう設定することができます。
その仕組み
より高いエンゲージメント: 適切なタイミングで人々の注目を集め、サポートを提供できます。
より多くのリード: カスタムメッセージとボタンで、エージェントとのチャットを通じて詳細情報を確認したり、フォローアップの通話のために連絡先情報を共有したりするよう促せます。
より迅速なサポート: 訪問者をボットまたはライブエージェントにすばやく接続し、遅れることなく回答を得られるようにします。
ユーザーがプロアクティブメッセージングが有効なページにアクセスすると、メッセージが表示され、ボタンをクリックして特定のフローを開始できます。
設定場所
この機能は次の項目で設定します キャンペーン、また、次の項目を使用するウェブページ上のチャットキャンペーンで利用できます 固定 招待状タイプ。
ユーザーをターゲットにする
プロアクティブメッセージに遅延を設定して、そのページに一定時間滞在したユーザーにのみ表示されるようにできます。また、24時間の間にユーザーへメッセージを1回だけ表示するか、ページを再読み込みしたり、条件に一致する別のページを訪れたりしたときにプロアクティブメッセージを再表示するかも選択できます。
よくある質問
ユーザーがいつでもチャットを開始できるように招待状アイコンを表示したいのですが、特定のページ（たとえば自社の料金ページ）ではお客様にもプロアクティブメッセージを送りたいです。どう設定すればよいですか?
回答
2つのキャンペーンを作成する必要があります。1つはサイト全体で使う標準の招待状用（「Campaign A」）、もう1つはプロアクティブメッセージを表示したいページ用（「Campaign B」）です。
各キャンペーンでは、重複しないようにキャンペーンの位置情報を定義します。
例
Campaign A の位置情報には「zoom.us/pricing」を含めず、Campaign B の位置情報には「zoom.us/pricing」を含めます。こうすることで、「zoom.us」を含む任意のURLを訪れたユーザーには通常の招待状が表示されますが、特定のページ「zoom.us/pricing」にアクセスしたユーザーにはプロアクティブメッセージがポップアップ表示されます。
アバター
アバターは、ウェブチャットでメッセージの横に表示される画像です。会話に個性とブランディングを与えるのに役立ちます。
ユーザーがエージェントに接続する前に送信されるメッセージ（たとえば、ウェルカムメッセージや Virtual Agent）については、すべてのエクスペリエンスで1つのデフォルトアバターを設定することも、各チャットフローごとに個別のアバターを設定することもできます。これにより、統一感を保つことも、異なるブランドやユースケースに合わせて体験を調整することもできます。
〜を使用している場合は Zoom コンタクトセンター、次をクリックしてください:
設定
コンシューマーエクスペリエンス
デフォルトフローメッセージのアバターと名前。
〜を使用している場合は Zoom Virtual Agent のみ、次をクリックしてください:
AI Studio
バーチャルエージェント
チャットボット
設定
お客様がボットから Zoom コンタクトセンターのライブエージェントに移行する際、エージェントのアバターの表示方法も制御できます。エージェントのプロフィール画像、イニシャル、または設定したアバター画像のいずれかを表示できます。
設定するには、次をクリックしてください:
設定
コンシューマーエクスペリエンス
画像を表示
追加のチャット設定
Zoom Campaign SDK でウェブチャットウィンドウを制御する
Zoom コンタクトセンター（ZCC）と Zoom Virtual Agent（ZVA）の Campaign SDK により、開発者はウェブチャットの動作やサイトとのやり取りをより細かく制御できます。ユーザーの操作、ページのコンテキスト、またはカスタムロジックに基づいて、チャットの動作をプログラムで開閉・制御できます。
たとえば、ユーザーがそのページに一定秒数滞在したときや特定のボタンをクリックしたときに、チャットウィンドウが自動的に開くようにできます。
次を参照してください： Zoom Developer Documentation SDK リファレンス 詳細については。
サイト全体のチャット永続性
チャットの永続性は、ユーザーのチャットセッションがサイト内の異なるページ間を移動しても継続されるかどうかを制御します。
永続性が 有効な場合 （デフォルト）: 同じチャットがページ間で開いたままになり、ユーザーは中断なく会話を続けられます。
永続性が 無効です: ユーザーが新しいページに移動してもチャットは継続されません。ただし、そのページが最初のキャンペーンで定義された位置情報の一部として明示的に含まれている場合は除きます。
この変更により、同じドメイン上に複数のブランドや部門を持つ企業でも、チャットキャンペーンを分けて管理しやすくなります。これにより、ユーザーが関係のないページ間でチャットを引き継ぐのを防ぎ、手動設定の必要性も減らせます。
この設定は次の項目で見つけられます Zoom コンタクトセンター および Zoom Virtual Agent の設定.
サウンド通知
デフォルトでは、エージェントまたはバーチャルエージェントがウェブチャットでメッセージを送信すると、ユーザーは通知音を聞きます。デフォルトのサウンドがブランディング体験にそぐわないと感じる場合は、次の項目でオフにできます Zoom コンタクトセンター または Zoom Virtual Agent の設定.
利用者は、必要であればチャットメニューで再度有効にすることもできます。
最終更新
役に立ちましたか？