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

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

### 製品

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

### 各パーツ

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

Campaignsでは、次の設定を行います。

* **チャットエンゲージメントウィンドウ:** 消費者がボットまたはエージェントとチャットするために使用します。すべてのバブル、ボタン、アイコン、ヘッダーデザインを選択できます。チャットウィンドウは、デジタルサポート体験全体の見た目と使い心地に大きな影響を与えます。
* **位置情報:** サポートをサイト上のどこで利用可能にするかを制御できます（必ず先にCampaign SDKを埋め込んでください）。サイト全体でサポートを提供することも、URLに基づいて含めるページまたは除外するページを指定することもできます。
* **招待状:** ユーザーがビジネスのウェブサイトまたはアプリでコンタクトセンターを起動または開く方法です。招待状タイプは2種類あります: Sticky と Embedded。
  * **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
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.