# チャット体験を構築する

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

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

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

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

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

#### <mark style="color:青;">ウィンドウサイズとモバイル体験</mark>

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

モバイルデバイスでは、限られた画面スペースを最大限に活用し、すっきりと読みやすい体験を確保するために、チャットウィンドウは全画面で開きます。

<figure><img src="/files/7236173aad6048ae052af70292ba6f3c7680176a" alt="Image of mobile Zoom Virtual Agent window, opened full-screen." width="375"><figcaption></figcaption></figure>

<figure><img src="/files/b316573fd0c4686d0e0b44a947073e743bce52b2" alt="" width="375"><figcaption></figcaption></figure>

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

* **S:** 540ピクセル
* **M:** 650ピクセル、 **デフォルト**
* **L:** 780ピクセル

{% hint style="info" %}
**注**

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

<figure><img src="/files/8637473310620361102b41151f6da01494fc745d" alt="Image of desktop Zoom Virtual Agent window, opened in the lower right corner of the window."><figcaption></figcaption></figure>

#### <mark style="color:青;">ヘッダーバー</mark>

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

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

**フルヘッダー画像**

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

<figure><img src="/files/3922784991ff1ce53c841b1eacc806e3b88b815d" alt="This image shows a chat window with a blue gradient header that says Zoom Virtual Agent. The image fills the header space." width="375"><figcaption></figcaption></figure>

**アバター画像サイズ**

40×40ピクセルの画像を追加して、ヘッダーバー内に単独で、またはヘッダーテキストと並べて表示できます。

{% columns %}
{% column %}

<figure><img src="/files/45dee1a5a9871e37c9b4e461c7b8fb0c473ab9ab" alt="Image of a chat screen with Zoom logo in the header bar."><figcaption></figcaption></figure>
{% endcolumn %}

{% column %}

<figure><img src="/files/b316573fd0c4686d0e0b44a947073e743bce52b2" alt="Image of a chat screen with Zoom logo and header text in the header bar."><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

**ヘッダーテキストのみ**

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

<figure><img src="/files/60d140cc0ebbb2eabdd4898b2a10c75ac8386c4f" alt="Image of a chat screen with header text only in the header bar." width="375"><figcaption></figcaption></figure>

すっきりとしたミニマルなデザインにするために、次を選択することもできます **空のままにする**。これにより、ユーザーの注意をチャットに集中させます。

<figure><img src="/files/c11de7a01ef0b4d793621fdd61af787ffffca1ea" alt="Image of a chat screen with nothing in the header bar." width="375"><figcaption></figcaption></figure>

次を使用できます **ヘッダーの背景色とアイコンに任意の色を選択**。これは、チャットデザインをWebサイトに合わせるのに便利です。

{% hint style="warning" %}
**注意**

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

<img src="/files/11f1ff494dd11d8435b7fc220c3b38fe9ee490b1" alt="Image of a chat screen with a blue header bar, with no logo or text." data-size="original">
{% endhint %}

#### <mark style="color:青;">チャットバブル、テキスト、アイコンなどの色</mark>

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

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

<figure><img src="/files/f4c79b3322790fd485edd0f5e5175318437555bd" alt="Image of the template for formatting your engagement window."><figcaption></figcaption></figure>

#### <mark style="color:青;">ウェルカム画面</mark>

この **ウェルカム画面** Zoom コンタクトセンターと Zoom Virtual Agent のウェルカム画面は、チャットが始まる前に表示されるオプションの導入画面で、お客様に挨拶し、情報を収集し、体験をブランドに合わせる機会を提供します。

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

***

### 招待状デザイン

招待状は、Webサイト上でサポート体験を開始するものです。最も一般的なのは、 [**Sticky** 招待状タイプ](/technical-library/ja/bijinesusbisu/zoom-contact-center/expert-insights/customize-user-chat-support-experience.md#the-parts)で、これはWebサイト上に表示されるフローティングアイコンです。ユーザーがこれをクリックすると、チャットウィンドウが開いて体験が開始されます。

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

そこから、 **+キャンペーンを追加** または既存のキャンペーンの下書きを開きます。 **招待状** セクションをクリックして新しい招待状を作成します。

<figure><img src="/files/a40a7d7d42000c54cbada8311766508bebedd01b" alt="Image of a Zoom Support window that says &#x22;Hello! How can we help?&#x22;" width="375"><figcaption></figcaption></figure>

次の設定を **Sticky 招待状** アイコンに対して設定できます:

* **ボタンサイズ:** チャット招待状アイコンのサイズは、簡単に気づいてクリックまたはタップできるほど十分に大きくする必要がありますが、ユーザー エクスペリエンスを損なったり、重要なコンテンツを覆ったりしない程度に抑える必要があります。Zoom では 3 種類の招待状サイズを提供しています:
  * **S:** 40 ピクセル
  * **M:** 56 ピクセル、 **デフォルト**
  * **L:** 72 ピクセル
* **ボタンの色:** ウェブサイトの背景に対して高いコントラストを持つボタンの色を選択してください。次のガイドラインに従うことをおすすめします [WCAG 2.1 ガイドライン](https://www.w3.org/TR/WCAG21/#contrast-minimum)。これは、アイコンやボタンなどのユーザーインターフェース（UI）コンポーネントがその背景に対して最低 3:1 のコントラスト比を満たすことを意味します。
* **アイコン:** アイコンは、ボタンをタップしたときに何が起こるかをユーザーがイメージするのに役立ちます。Zoom では、チャットの開始を示す デフォルト のデザインをいくつか 選択 できます。また、SVG ファイルを使用して独自のカスタムアイコンを 追加 することもできます。SVG ファイルは 10MB 未満である必要があります。
* **角の丸み:** 招待状 アイコンをどのくらい丸く、または四角くしたいですか？ウェブサイトを見て、ボタンの見た目に一貫したパターンがあるか確認するか、ブランドチームに好みがあるか尋ねてください。8 ピクセルのように角の丸みを小さくすると、招待状 はより四角くなります。28 ピクセルのように角の丸みを大きくすると、招待状 はより丸くなります。
* **招待状にテキストを追加:** 招待状ボタンにテキストラベルを追加すると、より明確で親しみやすくなります。ユーザーはボタンの目的をすぐに理解できるため、アイコンの意味を推測する必要がありません。ただし、その分スペースをより多く使い、特にモバイルでは画面が煩雑になる可能性があります。対象ユーザーと、最もよく使われるデバイスを考慮してください。フォントを追加する場合は、Arial、Georgia、Tahoma、Verdana の既定のフォントオプションから選択できます。または、TTF ファイルを使用して独自のカスタムフォントをアップロードできます。

#### <mark style="color:青;">**ページ上の招待状の位置情報**</mark>

サポート招待状アイコンの最も一般的な位置は右下隅で、下端と側面から 20 ピクセルのオフセットを取る配置です。これは通常、重要なコンテンツを妨げずに見つけやすいです。

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

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

{% hint style="success" %}
**例**

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

また、「ユーザーが招待状をドラッグして移動できるようにする」を有効にして、ユーザーがページ上でアイコンをさらに柔軟に移動できるようにすることもできます。

#### <mark style="color:青;">よくある質問</mark>

チャット招待状アイコンが、モバイル端末の特定のページでユーザーの操作を妨げたり、気を散らしたりしています。どのような選択肢がありますか？

**回答:**

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

* **オプション1:** ページ上で招待状アイコンの位置を変更します。オフセットと位置のオプションを使用して、ページ上での招待状の配置を移動できます。これは招待状を編集して設定します。
* **オプション 2:** 位置情報に基づいてチャットのアイコンを表示または非表示にします。すべての注文を確定ページでチャットの招待状を完全に削除したい場合は、Locationを編集して注文を確定ページを除外します。たとえば、URLに「checkout」を含むすべてのページを除外できます。
* **オプション3:** デバイス別にターゲティングを設定します。招待状アイコンをモバイルサイトに表示したくない場合は、［キャンペーン ターゲティング］で［mobile phone］オプションのチェックを外してください。設定するには、クリックします **キャンペーン**, **ターゲティング**.

Zoom Campaignsでは、 [**埋め込み招待状**](/technical-library/ja/bijinesusbisu/zoom-contact-center/expert-insights/customize-user-chat-support-experience.md#the-parts) オプションを使用できます。これは、チャットを起動するためにデフォルトの固定アイコンを使いたくない場合に便利です。これにより、メニュー内のボタンやページ上のリンクなど、サイト上の任意の要素を、チャットウィンドウを開くトリガーにできます。

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

<figure><img src="/files/96a846752e1eca97f66b4af4db289bc573f7ba97" alt="Image of the Create Embedded Invitation screen." width="375"><figcaption></figcaption></figure>

{% hint style="warning" %}
**注意**

固定招待状アイコンと、サイト上のボタンクリックでチャットを開くトリガーの両方を使いたいですか？

固定招待状オプションを使用してキャンペーンを作成し、その後 [ZoomのCampaign SDK](https://developers.zoom.us/docs/contact-center/web/sdk-reference/) を使ってチャットを開くようにトリガーします。
{% endhint %}

***

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

ユーザーの注意を引いて、チームや仮想エージェントとチャットしてもらうために、もっとアクティブな方法を使いたい場合はどうでしょうか？ Zoomのプロアクティブメッセージ機能を使うと、招待状をクリックして顧客がチャットを開始するのを待つのではなく、企業側から訪問者との会話を開始するよう設定できます。

#### <mark style="color:青;">どのように役立つか</mark>

* **エンゲージメントの向上:** 適切なタイミングで人の注意を引き、サポートを提供できます。
* **より多くのリード獲得:** カスタムメッセージやボタンにより、エージェントとのチャットで詳細情報を確認してもらったり、フォローアップ通話のために連絡先情報を共有してもらったりできます。
* **より迅速なサポート:** 訪問者をボットまたはライブエージェントへすばやく接続し、遅延なく回答を得られるようにします。

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

#### <mark style="color:青;">設定場所</mark>

この機能は **キャンペーン**の下で設定され、Webページ上のチャットキャンペーンで利用できます。これらのページは **Sticky** 招待状タイプを使用します。

#### <mark style="color:青;">ユーザーを対象にする</mark>

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

<figure><img src="/files/98c6056103ff8517e1081d4bbcf5cd14e1a8ae00" alt="Image of a Zoom Campaign window that asks &#x22;How can I help&#x22;." width="191"><figcaption></figcaption></figure>

#### <mark style="color:青;">よくある質問</mark>

ユーザーがいつでもチャットを開始できるように招待アイコンを表示したいのですが、特定のページ（たとえば、会社の料金ページ）でお客様の声にプロアクティブメッセージも送りたいです。どのように設定すればよいですか?

**回答**

2つのキャンペーンを作成する必要があります。1つはサイト全体向けのスタンダードな招待状（"Campaign A"）、もう1つはプロアクティブメッセージを表示したいページ用のキャンペーン（"Campaign B"）です。

各キャンペーンでは、重ならないようにキャンペーンの位置情報を定義する必要があります。

{% hint style="success" %}
**例**

Campaign A の位置情報には "zoom.us/pricing" を含めず、Campaign B の位置情報には "zoom.us/pricing" を含めます。そうすることで、"zoom.us" を含む任意の URL を訪問したユーザーには通常の招待状が表示され、特定のページ "zoom.us/pricing" にアクセスしたユーザーにはプロアクティブメッセージがポップアップ表示されます。
{% endhint %}

***

### アバター

アバターは、Webチャットのメッセージの横に表示される画像です。会話に個性とブランディングを加えるのに役立ちます。

<figure><img src="/files/4d5d4e0f8484c8feb1ba4fc2c3a253baadc66816" alt="Image of the Zoom Virtual Agent avatar, including a picture of a woman with dark hair and a headset." width="375"><figcaption></figcaption></figure>

ユーザーがエージェントと接続する前に送信されるメッセージ（たとえば、ウェルカムメッセージや Virtual Agent）の場合、すべての体験で単一のデフォルトアバターを設定することも、各個別のチャットフローごとに固有のアバターを設定することもできます。これにより、一貫性を保つことも、さまざまなブランドやユースケースに合わせて体験を調整することもできます。

を使用している場合は、 **Zoom コンタクトセンター**次の項目をクリックします:

1. 設定
2. 消費者エクスペリエンス
3. デフォルトフローのメッセージアバターと名前。

を使用している場合は、 **Zoom Virtual Agent のみ**次の項目をクリックします:

1. AI Studio
2. Virtual Agents
3. Chatbots
4. 設定

<figure><img src="/files/9fa1e9cb22b1c6f3a9d30754b1473dc943497189" alt="Side-by-side image of the Customize Name and Avatar screen and a rendering of the settings."><figcaption></figcaption></figure>

お客様がボットから Zoom コンタクトセンター のライブエージェントに移動するときに、エージェントのアバターの表示方法も制御できます。コンタクトセンターのプロフィール画像、イニシャル、または設定済みのアバター画像を表示するように選択できます。

設定するには、次の項目をクリックします:

1. 設定
2. 消費者エクスペリエンス
3. 表示画像

***

### 追加のチャット構成設定

#### <mark style="color:青;">Zoom Campaign SDK で Webチャットウィンドウを制御する</mark>

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

たとえば、ユーザーが特定の秒数そのページにいたときや、特定のボタンをクリックしたときに、チャットウィンドウが自動的に開くように設定できます。

参照 [Zoom Developer Documentation SDK Reference](https://developers.zoom.us/docs/contact-center/web/sdk-reference/) で詳細をご確認ください。

#### <mark style="color:青;">サイト全体のチャット永続化</mark>

チャットの永続化は、ユーザーのチャットセッションがWebサイト内の異なるページに移動しても継続されるかどうかを制御します。

* **永続化が&#x20;*****有効*****&#x20;（デフォルト）:** 同じチャットがページ間で開いたまま維持されるため、ユーザーは中断することなく会話を続けられます。
* **永続化が&#x20;*****無効*****:** そのページが最初のキャンペーンで定義された位置情報の一部として明示的に含まれていない限り、ユーザーが新しいページに移動してもチャットは継続されません。

この変更により、同じドメイン内に複数のブランドや部門を持つ企業が、チャットキャンペーンを分けて管理しやすくなります。これにより、関連性のないページ間でユーザーがチャットを引き継ぐのを防ぎ、手動設定の必要性も減らせます。

この設定は次の場所にあります **Zoom コンタクトセンター** および **Zoom Virtual Agent の設定**.

#### <mark style="color:青;">サウンド通知</mark>

デフォルトでは、エージェントまたは仮想エージェントが web チャットでメッセージを送信すると、利用者には通知サウンドが聞こえます。デフォルトのサウンドがブランド体験を妨げると感じる場合は、次でオフにできます **Zoom コンタクトセンター** または **Zoom Virtual Agent の設定**.

必要に応じて、利用者はチャットメニューで再度有効にすることもできます。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://library.zoom.com/technical-library/ja/bijinesusbisu/zoom-contact-center/expert-insights/customize-user-chat-support-experience/build-your-chat-experience.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.