こちらでは弊社が提供しているWhatYaのデザインテーマについてのページです。
...
弊社が用意しているWhatYaのデザインテーマは以下5種類です。
各5種類を御社画面でご利用いただける、設定ファイルをご用意しております。各5種類のデザインテーマの中から御社画面でご利用いただける、設定ファイルをダウンロードいただけます。
テーマ名をクリックすると、詳細をご確認いただけます。テーマ名をクリックすると、詳細と設定ファイルダウンロードリンクの箇所に移動します。
※チャットウィンドウ内の各種文言やボタン内の文言やアイコン画像は、任意のものに設定することができます。
詳しい設定方法は、設定手順①でご紹介いたします。※チャットウィンドウ内の各種文言やボタン内の文言は、任意の文言に設定することができます。
...
| パネル | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
黒系 |
...
チャット設定画面を開き、画面右上部の「新しく設定をはじめる」をクリックします。
チャット設定では各項目にデフォルト値が設定されています。
3以降から各項目の値を変更していきます。
プレースホルダーではメッセージ入力欄にデフォルトで表示される文言を変更できます。
任意のテキストをご入力ください。
メッセージ入力欄で改行できるようにする場合は入力欄の改行を許可にチェックを入れてください。
※こちらの項目は、改行によるいたずら投稿防止のため、デフォルトではチェックなしとなります。
改行によるいたずら投稿の可能性も考慮いただき、当機能ご利用のご判断ください。
補足１：チェックを入れる場合
メッセージ入力欄内での改行が可能です。
PCの場合は、Enterを押下すると改行されます。
メッセージを送信する場合は、以下の方法もしくはチャットウィンドウのメッセージ送信ボタンを
押下してください。
・Macの場合：Control＋EnterもしくはCommand＋Enter
・Windowsの場合：Ctrl＋EnterもしくはWindows＋Enter
補足２：メッセージ入力欄のデザインが崩れた場合
環境によってはメッセージ入力欄のCSSが崩れる可能性があります。
その場合は、line-heightをご調整ください。※サンプルCSS
コード ブロック language 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ファイルをクリックしてファイル選択、
もしくは、水色点線枠内にファイルをドロップします。
ファイル名を確認の上、確定をクリックします。
インポートしたリビジョンにコメントをつけて確定をクリックします。
※インポート後、一覧に表示されたとき分かりやすい名前に設定する事をお勧めします。
保存済み一覧にインポートしたリビジョンが表示されます。
...
ボタンテキスト・画像URLの編集
...
チャットボタン設定画面の保存済み一覧の中から、編集したいリビジョンをクリックします。
ページ下部の編集ボタンをクリックします。
編集画面が開きます。編集画面では上部に編集中のバーが表示されます。
編集したいボタン設定をクリックすると、設定が展開されます。
設定項目を編集します。
・ボタンテキストを変更したい場合：「ボタンテキスト」を変更ください。
・ボタンアイコン画像を変更したい場合：「画像URL」を変更ください。
編集したい箇所を編集後、ページ下部までスクロールし保存ボタンをクリックします。
任意のコメントを入力し、確定をクリックします。
※作成後、一覧に表示されたとき分かりやすい名前に設定する事をお勧めします。
保存済み一覧に編集したリビジョンが表示されます。
...
設定をテスト環境に反映
インポートした設定をテスト環境に反映します。
以下、テスト環境への反映の手順です。
まず、テスト環境に反映したいリビジョンを選択します。
テスト環境に反映をクリックします。
任意のコメントを入力し、確定をクリックします。
適用中にテスト環境に反映されているリビジョンが表示されます。
| パネル | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
チャットデザイン |
...
まず、テスト環境に反映したいリビジョンを選択します。
テスト環境に反映をクリックします。
任意のコメントを入力し、確定をクリックします。
適用中にテスト環境に反映されているリビジョンが表示されます。
| パネル | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
カスタムCSS |
...
まず、テスト環境に反映したいリビジョンを選択します。
テスト環境に反映をクリックします。
任意のコメントを入力し、確定をクリックします。
適用中にテスト環境に反映されているリビジョンが表示されます。
| パネル | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
動作確認 |
...
御社環境での動作確認
御社環境のURLにこちらのパラメータ_whatya_testingを付与することで
実際の環境で正しく設定が反映されるかを確認することができます。
...
以下のように、適用先のURLにパラメーター付与すると本番に影響を与えずに表示確認が可能となります。
https://ser-solairo.sakura.ne.jp/ec-solairo/ ?_whatya_testing
...
閉じるボタンを順番に閉じていくと、設定ファイルに入っている4つのボタンの表示をご確認いただけます。
...
チャット設定画面のテスト環境を本番環境へ反映をクリックします
任意のコメントを入力し、確定をクリックします。
適用中に本番環境に反映されているリビジョンが表示されます。
以上で本番環境への反映が完了となります。
| パネル | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
チャットボタン設定 |
...
チャットボタン設定画面のテスト環境を本番環境へ反映をクリックします
任意のコメントを入力し、確定をクリックします。
適用中に本番環境に反映されているリビジョンが表示されます。
以上で本番環境への反映が完了となります。
| パネル | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
チャットデザイン |
...
チャットデザイン画面のテスト環境を本番環境へ反映をクリックします
任意のコメントを入力し、確定をクリックします。
適用中に本番環境に反映されているリビジョンが表示されます。
以上で本番環境への反映が完了となります。
| パネル | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
カスタムCSS |
...
カスタムCSS画面のテスト環境を本番環境へ反映をクリックします
任意のコメントを入力し、確定をクリックします。
適用中に本番環境に反映されているリビジョンが表示されます。
以上で本番環境への反映が完了となります。
設定は以上となります。
| 情報 |
|---|
関連記事 |
...