【初期設定】WhatYaデザインテーマ
- 尾関沙紀
こちらでは弊社が提供しているWhatYaのデザインテーマについてのページです。
- 1 概要
- 2 設定手順①（設定ファイルインポート→テスト環境反映）
- 2.1 チャット設定
- 2.1.1 チャット設定を新規作成
- 2.1.2 設定をテスト環境に反映
- 2.2 チャットボタン設定
- 2.2.1 設定ファイルのインポート
- 2.2.2 ボタンテキスト・画像URLの編集
- 2.2.3 設定をテスト環境に反映
- 2.3 チャットデザイン
- 2.3.1 設定ファイルのインポート
- 2.3.2 設定をテスト環境に反映
- 2.4 カスタムCSS
- 2.4.1 設定ファイルのインポート
- 2.4.2 設定をテスト環境に反映
- 2.5 動作確認
- 2.5.1 レビュー画面での動作確認
- 2.5.2 御社環境での動作確認
- 2.1 チャット設定
- 3 設定手順②（本番環境反映）
- 4 関連記事
概要
弊社が用意しているWhatYaのデザインテーマは以下5種類です。
各5種類のデザインテーマの中から御社画面でご利用いただける、設定ファイルをダウンロードいただけます。
テーマ名をクリックすると、詳細と設定ファイルダウンロードリンクの箇所に移動します。
※チャットウィンドウ内の各種文言やボタン内の文言やアイコン画像は、任意のものに設定することができます。
詳しい設定方法は、設定手順①でご紹介いたします。
黒系
※ダウンロードボタンクリック後、ダウンロードページに遷移しますので
「ダウンロードをするボタン」をクリックしてください。
zip形式のファイルがダウンロードされ、ファイルを展開すると以下3ファイル格納されています。
・buttons_black.json…チャットボタン設定に関する設定ファイル
・chat_design_black.json…チャットデザインに関する設定ファイル
・custom_css_black.json…チャットボタンのCSSに関する設定ファイル
設定ファイルのダウンロードが完了しましたら、設定手順①に移動してください。
白系
※ダウンロードボタンクリック後、ダウンロードページに遷移しますので
「ダウンロードをするボタン」をクリックしてください。
zip形式のファイルがダウンロードされ、ファイルを展開すると以下3ファイル格納されています。
・buttons_white.json…チャットボタン設定に関する設定ファイル
・chat_design_white.json…チャットデザインに関する設定ファイル
・custom_css_white.json…チャットボタンのCSSに関する設定ファイル
設定ファイルのダウンロードが完了しましたら、設定手順①に移動してください。
※ダウンロードボタンクリック後、ダウンロードページに遷移しますので
「ダウンロードをするボタン」をクリックしてください。
zip形式のファイルがダウンロードされ、ファイルを展開すると以下3ファイル格納されています。
・buttons_yellow.json…チャットボタン設定に関する設定ファイル
・chat_design_yellow.json…チャットデザインに関する設定ファイル
・custom_css_yellow.json…チャットボタンのCSSに関する設定ファイル
設定ファイルのダウンロードが完了しましたら、設定手順①に移動してください。
※ダウンロードボタンクリック後、ダウンロードページに遷移しますので
「ダウンロードをするボタン」をクリックしてください。
zip形式のファイルがダウンロードされ、ファイルを展開すると以下3ファイル格納されています。
・buttons_light_blue.json…チャットボタン設定に関する設定ファイル
・chat_design_light_blue.json…チャットデザインに関する設定ファイル
・custom_css_light_blue.json…チャットボタンのCSSに関する設定ファイル
設定ファイルのダウンロードが完了しましたら、設定手順①に移動してください。
※ダウンロードボタンクリック後、ダウンロードページに遷移しますので
「ダウンロードをするボタン」をクリックしてください。
zip形式のファイルがダウンロードされ、ファイルを展開すると以下3ファイル格納されています。
・buttons_pink.json…チャットボタン設定に関する設定ファイル
・chat_design_pink.json…チャットデザインに関する設定ファイル
・custom_css_pink.json…チャットボタンのCSSに関する設定ファイル
設定ファイルのダウンロードが完了しましたら、設定手順①に移動してください。
設定手順①では、使用する設定ファイルをダウンロード後
御社環境への設定ファイルのインポートとテスト環境に反映・動作確認までの手順をご紹介します。
設定手順①の流れは以下です。
チャット設定は、チャットウィンドウ内の文言や発話者のアイコンなどの設定などWhatYaの初期設定に関する設定を行う画面です。
チャット設定を新規作成
新規でWhatYaの設定を開始する手順をご紹介いたします。
チャット設定画面を開き、画面右上部の「新しく設定をはじめる」をクリックします。
チャット設定では各項目にデフォルト値が設定されています。
3以降から各項目の値を変更していきます。プレースホルダーではメッセージ入力欄にデフォルトで表示される文言を変更できます。
任意のテキストをご入力ください。メッセージ入力欄で改行できるようにする場合は入力欄の改行を許可にチェックを入れてください。
※こちらの項目は、改行によるいたずら投稿防止のため、デフォルトではチェックなしとなります。
改行によるいたずら投稿の可能性も考慮いただき、当機能ご利用のご判断ください。補足１：チェックを入れる場合
メッセージ入力欄内での改行が可能です。
PCの場合は、Enterを押下すると改行されます。
メッセージを送信する場合は、以下の方法もしくはチャットウィンドウのメッセージ送信ボタンを
押下してください。
・Macの場合：Control＋EnterもしくはCommand＋Enter
・Windowsの場合：Ctrl＋EnterもしくはWindows＋Enter補足２：メッセージ入力欄のデザインが崩れた場合
環境によってはメッセージ入力欄のCSSが崩れる可能性があります。
その場合は、line-heightをご調整ください。※サンプルCSS
#_ChatWindowUserInput { font-size: 16px; } div._ChatWindowUserInputContainer { line-height: 18px ; }ボットの名前ではボットのメッセージの下に表示される文言を変更できます。
任意の名前をご入力ださい。ボットの画像URLではボットのアイコン画像を変更できます。
任意のアイコン画像のURLを入力ください。チャットユーザーの名前ではユーザーのメッセージの下に表示される文言を変更できます。
任意の名前をご入力ださい。オペレーターの画像URLでは、有人接続後にオペレーターがアサインされるまでの間に表示されるアイコン画像を変更できます。
任意のアイコン画像のURLを入力ください。ヘッダー部分の文字ではチャットウィンドウ上部に表示される文言を変更できます。
任意のテキストをご入力ください。スクロールを抑制は動作確認を行い、ページのスクロールに影響があった場合にチェックを入れてください。
チャットロード中の画像URLではチャット読み込み時の画像を設定できます。
任意の画像のURLを入力ください。ハンバーガーメニューを非表示にしたい場合はメニューボタンを無効化にチェックを入れてください。
bot接続バーを有効化にチェックを入れると、オペレータ接続時にチャットウィンドウのタイトル下部にオペレータ接続中メッセージとbot切り替えボタンが表示されます。
bot接続バーを有効化にチェックを入れた場合は、オペレータ接続中メッセージとbot切り替えボタンの文言を入力ください。SpecialTagを有効化にチェックを入れると、スペシャルタグをご利用いただくことができます。
※スペシャルタグの詳細に関しては、こちらの記事をご覧ください。CSS分離にチェックを入れると、カスタムCSSが利用できるようになります。
※カスタムCSSの詳細に関しては、こちらの記事をご覧ください。項目の入力が完了したら保存をクリックします。
任意のコメントを入力し、確定をクリックします。
※作成後、一覧に表示されたとき分かりやすい名前に設定する事をお勧めします。保存済み一覧に作成したリビジョンが表示されます。
設定をテスト環境に反映
作成した設定をテスト環境に反映します。
以下、テスト環境への反映の手順です。
まず、テスト環境に反映したいリビジョンを選択します。
テスト環境に反映をクリックします。
任意のコメントを入力し、確定をクリックします。
適用中にテスト環境に反映されているリビジョンが表示されます。
チャットボタン設定は、どのような種類のボタンを表示させるか設定する画面です。
設定ファイルのインポート
まず、チャットボタンの設定をインポートしていきます。
ダウンロードしていただいた設定ファイルのフォルダ内「buttons」から始まるjsonファイルを使用します。
チャットボタン設定を開き、画面右上部の「設定をインポート」をクリックします
ダウンロードしていただいた「buttons」から始まるjsonファイルをクリックしてファイル選択、
もしくは、水色点線枠内にファイルをドロップします。ファイル名を確認の上、確定をクリックします。
インポートしたリビジョンにコメントをつけて確定をクリックします。
※インポート後、一覧に表示されたとき分かりやすい名前に設定する事をお勧めします。保存済み一覧にインポートしたリビジョンが表示されます。
ボタンテキスト・画像URLの編集
ボタンテキストと画像URL（ボタンアイコン）を変更することは可能です。
ボタンテキストの場合、デフォルトの「スタッフに相談する」から任意のテキストに変更ください。
画像URLの場合、デフォルトの画像URLから任意の画像URLに変更ください。
ボタンテキスト設定のヒント
ボタンテキストは改行できない仕様となります。
文字数が多い場合は吹き出しの横幅が拡がりますので、10文字程度で設定されることを推奨いたします。
例）チャットで相談、チャットで質問、チャットでお問い合わせ
※文字数が多い場合の表示イメージ
以下編集方法の手順です。
チャットボタン設定画面の保存済み一覧の中から、編集したいリビジョンをクリックします。
ページ下部の編集ボタンをクリックします。
編集画面が開きます。編集画面では上部に編集中のバーが表示されます。
編集したいボタン設定をクリックすると、設定が展開されます。
設定項目を編集します。
・ボタンテキストを変更したい場合：「ボタンテキスト」を変更ください。
・ボタンアイコン画像を変更したい場合：「画像URL」を変更ください。編集したい箇所を編集後、ページ下部までスクロールし保存ボタンをクリックします。
任意のコメントを入力し、確定をクリックします。
※作成後、一覧に表示されたとき分かりやすい名前に設定する事をお勧めします。保存済み一覧に編集したリビジョンが表示されます。
設定をテスト環境に反映
インポートした設定をテスト環境に反映します。
以下、テスト環境への反映の手順です。
まず、テスト環境に反映したいリビジョンを選択します。
テスト環境に反映をクリックします。
任意のコメントを入力し、確定をクリックします。
適用中にテスト環境に反映されているリビジョンが表示されます。
チャットデザインは、チャットウィンドウ内の背景色や文字色など主にチャットウィンドウのデザインを設定する画面です。
設定ファイルのインポート
まず、チャットウィンドウのデザインをインポートしていきます。
ダウンロードしていただいた設定ファイルのフォルダ内「chat_design」から始まるjsonファイルを使用します。
チャットデザイン画面を開き、画面右上部の「設定をインポート」をクリックします
ダウンロードしていただいた「chat_design」から始まるjsonファイルをクリックしてファイル選択、
もしくは、水色点線枠内にファイルをドロップします。ファイル名を確認の上、確定をクリックします。
インポートしたリビジョンにコメントをつけて確定をクリックします。
※インポート後、一覧に表示されたとき分かりやすい名前に設定する事をお勧めします。保存済み一覧にインポートしたリビジョンが表示されます。
設定をテスト環境に反映
インポートした設定をテスト環境に反映します。
以下、テスト環境への反映の手順です。
まず、テスト環境に反映したいリビジョンを選択します。
テスト環境に反映をクリックします。
任意のコメントを入力し、確定をクリックします。
適用中にテスト環境に反映されているリビジョンが表示されます。
カスタムCSSは、WhatYa管理画面上でWhatYaのCSSを記述できる画面です。
設定ファイルのインポート
まず、カスタムCSSのインポートしていきます。
ダウンロードしていただいた設定ファイルのフォルダ内「custom_css」から始まるjsonファイルを使用します。
カスタムCSS画面を開き、画面右上部の「設定をインポート」をクリックします
ダウンロードしていただいた「custom_css」から始まるjsonファイルをクリックしてファイル選択、
もしくは、水色点線枠内にファイルをドロップします。ファイル名を確認の上、確定をクリックします。
インポートしたリビジョンにコメントをつけて確定をクリックします。
※インポート後、一覧に表示されたとき分かりやすい名前に設定する事をお勧めします。保存済み一覧にインポートしたリビジョンが表示されます。
設定をテスト環境に反映
インポートした設定をテスト環境に反映します。
以下、テスト環境への反映の手順です。
まず、テスト環境に反映したいリビジョンを選択します。
テスト環境に反映をクリックします。
任意のコメントを入力し、確定をクリックします。
適用中にテスト環境に反映されているリビジョンが表示されます。
チャット設定、チャットボタン設定、チャットデザイン、カスタムCSSをテスト環境に反映後
レビュー画面もしくは御社環境で動作確認ができます。
レビュー画面での動作確認
情報ページのレビュー画面（testing）に記載のURLをクリックいただくと、御社環境のレビュー画面をご確認いただけます。
※レビュー画面
閉じるボタンを順番に閉じていくと、設定ファイルに入っている4つのボタンの表示をご確認いただけます。
御社環境での動作確認
御社環境へのタグ埋め込みが完了している場合は、
御社環境のURLにこちらのパラメータ_whatya_testingを付与することで
実際の環境で正しく設定が反映されるかを確認することができます。
※設定例：
https://ser-solairo.sakura.ne.jp/ec-solairo/ の場合
以下のように、適用先のURLにパラメーター付与すると本番に影響を与えずに表示確認が可能となります。
https://ser-solairo.sakura.ne.jp/ec-solairo/ ?_whatya_testing
閉じるボタンを順番に閉じていくと、設定ファイルに入っている4つのボタンの表示をご確認いただけます。
設定手順①は以上となります。
設定手順②では、御社の本番環境への反映の手順をご紹介いたします。
以下の作業を完了後に、御社の本番環境に反映させたいタイミングで設定手順②にお進みください。
・設定手順①を一通り実施済み
・チャットに表示するシナリオを作成済み
チャット設定を本番環境に反映します。
チャット設定画面のテスト環境を本番環境へ反映をクリックします
任意のコメントを入力し、確定をクリックします。
適用中に本番環境に反映されているリビジョンが表示されます。
以上で本番環境への反映が完了となります。
チャットボタン設定を本番環境に反映します。
ボタン有効化条件を設定
本番環境反映前に、ボタン有効化条件でチャットボタンをどこに表示させるか設定します。
設定方法の詳細は、以下の記事をご参考に設定ください。
【ボタン設定】チャットボタン設定 各項目の解説（アドバンス） | ボタン有効化条件の設定
本番環境に反映
ボタン有効化条件を設定後、テスト環境に反映した上で本番環境に反映の手順にお進みください。
チャットボタン設定画面のテスト環境を本番環境へ反映をクリックします
任意のコメントを入力し、確定をクリックします。
適用中に本番環境に反映されているリビジョンが表示されます。
以上で本番環境への反映が完了となります。
チャットデザインを本番環境に反映します。
チャットデザイン画面のテスト環境を本番環境へ反映をクリックします
任意のコメントを入力し、確定をクリックします。
適用中に本番環境に反映されているリビジョンが表示されます。
以上で本番環境への反映が完了となります。
カスタムCSSを本番環境に反映します。
カスタムCSS画面のテスト環境を本番環境へ反映をクリックします
任意のコメントを入力し、確定をクリックします。
適用中に本番環境に反映されているリビジョンが表示されます。
以上で本番環境への反映が完了となります。
設定手順②は以上となります。