# ユーザーチャットサポート体験をカスタマイズする

### 製品

* Zoom コンタクトセンター
* Zoom Virtual Agent

### 前提条件

[ウェブサイトまたはモバイルアプリにCampaign SDKを埋め込む](https://developers.zoom.us/docs/contact-center/web/chat/#embed-the-chat-client-with-a-campaign-id)

### 概要

チャットウィンドウは、仮想エージェントでも有人エージェントでも、お客様が会社と最初に実際にやり取りする場面であることが多いです。Zoom コンタクトセンターとZoom Virtual Agentを使えば、その体験がウェブサイト上でどのように見え、どのように動作するかを完全に制御できます。

このガイドでは、ブランドに合った、使いやすく、お客様の声の関与を維持できるチャット体験を設計するために役立つ、利用可能なすべてのツールを順を追って説明します。

### 計画を立てる

チャットUIは、ウェブサイトやアプリの自然な延長のように感じられるべきです。チャットUIのデザインを計画する際は、次の点を考慮してください。

* **色:** 会社の主要色とアクセントカラーは何ですか？ これらの色を、チャットの吹き出し、アイコン、ボタン、背景色など、チャット体験のさまざまな要素に使用します。色は16進コード（たとえば #FFFFFF）で選択するので、ブランドのコードをすぐ使えるようにしておくと便利です。
* **フォント:** 一貫性を保つために、サイトのタイポグラフィに合わせます。一般的なフォントをいくつか選択することも、自分のTTFファイルをアップロードしてカスタムフォントを追加することもできます。
* **ロゴ:** チャット体験にロゴや会社の画像を追加することを検討してください。JPG/JPEG、PNG、SVG、GIFファイルを最大10MBまでアップロードできます。選択するチャットデザインによっては、推奨される画像サイズがあります。詳細は後ほど説明します。
* **アバター:** アバターは、ボットまたはエージェントの画像表現です。ボットまたはシステムメッセージには、ロゴや、ブランドを表すキャラクター／アバターを使用します。Webブラウザのファビコンと同様に、これらのアイコンは小さいですが、会社のブランドにうまく合っていると体験に違いをもたらします。アバターのサイズは40x40ピクセルで、JPG/JPEG、PNG、SVG、GIFファイルを最大2MBまでアップロードできます。

### 各要素

[ZoomのCampaign Builder](https://zoom.us/cci/index/admin#/admin-campaign-management) は、チャットデザインとウェブサイトまたはアプリでのオンライン可用性の両方をカスタマイズするために使用されます。

Campaignsでは、次の項目を設定します。

* **チャットエンゲージメントウィンドウ:** お客様がボットやエージェントとチャットするために使用します。すべての吹き出し、ボタン、アイコン、ヘッダーデザインを選択できます。チャットウィンドウは、デジタルサポート体験全体の見た目と使い心地に大きな影響を与えます。
* **位置情報:** サポートをサイトのどこで利用可能にするかを制御できます（まずCampaign SDKを埋め込む必要があります）。サイト全体でサポートを提供することも、URLに基づいて含めるページや除外するページを指定することもできます。
* **招待状:** ユーザーがビジネスのウェブサイトやアプリでコンタクトセンターを起動または開く方法です。招待状にはStickyとEmbeddedの2種類があります。
  * **Sticky:** デジタルサポートの利用を促す簡単な方法です。ユーザーは画面上に表示されるアイコンまたはウィジェットを見て、クリックするとサポート体験が開きます。色、形、アイコンを制御でき、テキストを追加することもできます。
  * **Embedded:** 埋め込み招待状を使うと、ウェブサイト上の任意のボタンやリンクをクリック可能なリンクに変えて、サポートを開くことができます。
* **プロアクティブメッセージ:** ユーザーが指定したページを指定時間閲覧した後にメッセージを送るために使用できるあいさつです。プロアクティブメッセージは、Sticky招待状タイプを使用する任意のCampaignに追加できます。

  **たとえば:** 「プラン選びでお困りですか？」

さらに、 **アバター**も設定します。これはボットまたはエージェントの画像表現です。お客様は、ブランドを表すボットまたはエージェントのこれらのアバターを目にします。

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

サイズ、画像、デザイン、メッセージ、追加の設定に関する項目を含め、チャット体験の構築について詳細情報を確認してください。

{% content-ref url="/pages/54ac143b73023244e599cb616039ec0775e3c1fd" %}
[チャット体験を構築する](/technical-library/ja/bijinesusbisu/zoom-contact-center/expert-insights/customize-user-chat-support-experience/build-your-chat-experience.md)
{% endcontent-ref %}

### 要約

Zoom コンタクトセンターとZoom Virtual Agentを使うと、ブランドに合っていて使いやすいサポートチャットを作成できます。デザインを完全にカスタマイズし、チャットの表示場所や表示タイミングを選択し、適切なタイミングでユーザーに働きかけるプロアクティブメッセージを追加できます。Campaign SDKを埋め込めば、管理者UIまたはコードからすべてを制御できます。柔軟で、すっきりしており、サイトに合わせて構築されています。

お客様を支援し、ブランドを表現するチャット体験を開始する準備が整いました。

### 関連リソース

* [Zoom コンタクトセンターのデジタルキャンペーンを設定する](https://zoom.us/cci/index/admin#/admin-campaign-management)
* [Zoom コンタクトセンターの機能をウェブサイトに統合する](/technical-library/ja/bijinesusbisu/zoom-contact-center/expert-insights/integrate-zoom-contact-center-features-into-your-website.md)
* [ウェブサイトまたはモバイルアプリにCampaign SDKを埋め込む](https://developers.zoom.us/docs/contact-center/web/chat/#embed-the-chat-client-with-a-campaign-id)


---

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