> 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.md).

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

Maggie Munsonによる執筆

### 製品

* 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 ファイルをアップロードしてカスタムフォントを追加できます。
* **ロゴ：** チャット体験にロゴや会社の画像を追加することを検討してください。最大 10MB の JPG/JPEG、PNG、SVG、または GIF ファイルをアップロードできます。選択するチャットデザインによっては、推奨画像サイズがあります。詳細は以下をご覧ください。
* **アバター:** アバターは、ボットまたはエージェントの画像表現です。ボットまたはシステムメッセージには、ロゴまたはブランドを表すキャラクター／アバターを使用します。Web ブラウザーのファビコンと同様に、これらのアイコンは小さいものの、企業ブランドにうまく合っていれば体験に違いを生みます。アバターのサイズは 40×40 ピクセルで、最大 2MB の JPG/JPEG、PNG、SVG、または GIF ファイルをアップロードできます。

### 各要素

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

キャンペーンでは、次を設定します：

* **チャットエンゲージメントウィンドウ：** お客様がボットまたはエージェントとチャットするために使用します。すべての吹き出し、ボタン、アイコン、ヘッダーデザインを選択できます。チャットウィンドウは、デジタルサポート体験の全体的な見た目と使い心地に大きな影響を与えます。
* **位置情報：** サポートをサイト上のどこで利用可能にするかを制御できます（先に Campaign SDK を埋め込んでください）。サイト全体でサポートを提供することも、URL に基づいて含めるページや除外するページを指定することもできます。
* **招待状：** ユーザーがビジネスのウェブサイトまたはアプリでコンタクトセンターを起動または開く方法です。招待状の種類は 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 コンタクトセンターのデジタル Campaign を設定する](https://zoom.us/cci/index/admin#/admin-campaign-management)
* [Zoom コンタクトセンターの機能を Web サイトに統合する](/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
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.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.