> For the complete documentation index, see [llms.txt](https://library.zoom.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://library.zoom.com/technical-library/ja/bijinesusbisu/zoom-contact-center/expert-insights/customize-user-chat-support-experience/build-your-chat-experience.md).

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

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

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

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

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

| ...を使用している場合 | 次にクリック...                  |
| ------------ | -------------------------- |
| コンタクトセンター    | コンタクトセンター、キャンペーン管理。        |
| 仮想エージェント     | AI Studio、仮想エージェント、キャンペーン。 |

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

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

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

| ...を使用している場合 | 次にクリック...                  |
| ------------ | -------------------------- |
| コンタクトセンター    | コンタクトセンター、キャンペーン管理。        |
| 仮想エージェント     | AI Studio、仮想エージェント、キャンペーン。 |

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

<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種類の招待状サイズを用意しています:&#x20;
  * **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ピクセルずらします。これは通常、重要なコンテンツを遮らずに見つけやすい位置です。

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

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

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

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

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

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

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

**回答：**

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

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

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ページ上のチャットキャンペーンで利用できます **固定** 招待状タイプ。

#### <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" %}
**例**

キャンペーン A の位置情報は「zoom.us/pricing」を除外し、キャンペーン B の位置情報には「zoom.us/pricing」を含める必要があります。こうすることで、URL に「zoom.us」が含まれる場所を訪れたユーザーには通常の招待状が表示されますが、特定のページ「zoom.us/pricing」にアクセスしたユーザーには、プロアクティブメッセージが表示されます。
{% endhint %}

***

### アバター

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

<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>

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

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

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

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

1. AI Studio
2. 仮想エージェント
3. チャットボット
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 でウェブチャットウィンドウを制御する</mark>

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

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

参照 [Zoom Developer Documentation SDK Reference](https://developers.zoom.us/docs/contact-center/web/sdk-reference/) 詳細について。

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

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

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

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

この設定は次の場所で見つけられます **Zoom コンタクトセンター** および **Zoom Virtual Agent 設定**.

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

デフォルトでは、エージェントまたは仮想エージェントがウェブチャットでメッセージを送信すると、消費者には通知サウンドが再生されます。デフォルトのサウンドがブランド体験にとって邪魔に感じられる場合は、次の場所でオフにできます **Zoom コンタクトセンター** または **Zoom Virtual Agent 設定**.

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` 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>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.