こちらでは弊社が提供しているWhatYaのデザインテーマについてのページです。

弊社が用意しているWhatYaのデザインテーマは以下5種類です。
各5種類を御社画面でご利用いただける、設定ファイルをご用意しております。
テーマ名をクリックすると、詳細をご確認いただけます。

	黒系	白系	黄色系	水色系	ピンク系
チャット ウィンドウ
ボタン1
ボタン2
ボタン3
ボタン4

設定ファイルのダウンロードはこちら

一覧に戻る

設定ファイルのダウンロードはこちら

一覧に戻る

設定ファイルのダウンロードはこちら

一覧に戻る

設定ファイルのダウンロードはこちら

一覧に戻る

設定ファイルのダウンロードはこちら

一覧に戻る

こちらでは、まず設定ファイルをインポートいただき、インポート
設定の流れは以下です。

新規でチャット設定を開始

まず、チャット設定でチャットウィンドウの文言や発話者のアイコンなどの設定などWhatYaの初期設定をを行っていきます。
以下、新規で設定を開始する手順をご紹介いたします。

1. チャット設定画面を開き、画面右上部の「新しく設定をはじめる」をクリックします。

   

2. チャット設定では各項目にデフォルト値が設定されています。
   3以降から各項目の値を変更していきます。

   

3. プレースホルダーではメッセージ入力欄にデフォルトで表示される文言を変更できます。
   任意のテキストをご入力ください。

   

4. メッセージ入力欄で改行できるようにする場合は入力欄の改行を許可にチェックを入れてください。

   ※こちらの項目は、改行によるいたずら投稿防止のため、デフォルトではチェックなしとなります。
   改行によるいたずら投稿の可能性も考慮いただき、当機能ご利用のご判断ください。

   

   補足１：チェックを入れる場合
   メッセージ入力欄内での改行が可能です。
   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 ;
   }

5. ボットの名前ではボットのメッセージの下に表示される文言を変更できます。
   任意の名前をご入力ださい。

   

6. ボットの画像URLではボットのアイコン画像を変更できます。
   任意のアイコン画像のURLを入力ください。

   

7. チャットユーザーの名前ではユーザーのメッセージの下に表示される文言を変更できます。
   任意の名前をご入力ださい。

   

8. オペレーターの画像URLでは、有人接続後にオペレーターがアサインされるまでの間に表示されるアイコン画像を変更できます。
   任意のアイコン画像のURLを入力ください。

   

9. ヘッダー部分の文字ではチャットウィンドウ上部に表示される文言を変更できます。
   任意のテキストをご入力ください。

   

10. スクロールを抑制は動作確認を行い、ページのスクロールに影響があった場合にチェックを入れてください。

    

11. チャットロード中の画像URLではチャット読み込み時の画像を設定できます。
    任意の画像のURLを入力ください。

    

12. ハンバーガーメニューを非表示にしたい場合はメニューボタンを無効化にチェックを入れてください。

    

13. bot接続バーを有効化にチェックを入れると、オペレータ接続時にチャットウィンドウのタイトル下部にオペレータ接続中メッセージとbot切り替えボタンが表示されます。
    bot接続バーを有効化にチェックを入れた場合は、オペレータ接続中メッセージとbot切り替えボタンの文言を入力ください。

    

14. SpecialTagを有効化にチェックを入れると、スペシャルタグをご利用いただくことができます。
    ※スペシャルタグの詳細に関しては、こちらの記事をご覧ください。

    

15. CSS分離にチェックを入れると、カスタムCSSが利用できるようになります。
    ※カスタムCSSの詳細に関しては、こちらの記事をご覧ください。

    

16. 項目の入力が完了したら保存をクリックします。

    

17. 任意のコメントを入力し、確定をクリックします。
    ※作成後、一覧に表示されたとき分かりやすい名前に設定する事をお勧めします。

    

18. 保存済み一覧に作成したリビジョンが表示されます。

    

設定をテスト環境に適用

設定ファイルのインポート

まずチャットボタンの設定をインポートしていきます。
ダウンロードしていただいた設定ファイルのフォルダ内「buttons」から始まるjsonファイルを使用します。

1. チャットボタン設定を開き、画面右上部の「設定をインポート」をクリックします

   

    

2. ダウンロードしていただいた「buttons」から始まるjsonファイルをクリックしてファイル選択、
   もしくは、水色点線枠内にファイルをドロップします。

   

3. ファイル名を確認の上、確定をクリックします。

   

    

4. インポートしたリビジョンにコメントをつけて確定をクリックします。
   ※インポート後、一覧に表示されたとき分かりやすい名前に設定する事をお勧めします。

   

    

5. 保存済み一覧にインポートしたリビジョンが表示されます。

   

ボタンテキストの編集

ボタンテキストを変更することは可能です。
デフォルトの「スタッフに相談する」から変更したい場合は、任意のテキストに変更ください。

ボタンテキスト設定のヒント
ボタンテキストは改行できない仕様となります。
文字数が多い場合は吹き出しの横幅が拡がりますので、10文字程度で設定されることを推奨いたします。

例）チャットで相談、チャットで質問、チャットでお問い合わせ

※文字数が多い場合の表示イメージ

設定をテスト環境に適用

設定ファイル
閉じるボタンを順番に閉じていくと、設定ファイルに入っている4つのボタン設定全て表示確認いただけます。

設定ファイルのインポート

まず、チャットウィンドウのデザインをインポートしていきます。
ダウンロードしていただいた設定ファイルのフォルダ内「chat_design」から始まるjsonファイルを使用します。

1. チャットデザイン画面を開き、画面右上部の「設定をインポート」をクリックします

   

    

2. ダウンロードしていただいた「chat_design」から始まるjsonファイルをクリックしてファイル選択、
   もしくは、水色点線枠内にファイルをドロップします。

   

    

3. ファイル名を確認の上、確定をクリックします。

   

    

4. インポートしたリビジョンにコメントをつけて確定をクリックします。
   ※インポート後、一覧に表示されたとき分かりやすい名前に設定する事をお勧めします。

   

    

5. 保存済み一覧にインポートしたリビジョンが表示されます。

   

設定をテスト環境に適用

設定ファイルのインポート

まず、カスタムCSSのインポートしていきます。
ダウンロードしていただいた設定ファイルのフォルダ内「custom_css」から始まるjsonファイルを使用します。

1. カスタムCSS画面を開き、画面右上部の「設定をインポート」をクリックします

   

    

2. ダウンロードしていただいた「custom_css」から始まるjsonファイルをクリックしてファイル選択、
   もしくは、水色点線枠内にファイルをドロップします。

   

    

3. ファイル名を確認の上、確定をクリックします。

   

    

4. インポートしたリビジョンにコメントをつけて確定をクリックします。
   ※インポート後、一覧に表示されたとき分かりやすい名前に設定する事をお勧めします。

   

    

5. 保存済み一覧にインポートしたリビジョンが表示されます。

   

設定をテスト環境に適用