チャットエクスペリエンスの構築

Zoom のツールを使えば、ほとんどコードを書かずにチャット体験をカスタマイズして開始することが簡単にできます。

チャット エンゲージメント ウィンドウ

チャットエンゲージメントウィンドウは、ユーザーが仮想エージェントまたは人間のエージェントとメッセージをやり取りするためのウィンドウです。Zoom のツールを使えば、見やすく操作しやすく、貴社のブランドに合ったチャットウィンドウを構築できます。

チャットエンゲージメントウィンドウを作成または編集するには、Zoom の Web 管理画面に移動します。

そこからクリックします +キャンペーンを追加 または既存のキャンペーンの下書きを開きます。ウィンドウを作成または編集するには、スクロールして チャット エンゲージメント ウィンドウ セクションに移動します。

ウィンドウサイズとモバイルでの表示

Zoom のチャットエンゲージメントウィンドウはレスポンシブであり、ユーザーがデスクトップやスマートフォンからサイトにアクセスした場合にレイアウトが自動的に適応します。

モバイルデバイスでは、限られた画面スペースを最大限に活用し、読みやすく清潔な体験を提供するためにチャットウィンドウが全画面で開きます。

デスクトップデバイスでチャットにアクセスするユーザーには、ウィンドウの高さについて3つのサイズオプションから選択できます:

• S: 540 ピクセル

• M: 650 ピクセル、 既定

• L: 780 ピクセル

注記

読みやすさを確保するために、幅は常に 420 ピクセルに固定されています。

ヘッダーバー

この チャット ヘッダーバー はチャットデザインの重要な要素です。慎重にデザインすると、ユーザーにサポート体験の期待値や会話への信頼感を与えます。ヘッダーを使ってサポートチームに関する情報を共有したり、ブランドのロゴや色を追加したりできます。

Zoom CX はいくつかのヘッダーデザインオプションを提供しており、そこから選択できます。

フルヘッダー画像

ヘッダー領域全体を埋める 426 ピクセル × 95 ピクセルの画像を追加します。カスタムデザインに最適です。

アバター画像サイズ

ヘッダーバーに表示される 40 × 40 ピクセルの画像を追加できます。単独で表示することも、ヘッダーテキストと一緒に表示することもできます。

ヘッダーテキストのみ

チーム名、対応状況、サポート時間など、簡単なメモを共有します。ヘッダーテキストのサイズは H1、H2、H3 または本文段落サイズで調整できます。

洗練されたミニマリストなデザインにするには、 空白のままにする, ユーザーの注意をチャットに集中させることができます。

次の機能を使用できます: ヘッダーの背景とアイコンの任意の色を選択する、チャットデザインをウェブサイトに合わせる際に便利です。

注意事項

背景色を変更する場合は、最小化とメニューのアイコンが引き続き見えることを確認してください。アイコンの色も変更する必要があるかもしれません。

チャットバブル、テキスト、アイコンなどの色

エンゲージメントウィンドウビルダーでは、チャットの各部分に対して正確な色を選択できます。ウィンドウの各部分に対して 16 進コードを入力し、プレビューで見た目を確認します。

Zoom は開始用のテンプレートを提供します。見た目を良く（読みやすく）保つために、ブランドカラーを使用し、テキストと背景の色のコントラストが十分であることを確認してください。

ウェルカム画面

この ウェルカム画面 Zoom Contact Center および Zoom Virtual Agent のウェルカム画面は、チャット開始前に表示される任意の導入画面であり、顧客に挨拶したり情報を収集したり、体験をブランドに合わせたりする機会を提供します。

これはウェブチャット体験で利用可能です。設定するには、 チャットエンゲージメント ウィンドウをクリックし、次に ウェルカム画面 タブを選択します。

---

招待デザイン

をクリックします。招待はウェブサイトでサポート体験を起動するものです。最も一般的なのは 固定表示（Sticky） の招待タイプで、ウェブサイトに表示されるフローティングアイコンです。ユーザーがこれをクリックすると、チャットウィンドウが開いて体験を開始します。

招待を作成または編集するには、Zoom の Web 管理画面に移動します。

そこから、クリックします +キャンペーンを追加 または既存のキャンペーンの下書きを開きます。ウィンドウを作成または編集するには、スクロールして 招待 セクションで新しい招待を作成します。

次の設定を 固定表示（Sticky）招待 アイコンに対して構成できます:

• ボタンサイズ: チャット招待アイコンのサイズは、簡単に見つけてクリックまたはタップできる十分な大きさでありながら、ユーザー体験を妨げたり重要なコンテンツを覆ったりしない大きさにする必要があります。Zoom は 3 つの招待サイズを提供します:

  • S: 40 ピクセル

  • M: 56 ピクセル、 既定

  • L: 72 ピクセル

• ボタンの色: ウェブサイトの背景に対して高いコントラストを持つボタンの色を選んでください。ユーザーインターフェース（アイコンやボタンなど）の背景に対する最小コントラスト比として、 WCAG 2.1 ガイドラインに従うことを推奨します。これは最小コントラスト比 3:1 を指します。

• アイコン: アイコンは、ユーザーがボタンをタップしたときに期待できることの目安を示すのに役立ちます。Zoom はチャット開始を示すデフォルトデザインをいくつか提供しており、SVG ファイルを使用して独自のカスタムアイコンを追加することもできます。SVG ファイルは 10MB 未満である必要があります。

• 角の丸み（Corner Radius）: 招待アイコンをどの程度丸くするか四角くするかを決めます。ウェブサイト上のボタンの見た目にパターンがあるか確認するか、ブランドチームに好みがあるか尋ねてください。8 ピクセルなど小さな角の丸みを使用すると招待はより四角に、28 ピクセルなど大きな角の丸みを使用すると招待はより丸くなります。

• 招待にテキストを追加: 招待ボタンにテキストラベルを追加すると、目的がより明確になり誘引力が増します。ユーザーはボタンの目的をすぐに理解でき、アイコンの意味を推測する必要がなくなります。ただし、スペースを多く取るため特にモバイルでは画面が散らかる可能性があります。対象ユーザーと主に使用するデバイスを考慮してください。フォントを追加する場合は、Arial、Georgia、Tahoma、Verdana のプリセットフォントから選択するか、TTF ファイルでカスタムフォントをアップロードできます。

ページ上の招待の配置

サポート招待アイコンの最も一般的な配置は右下隅で、下および側面からのオフセットは 20 ピクセルです。通常、主要なコンテンツを遮らずに見つけやすい位置です。

デスクトップとモバイルの両方で自分のウェブサイトを確認することをお勧めします。サイトにすでにこの位置にバナーやボタンがある場合、顧客の使いやすさを損なったりユーザーフローを妨げたりする可能性があります。

クッキーバナー、ナビゲーションバー、別のウィジェットなど、チャット招待アイコンと同じ場所に既に要素がある場合は、配置を左または右に変更するか、下または側面からのオフセットを調整することを検討してください。

例

モバイルデバイスでチャット招待ボタンがページ下部の重要なリンクを覆っている場合は、招待アイコンがその要素を覆わなくなるまでオフセットを増やしてください。

「招待をドラッグして移動できるようにする」を有効にして、ユーザーがページ上でアイコンを自由に動かせるようにすることもできます。

よくある質問

チャット招待アイコンが特定のページでモバイルデバイス上のユーザーを遮ったり気を散らしたりしています。どんな選択肢がありますか？

回答:

これを解決する方法はいくつかあります。

• オプション 1: 招待アイコンのページ上の位置を変更します。オフセットと位置のオプションを使用してページ上の招待の配置を移動できます。これは招待を編集して構成します。

• オプション 2: ページの位置に基づいてチャットアイコンの表示・非表示を切り替えます。チェックアウトページなど特定のページでチャット招待を完全に削除したい場合は、ロケーションを編集してチェックアウトページを除外します。たとえば、URL に "checkout" を含むすべてのページを除外できます。

• オプション 3: デバイス別にターゲティングを設定します。モバイルサイトに招待アイコンを表示したくない場合は、キャンペーンターゲティングで「携帯電話」のオプションのチェックを外します。設定するには、クリックします キャンペーン, ターゲティング.

Zoom キャンペーンは、デフォルトの固定表示アイコンを使用せずにチャットを起動したい場合に、 埋め込み招待 オプションを提供します。これにより、メニュー内のボタンやページ上のリンクなど、ウェブサイト上の任意の要素をチャットウィンドウを開くトリガーにすることができます。

これを行うには、サイトの HTML で要素を作成し、Zoom Campaign SDK を使用してチャットに接続します。ユーザーがその要素をクリックすると、チャットウィンドウが起動してキャンペーン体験が開始します。既存の HTML をトリガーとして使用することもできます。

注意事項

固定表示（Sticky）招待アイコンと、ウェブサイト上のボタンのクリックでチャットを起動する両方を実現したいですか？

固定表示（Sticky）招待オプションを使ってキャンペーンを作成し、次に Zoom の Campaign SDK を使ってチャットを起動します。

---

プロアクティブメッセージング

ユーザーにより積極的に働きかけてチームや仮想エージェントとチャットしてもらいたい場合はどうしますか？Zoom のプロアクティブメッセージング機能を使用すると、企業が訪問者との会話を開始できるようになり、顧客が招待をクリックしてチャットを開始するのを待つ必要がなくなります。

その利点

• より良いエンゲージメント: 適切なタイミングで人々の注意を引き、支援を提供できます。

• リードの増加: カスタムメッセージやボタンにより、ユーザーがエージェントとチャットして詳細を確認したり、フォローアップ通話のために情報を共有したりするよう促せます。

• 迅速なサポート: 訪問者をボットやライブエージェントにつなげ、遅延なく回答を得られるようにします。

プロアクティブメッセージングが有効なページにユーザーがアクセスすると、メッセージが表示され、ユーザーは特定のフローを開始するためのボタンをクリックできます。

設定場所

この機能は キャンペーンの下で設定され、 固定表示（Sticky） 招待タイプ

を使用するウェブページのチャットキャンペーンで利用可能です。

ターゲット設定

よくある質問

プロアクティブメッセージに遅延を設定して、ユーザーがそのページに一定時間滞在した場合にのみ表示されるようにできます。24 時間内に一度だけ表示するか、ユーザーがページを更新したり別の一致ページを訪れたりした場合に再表示するかも選択できます。

ユーザーがいつでもチャットを開始できる招待アイコンを表示しつつ、特定のページ（例: 自社の料金ページ）で顧客にプロアクティブメッセージを送信したい場合は、どう設定しますか？

回答

次のように 2 つのキャンペーンを作成することをお勧めします: サイト全体での標準的な招待用のキャンペーン（「キャンペーン A」）と、プロアクティブメッセージを表示したいページ用の別のキャンペーン（「キャンペーン B」）です。

例

各キャンペーンについて、キャンペーンのロケーションが重複しないように定義してください。

---

キャンペーン A のロケーションには "zoom.us/pricing" を除外し、キャンペーン B のロケーションには "zoom.us/pricing" を含めるべきです。こうすることで、URL に "zoom.us" を含む任意のページを訪問するユーザーには通常の招待が表示されますが、特定のページ "zoom.us/pricing" にアクセスしたユーザーにはプロアクティブメッセージが表示されます。

アバター

アバターはウェブチャットのメッセージ横に表示される画像です。会話に個性やブランドをもたらすのに役立ちます。

ユーザーがエージェントに接続する前に送信されるメッセージ（例: ウェルカムメッセージや仮想エージェント）については、すべての体験で単一のデフォルトアバターを設定することも、個々のチャットフローごとに固有のアバターを設定することもできます。これにより、一貫性を保つか、ブランドやユースケースに応じて体験を調整する柔軟性が得られます。 Zoom Contact Centerもしあなたが

1. を使用している場合は、次をクリックしてください:

2. 消費者体験

3. 環境設定

ユーザーがエージェントに接続する前に送信されるメッセージ（例: ウェルカムメッセージや仮想エージェント）については、すべての体験で単一のデフォルトアバターを設定することも、個々のチャットフローごとに固有のアバターを設定することもできます。これにより、一貫性を保つか、ブランドやユースケースに応じて体験を調整する柔軟性が得られます。 デフォルトのフローメッセージ用アバターと名前。もしあなたが

1. AI Studio

2. Zoom Virtual Agent のみ

3. 仮想エージェント

4. Settings

チャットボット

顧客が Zoom Contact Center でボットからライブエージェントに移行する際、エージェントのアバターの表示方法も制御できます。Contact Center のプロフィール画像、イニシャル、または設定したアバター画像のいずれかを表示するよう選択できます。

1. を使用している場合は、次をクリックしてください:

2. 消費者体験

3. 設定するには、次をクリックします:

---

表示画像

追加のチャット構成設定

Zoom Campaign SDK で Web チャットウィンドウを制御する

Zoom Contact Center (ZCC) と Zoom Virtual Agent (ZVA) の Campaign SDK により、開発者は Web チャットの動作やウェブサイトとの連携をより細かく制御できます。ユーザーの操作、ページのコンテキスト、カスタムロジックに基づいて、プログラムでチャットの開閉や動作を制御できます。

たとえば、ユーザーがページに滞在してから一定秒数経過したときや特定のボタンをクリックしたときにチャットウィンドウが自動的に開くようにできます。 詳細については、 Zoom 開発者向けドキュメント SDK リファレンス

を参照してください。

サイト全体でのチャットの永続性

• チャットの永続性は、ユーザーがウェブサイト内の異なるページに移動したときにチャットセッションを継続するかどうかを制御します。 永続性が 有効 （既定）:

• チャットの永続性は、ユーザーがウェブサイト内の異なるページに移動したときにチャットセッションを継続するかどうかを制御します。 無効: 同じチャットがページ間で開いたままになり、ユーザーは会話を中断することなく続けられます。

ユーザーが新しいページに移動した場合、そのページが最初のキャンペーンで明示的に定義されたロケーションの一部でない限り、チャットは継続しません。

この変更により、同一ドメイン内で複数のブランドや部署を持つ企業がチャットキャンペーンを分離しやすくなります。関連性のないページ間でチャットが持ち越されるのを防ぎ、手動設定の必要性を減らします。 Zoom Contact Center および この設定は、.

Zoom Virtual Agent の環境設定

の下にあります。 Zoom Contact Center または この設定は、.

サウンド通知: デフォルトでは、エージェントまたは仮想エージェントが Web チャットでメッセージを送信すると、消費者は通知音を聞きます。デフォルトの音がブランド体験にそぐわない場合は、次の場所でオフにできます:　（訳注: 下の文で設定箇所が明示されています）　チャットメニュー。ユーザーは希望する場合、チャットメニューから再度有効にするオプションを持ち続けます。