比較バージョン

古いバージョン 9

changes.mady.by.user 尾関沙紀

保存しました

次と比較

新しいバージョン 現在

changes.mady.by.user 尾関沙紀

保存しました

キー

  • この行は追加されました。
  • この行は削除されました。
  • 書式設定が変更されました。

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

目次
minLevel1
maxLevel7
情報

概要

弊社が用意しているWhatYaのデザインテーマは以下5種類です。

...

各5種類のデザインテーマの中から御社画面でご利用いただける、設定ファイルをダウンロードいただけます。

...

設定ファイルダウンロード
　∟チャットボタン
　∟チャットデザイン
　∟カスタムCSS

...

テーマ名をクリックすると、詳細と設定ファイルダウンロードリンクの箇所に移動します。

黒系

白系

黄色系

水色系

ピンク系

チャット
ウィンドウ

Image ModifiedImage ModifiedImage ModifiedImage ModifiedImage Modified

ボタン1

Image ModifiedImage ModifiedImage ModifiedImage ModifiedImage Modified

ボタン2

Image ModifiedImage ModifiedImage ModifiedImage ModifiedImage Modified

ボタン3

Image ModifiedImage ModifiedImage ModifiedImage ModifiedImage Modified

ボタン4

Image ModifiedImage ModifiedImage ModifiedImage ModifiedImage Modified

※チャットウィンドウ内の各種文言やボタン内の文言やアイコン画像は、任意のものに設定することができます。
詳しい設定方法は、設定手順①でご紹介いたします。

Image Added
パネル
panelIconIdatlassian-plus
panelIcon:plus:
panelIconText:plus:
bgColor#E6FCFF

黒系

Image Modified

...


設定ファイルは以下をクリックして、ファイルをダウンロードしてください。

View file
nameデザインテーマ1_黒色.zip

zip形式のファイルがダウンロードされ、ファイルを展開すると以下3ファイル格納されています。
・buttons_black.json…チャットボタン設定に関する設定ファイル
・chat_design_black.json…チャットデザインに関する設定ファイル
・custom_css_black.json…チャットボタンのCSSに関する設定ファイル

設定ファイルのダウンロードが完了しましたら、設定手順①に移動してください。

デザインテーマ一覧に戻る

設定手順①に移動する


パネル
panelIconIdatlassian-plus
panelIcon:plus:
panelIconText:plus:
bgColor#E6FCFF

白系

Image Modified


設定ファイルは以下をクリックして、ファイルをダウンロードしてください。

View file
nameデザインテーマ2_白色.zip

zip形式のファイルがダウンロードされ、ファイルを展開すると以下3ファイル格納されています。
・buttons_white.json…チャットボタン設定に関する設定ファイル
・chat_design_white.json…チャットデザインに関する設定ファイル
・custom_css_white.json…チャットボタンのCSSに関する設定ファイル

設定ファイルのダウンロードが完了しましたら、設定手順①に移動してください。

デザインテーマ一覧に戻る

設定手順①に移動する

パネル
panelIconIdatlassian-plus
panelIcon:plus:
panelIconText:plus:
bgColor#E6FCFF

黄色系

Image Modified

設定ファイルは以下をクリックして、ファイルをダウンロードしてください。

View file
nameデザインテーマ3_黄色.zip

zip形式のファイルがダウンロードされ、ファイルを展開すると以下3ファイル格納されています。
・buttons_yellow.json…チャットボタン設定に関する設定ファイル
・chat_design_yellow.json…チャットデザインに関する設定ファイル
・custom_css_yellow.json…チャットボタンのCSSに関する設定ファイル

設定ファイルのダウンロードが完了しましたら、設定手順①に移動してください。

デザインテーマ一覧に戻る

設定手順①に移動する

パネル
panelIconIdatlassian-plus
panelIcon:plus:
panelIconText:plus:
bgColor#E6FCFF

水色系

...

Image Added

設定ファイルは以下をクリックして、ファイルをダウンロードしてください。

View file
nameデザインテーマ4_水色.zip

zip形式のファイルがダウンロードされ、ファイルを展開すると以下3ファイル格納されています。
・buttons_light_blue.json…チャットボタン設定に関する設定ファイル
・chat_design_light_blue.json…チャットデザインに関する設定ファイル
・custom_css_light_blue.json…チャットボタンのCSSに関する設定ファイル

設定ファイルのダウンロードが完了しましたら、設定手順①に移動してください。

デザインテーマ一覧に戻る

設定手順①に移動する


パネル
panelIconIdatlassian-plus
panelIcon:plus:
panelIconText:plus:
bgColor#E6FCFF

ピンク系

...

情報

設定手順

...

Image Added

設定ファイルは以下をクリックして、ファイルをダウンロードしてください。

View file
nameデザインテーマ5_ピンク.zip

zip形式のファイルがダウンロードされ、ファイルを展開すると以下3ファイル格納されています。
・buttons_pink.json…チャットボタン設定に関する設定ファイル
・chat_design_pink.json…チャットデザインに関する設定ファイル
・custom_css_pink.json…チャットボタンのCSSに関する設定ファイル

設定ファイルのダウンロードが完了しましたら、設定手順①に移動してください。

デザインテーマ一覧に戻る

設定手順①に移動する

情報

設定手順①（設定ファイルインポート→テスト環境反映）

設定手順①では、使用する設定ファイルをダウンロード後
御社環境への設定ファイルのインポートとテスト環境に反映・動作確認までの手順をご紹介します。

設定手順①の流れは以下です。

Image Added
パネル
panelIconId31-20e3
panelIcon:one:
panelIconText1️⃣
bgColor#E6FCFF

チャット設定

...

カスタムCSS画面の「設定をインポート」をクリックします

...

 

任意の場所に保存したカスタムCSSのインポートファイルをクリックしてファイル選択、
もしくは、水色点線枠内にファイルをドロップします。

...

チャット設定は、チャットウィンドウ内の文言や発話者のアイコンなどの設定などWhatYaの初期設定に関する設定を行う画面です。

チャット設定を新規作成

新規でWhatYaの設定を開始する手順をご紹介いたします。

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

    Image Added

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

    Image Added

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

    Image Added

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

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

    Image Added

    (電球オン) 補足１：チェックを入れる場合
    メッセージ入力欄内での改行が可能です。
    PCの場合は、Enterを押下すると改行されます。
    メッセージを送信する場合は、以下の方法もしくはチャットウィンドウのメッセージ送信ボタンを
    押下してください。
    ・Macの場合：Control＋EnterもしくはCommand＋Enter
    ・Windowsの場合：Ctrl＋EnterもしくはWindows＋Enter

    Image Added

    (電球オン) 補足２：メッセージ入力欄のデザインが崩れた場合
    環境によってはメッセージ入力欄のCSSが崩れる可能性があります。
    その場合は、 line-heightをご調整ください。

    ※サンプルCSS

    コード ブロック
    languagecss
    #_ChatWindowUserInput {
  font-size: 16px;
}
div._ChatWindowUserInputContainer {
  line-height: 18px ;
}

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

    Image Added

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

    Image Added

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

    Image Added

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

    Image Added

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

    Image Added

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

    Image Added

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

    Image Added

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

    Image Added

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

    Image Added

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

    Image Added

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

    Image Added

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

    Image Added

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

    Image Added

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

    Image Added

設定をテスト環境に反映

作成した設定をテスト環境に反映します。
以下、テスト環境への反映の手順です。

  1. まず、テスト環境に反映したいリビジョンを選択します。

    Image Added

     

  2. テスト環境に反映をクリックします。

    Image Added

     

  3. 任意のコメントを入力し、確定をクリックします。

    Image Added

     

  4. 適用中にテスト環境に反映されているリビジョンが表示されます。

    Image Added

パネル
panelIconId32-20e3
panelIcon:two:
panelIconText2️⃣
bgColor#E6FCFF

チャットボタン設定

チャットボタン設定は、どのような種類のボタンを表示させるか設定する画面です。

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

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

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

    Image Added

     

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

    Image Added

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

    Image Added

     

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

    Image Added

     

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

    Image Added

ボタンテキスト・画像URLの編集

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

Image Added

画像URLの場合、デフォルトの画像URLから任意の画像URLに変更ください。

Image Added

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

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

Image Added

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

Image Added

以下編集方法の手順です。

  1. チャットボタン設定画面の保存済み一覧の中から、編集したいリビジョンをクリックします。

    Image Added

     

  2. ページ下部の編集ボタンをクリックします。

    Image Added

     

  3. 編集画面が開きます。編集画面では上部に編集中のバーが表示されます。

    Image Added

  4. 編集したいボタン設定をクリックすると、設定が展開されます。

    Image Added

  5. 設定項目を編集します。
    ・ボタンテキストを変更したい場合：「ボタンテキスト」を変更ください。

    Image Added


    ・ボタンアイコン画像を変更したい場合：「画像URL」を変更ください。

    Image Added

  6. 編集したい箇所を編集後、ページ下部までスクロールし保存ボタンをクリックします。

    Image Added

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

    Image Added

  8. 保存済み一覧に編集したリビジョンが表示されます。

    Image Added

設定をテスト環境に反映

インポートした設定をテスト環境に反映します。
以下、テスト環境への反映の手順です。

  1. まず、テスト環境に反映したいリビジョンを選択します。

    Image Added

     

  2. テスト環境に反映をクリックします。

    Image Added

  3. 任意のコメントを入力し、確定をクリックします。

    Image Added

     

  4. 適用中にテスト環境に反映されているリビジョンが表示されます。

    Image Added

パネル
panelIconId33-20e3
panelIcon:three:
panelIconText3️⃣
bgColor#E6FCFF

チャットデザイン

チャットデザインは、チャットウィンドウ内の背景色や文字色など主にチャットウィンドウのデザインを設定する画面です。

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

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

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

    Image Added

     

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

    Image Added

     

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

    Image Added

     

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

    Image Added

     

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

    Image Added

設定をテスト環境に反映

インポートした設定をテスト環境に反映します。
以下、テスト環境への反映の手順です。

  1. まず、テスト環境に反映したいリビジョンを選択します。

    Image Added

     

  2. テスト環境に反映をクリックします。

    Image Added

     

  3. 任意のコメントを入力し、確定をクリックします。

    Image Added

     

  4. 適用中にテスト環境に反映されているリビジョンが表示されます。

    Image Added

パネル
panelIconId34-20e3
panelIcon:four:
panelIconText4️⃣
bgColor#E6FCFF

カスタムCSS

カスタムCSSは、WhatYa管理画面上でWhatYaのCSSを記述できる画面です。

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

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

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

    Image Added

     

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

    Image Added

     

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

...

  1. Image Added

     

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

...

  1. Image Added

     

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

...

  1. Image Added

設定をテスト環境に反映

インポートした設定をテスト環境に反映します。
以下、テスト環境への反映の手順です。

  1. まず、テスト環境に反映したいリビジョンを選択します。

    Image Added

     

  2. テスト環境に反映をクリックします。

    Image Added

     

  3. 任意のコメントを入力し、確定をクリックします。

    Image Added

  4. 適用中にテスト環境に反映されているリビジョンが表示されます。

    Image Added

パネル
panelIconId35-20e3
panelIcon:five:
panelIconText5️⃣
bgColor#E6FCFF

動作確認

チャット設定、チャットボタン設定、チャットデザイン、カスタムCSSをテスト環境に反映後
レビュー画面もしくは御社環境で動作確認ができます。

レビュー画面での動作確認

情報ページのレビュー画面（testing）に記載のURLをクリックいただくと、御社環境のレビュー画面をご確認いただけます。

Image Added

※レビュー画面

Image Added

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

御社環境での動作確認

御社環境へのタグ埋め込みが完了している場合は、
御社環境のURLにこちらのパラメータ_whatya_testingを付与することで
実際の環境で正しく設定が反映されるかを確認することができます。

※設定例：
https://XXXX.co.jp/item_1/ の場合

以下のように、適用先のURLにパラメーター付与すると本番に影響を与えずに表示確認が可能となります。
https://XXXX.co.jp/item_1/ ?_whatya_testing

Image Added

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

設定手順①は以上となります。

情報

設定手順②（本番環境反映）

設定手順②では、御社の本番環境への反映の手順をご紹介いたします。

以下の作業を完了後に、御社の本番環境に反映させたいタイミングで設定手順②にお進みください。
・設定手順①を一通り実施済み
・チャットに表示するシナリオを作成済み

パネル
panelIconId31-20e3
panelIcon:one:
panelIconText1️⃣
bgColor#E6FCFF

チャット設定

チャット設定を本番環境に反映します。

  1. チャット設定画面のテスト環境を本番環境へ反映をクリックします

    Image Added

     

  2. 任意のコメントを入力し、確定をクリックします。

    Image Added

     

  3. 適用中に本番環境に反映されているリビジョンが表示されます。
    以上で本番環境への反映が完了となります。

    Image Added

パネル
panelIconId32-20e3
panelIcon:two:
panelIconText2️⃣
bgColor#E6FCFF

チャットボタン設定

チャットボタン設定を本番環境に反映します。

ボタン有効化条件を設定

本番環境反映前に、ボタン有効化条件でチャットボタンをどこに表示させるか設定します。
設定方法の詳細は、以下の記事をご参考に設定ください。
https://solairo.atlassian.net/wiki/spaces/WHAT1/pages/2137292814#%E3%83%9C%E3%82%BF%E3%83%B3%E6%9C%89%E5%8A%B9%E5%8C%96%E6%9D%A1%E4%BB%B6%E3%81%AE%E8%A8%AD%E5%AE%9A

本番環境に反映

ボタン有効化条件を設定後、テスト環境に反映した上で本番環境に反映の手順にお進みください。

  1. チャットボタン設定画面のテスト環境を本番環境へ反映をクリックします

    Image Added

     

  2. 任意のコメントを入力し、確定をクリックします。

    Image Added

     

  3. 適用中に本番環境に反映されているリビジョンが表示されます。
    以上で本番環境への反映が完了となります。

    Image Added

パネル
panelIconId33-20e3
panelIcon:three:
panelIconText3️⃣
bgColor#E6FCFF

チャットデザイン

チャットデザインを本番環境に反映します。

  1. チャットデザイン画面のテスト環境を本番環境へ反映をクリックします

    Image Added

     

  2. 任意のコメントを入力し、確定をクリックします。

    Image Added

     

  3. 適用中に本番環境に反映されているリビジョンが表示されます。
    以上で本番環境への反映が完了となります。

    Image Added

パネル
panelIconId34-20e3
panelIcon:four:
panelIconText4️⃣
bgColor#E6FCFF

カスタムCSS

カスタムCSSを本番環境に反映します。

  1. カスタムCSS画面のテスト環境を本番環境へ反映をクリックします

    Image Added

     

  2. 任意のコメントを入力し、確定をクリックします。

    Image Added

     

  3. 適用中に本番環境に反映されているリビジョンが表示されます。
    以上で本番環境への反映が完了となります。

    Image Added

設定手順②は以上となります。

情報

関連記事

展開
titleボタンアイコンのサンプル

ボタンアイコンなどにお使いいただける画像のサンプルを以下にまとめております。
【初期設定】WhatYaアイコンサンプル

展開
titleWhatYa管理画面の詳細記事

各種設定の詳細記事は以下です。
■WhatYa管理画面クイックスタートガイド

展開
titleその他のCSSサンプル

サンプルCSSについての記事は以下です。
【カスタムCSS】CSSサンプル