WhatYaデザインとカスタマイズの話Part2

みなさんこんにちは！

前回はWhatYaカスタマイズの足掛かりとして、簡単なアイコンの変更をご紹介しました。

今回はWhatYaのテーマカラーをご紹介しつつ、チャットウィンドウ変更のためにどのようなclassやidが用意されているのかを合わせてご紹介致します✨

なお、WhatYaロゴのお話は以下のページで弊社でプロモーションを担当しているサイトウさんが紹介してくれています。ぜひご一読ください！

WhatYaのロゴがカラフルになった理由【ロゴ制作の現場をインタビュー】

WhatYa V2のカラースキーム

さて、現在リリースされているWhatYa V2の画面イメージはこの記事のトップに掲載させていただいた通りです。

これを分解してみると、以下のカラースキームで構成されていることがわかります。

コード上は上記以外にもcolorが指定されている部分がありますが、本記事では言及しません。

WhatYaは自由にカスタマイズしていただくことでお客様のサイトに溶け込むことを前提としているので、少ないカラースキームで構成されています。

カラーテーマを変更してみる

一例ではありますが、例えば以下のようにカラーテーマを変更したとします。トマトを想起させる配色ですね(?)。

＊今回のトンマナ決定にはMaterial Design Color Toolを利用しました。

検討したカラーテーマに沿ってCSSを設定した結果がこちらです。

/* チャットヘッダー部分の背景色変更 */
#_ChatHeader {
  background-color: #f44336;
}
/* チャットヘッダー部分の文字色変更 */
#_ChatHeader h6{
  color: #000000;
}
/* botの吹き出しの背景色を変更 */
._ChatWindowContent_BOT_CONTENT {
  background-color: #ff7961 !important;
}
/* OPの吹き出しの背景色を変更 */
._ChatWindowContent_OP_CONTENT {
  background-color: #52c7b8 !important;
}
/* カスタマーの吹き出しの背景色を変更 */
._ChatWindowContent_CS_CONTENT {
  background-color: #52c7b8 !important;
}
/* 変更を見やすくするため、チャットウィンドウの背景色を白くします。 */
#_ChatContent {
  background: #ffffff;
}

上記はBOT時のイメージですが、OP時も同様にヘッダー色は#f44336となります。このように、カスタマイズを行う時にCSSのみの利用の場合、ヘッダーの色はBOT/OPで統一されます。

BOT/OPによって差を付けたい場合は、._ChatWindowMode_OPか._ChatWindowsMode_BOTが存在するかをJavaScriptで判定することで対応できます。

また、前回の記事でもご案内しましたが、!importantを使用したり、要素名を指定する場合はWhatYaのアップデート時にデザインが崩れる可能性があるため、ご利用の際はご相談ください。

利用したclassとid

上記カスタマイズで利用したclassとidは以下の通りです。

その他のclass/idについては引き続き本ブログでご紹介したり、弊社からの資料上でもご紹介予定です。

＊ご契約者様には構築時に利用可能なclass/idについて詳細資料を共有致します。

class/id	用途

class/id	用途
#_ChatHeader	チャットウィンドウのヘッダー
#_ChatContent	会話履歴の表示されている部分
._ChatWindowContent_BOT_CONTENT	BOTの吹き出し
._ChatWindowContent_OP_CONTENT	OPの吹き出し
._ChatWindowContent_CS_CONTENT	カスタマーの吹き出し

おわりに

前回と今回でチャットボタンとチャットウィンドウと言う、エンドユーザー様が最も目にする部分のデザイン変更について言及してきました。

チャットを設置するサイトのトンマナに合わせてWhatYaをカスタマイズしてあげることで、よりエンドユーザー様に親しみを持っていただければと思います。