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

次の設定を、あなたの **固定招待状** アイコン:

* **ボタンサイズ:** チャット招待状アイコンのサイズは、簡単に気づいてクリックまたはタップできるほど十分に大きく、しかしユーザー体験を妨げたり重要なコンテンツを隠したりしない程度に抑える必要があります。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 ピクセル離した位置です。これは通常、重要なコンテンツを妨げずに見つけやすい場所です。

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

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

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

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

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

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

モバイルデバイスで、チャット招待状アイコンが特定のページのユーザーの邪魔になったり、気を散らしたりしています。私にはどのような選択肢がありますか？

**回答:**

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

* **オプション1:** ページ上の招待状アイコンの位置を変更します。オフセットと位置のオプションを使用して、ページ上での招待状の配置を移動できます。これは招待状を編集して設定します。
* **オプション 2:** ページの位置情報に基づいてチャットのアイコンを表示または非表示にします。すべての注文を確定ページからチャットの招待状を完全に削除したい場合は、Location を編集して注文を確定ページを除外します。たとえば、URL 内に「注文を確定」が含まれるすべてのページを除外できます。
* **オプション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>

この機能は次の項目で設定します **キャンペーン**、また、次の項目を使用するウェブページ上のチャットキャンペーンで利用できます **固定** 招待状タイプ。

#### <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 %}

***

### アバター

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

<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）については、すべてのエクスペリエンスで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 により、開発者はウェブチャットの動作やサイトとのやり取りをより細かく制御できます。ユーザーの操作、ページのコンテキスト、またはカスタムロジックに基づいて、チャットの動作をプログラムで開閉・制御できます。

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

次を参照してください： [Zoom Developer Documentation SDK リファレンス](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.