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

以下のウィジェット要素の一部または全部を変更して、会社のWebサイトの外観と雰囲気に合わせることができます。

旧バージョンのChatを使用している場合は、「（旧バージョンのChat）ウィジェットの外観のカスタマイズ」を参照してください。

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

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

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

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

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

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

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

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

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

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

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

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

このセクションは、上の「チャットウィンドウ」セクションで「シンプル」を選択した場合に表示されます。チャットバッジは、チャットを開始する前のウィジェットの外観を表します。

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