ウィジェットの外観のカスタマイズ

ご使用のZendesk Chatのバージョンに基づいて、次の要素の一部またはすべてを修正できます。自社のWebサイトのデザインと操作性に合わせて、ウィジェットの外観を編集できます。レガシーのChatバージョンを使用している場合は、「（レガシーChat）ウィジェットの外観のカスタマイズ」を参照してください。

以下の要素は、Chatダッシュボードの「外観」タブで変更できます。各要素の変更の詳細を表示するには、次のリンクをクリックします。

ウィジェットの外観を変更するには

Chatダッシュボードで、「設定」>「ウィジェット」の順に選択し、「外観」タブをクリックします。
以下のセクションの説明に従って、オプションをカスタマイズします。
右側のプレビューウィンドウで変更結果をプレビューできます。
メモ：「プレビュー」ウィンドウに表示される変更は、使用しているChatのバージョンによって異なります。「外観」タブの各セクションで予想されるプレビューペインの動作については、以下のセクションで説明します。
「変更を保存」をクリックします。

「チャットウィンドウ」セクションをカスタマイズする

「チャットウィンドウ」セクションでは、エージェントと顧客間のチャットに関するフレームに関連する要素を設定します。ここに表示されるオプションは、使用しているChatのバージョンによって異なります。

ここでは、「トップタイトル」というチャットウィンドウ要素をカスタマイズできます。このテキストは、チャットウィンドウの一番上に表示されます。以下は、トップタイトルに「チャットで連絡」と表示されているチャットウィンドウの例です。

ここでは、次のチャットウィンドウ要素をカスタマイズできます。

トップタイトル：このテキストは、チャットウィンドウの一番上に表示されます。以下は、トップタイトルに「チャットで連絡」と表示されているチャットウィンドウの例です。
テーマカラー：これは、ウィジェットのアウトラインの色です。16進数のカラーコードで入力するか、カラーパレットをクリックして手動で色を選択します。
ウィジェットの位置：ウィジェットを、追加先のページの右下と左下のどちらに表示するかを選択します。

ここでは、モバイルウィジェットをカスタマイズできます。

サポートエージェントと会話を始める前に、訪問者にチャットコンシェルジュのアバター、名前、バイラインが表示されます。

ディスプレイタイトルおよびバイライン：このテキストは、チャットウィンドウの一番上に表示されます。次の例では、ディスプレイタイトルに「ライブサポート」とバイラインに「どうぞご質問ください」と表示されています。
アバター（Team、Professional、Enterpriseプランのみ）チャットコンシェルジュのアバターに使用するカスタム画像をアップロードします。

このオプションはTeam、Professional、Enterpriseプランでのみ使用できます。「チャットウィンドウ」セクションで「シンプル」を選択した場合は表示されません。

メッセージスタイル：「吹き出し」オプションを選択すると、送信するチャットが吹き出しの中に表示されます。「シンプルなライン」を選択するとチャットがそのまま表示されます。
アバターを表示：エージェントと訪問者がチャットを送るたびにそれぞれのアバターをチャットの横に表示します。

Team、Professional、Enterpriseプランのいずれかを使用している場合、上の「チャットウィンドウ」セクションで「シンプル」を選択すると、このセクションが表示されます。チャットバッジは、チャットを開始する前のウィジェットの外観を表します。

オンまたはオフ：チャットバッジの有効／無効を切り替える
画像を右に配置、画像を左に配置、テキストのみ：これらのオプションで、チャットバッジのレイアウトを指定します。「画像を右に配置」と「画像を左に配置」では、デフォルトの吹きだしの画像を使用します。この画像はプレビューウィンドウで確認できます。
カスタム画像：自分で用意した画像を使用するには、「カスタム画像」を選択し、下の「画像」フィールドから画像をアップロードします。
背景色：チャットバッジの背景色にする色を16進数のカラーコードで入力するか、カラーパレットをクリックして手動で色を選択します。「チャットウィンドウ」セクションの「テーマカラー」と同じ色を使用するには、「テーマの色と同じ」ボックスを選択します。
メッセージ：訪問者がクリックする前のチャットバッジの中に表示されるテキストです。次の例では、バッジに「チャットで連絡」と表示しています。
画像：上でカスタム画像を選択した場合は、チャットバッジ用の画像をここでアップロードしてください。