比較バージョン

古いバージョン 10

changes.mady.by.user 尾関沙紀

保存しました

次と比較

新しいバージョン 11

changes.mady.by.user 尾関沙紀

保存しました

キー

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

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

...

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

黒系

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

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

Aura inline button
summaryDownload
paramsJTdCJTIybGFiZWwlMjIlM0ElMjJEb3dubG9hZCUyMiUyQyUyMnNpemUlMjIlM0ElMjJtZWRpdW0lMjIlMkMlMjJzaGFwZSUyMiUzQSUyMnJvdW5kZWQlMjIlMkMlMjJzdGF0ZXMlMjIlM0ElN0IlMjJpZGxlJTIyJTNBJTdCJTIyY29sb3JzJTIyJTNBJTdCJTIyYmFja2dyb3VuZCUyMiUzQSUyMiUyM2ZmZmZmZiUyMiUyQyUyMmxhYmVsJTIyJTNBJTIyJTIzMDAwMDAwJTIyJTdEJTJDJTIyc2hhZG93JTIyJTNBJTIyZTIwMCUyMiU3RCUyQyUyMmhvdmVyJTIyJTNBJTdCJTIyY29sb3JzJTIyJTNBJTdCJTIyYmFja2dyb3VuZCUyMiUzQSUyMiUyMzM0NDU2MyUyMiUyQyUyMmxhYmVsJTIyJTNBJTIyJTIzZmZmZmZmJTIyJTdEJTJDJTIyc2hhZG93JTIyJTNBJTIyZTIwMCUyMiU3RCU3RCUyQyUyMmljb24lMjIlM0ElN0IlMjJwb3NpdGlvbiUyMiUzQSUyMmxlZnQlMjIlMkMlMjJpY29uJTIyJTNBJTIyZmEtYW5nbGUtZG91YmxlLWRvd24lMjIlN0QlMkMlMjJsaW5rJTIyJTNBJTdCJTIydmFsdWUlMjIlM0ElMjJhdHQyNTYwODg0Nzc3JTIyJTJDJTIydHlwZSUyMiUzQSUyMmF0dGFjaG1lbnQlMjIlMkMlMjJ0YXJnZXQlMjIlM0ElMjJfYmxhbmslMjIlN0QlN0Q=


一覧に戻る

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

白系

...

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

Aura inline button
summaryDownload
paramsJTdCJTIybGFiZWwlMjIlM0ElMjJEb3dubG9hZCUyMiUyQyUyMnNpemUlMjIlM0ElMjJtZWRpdW0lMjIlMkMlMjJzaGFwZSUyMiUzQSUyMnJvdW5kZWQlMjIlMkMlMjJzdGF0ZXMlMjIlM0ElN0IlMjJpZGxlJTIyJTNBJTdCJTIyY29sb3JzJTIyJTNBJTdCJTIyYmFja2dyb3VuZCUyMiUzQSUyMiUyM2ZmZmZmZiUyMiUyQyUyMmxhYmVsJTIyJTNBJTIyJTIzMDAwMDAwJTIyJTdEJTJDJTIyc2hhZG93JTIyJTNBJTIyZTIwMCUyMiU3RCUyQyUyMmhvdmVyJTIyJTNBJTdCJTIyY29sb3JzJTIyJTNBJTdCJTIyYmFja2dyb3VuZCUyMiUzQSUyMiUyMzM0NDU2MyUyMiUyQyUyMmxhYmVsJTIyJTNBJTIyJTIzZmZmZmZmJTIyJTdEJTJDJTIyc2hhZG93JTIyJTNBJTIyZTIwMCUyMiU3RCU3RCUyQyUyMmljb24lMjIlM0ElN0IlMjJwb3NpdGlvbiUyMiUzQSUyMmxlZnQlMjIlMkMlMjJpY29uJTIyJTNBJTIyZmEtYW5nbGUtZG91YmxlLWRvd24lMjIlN0QlMkMlMjJsaW5rJTIyJTNBJTdCJTIydmFsdWUlMjIlM0ElMjJhdHQyNTYxMjc3OTUzJTIyJTJDJTIydHlwZSUyMiUzQSUyMmF0dGFjaG1lbnQlMjIlMkMlMjJ0YXJnZXQlMjIlM0ElMjJfYmxhbmslMjIlN0QlN0Q=

一覧に戻る

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

黄色系

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

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

Aura inline button
summaryDownload
paramsJTdCJTIybGFiZWwlMjIlM0ElMjJEb3dubG9hZCUyMiUyQyUyMnNpemUlMjIlM0ElMjJtZWRpdW0lMjIlMkMlMjJzaGFwZSUyMiUzQSUyMnJvdW5kZWQlMjIlMkMlMjJzdGF0ZXMlMjIlM0ElN0IlMjJpZGxlJTIyJTNBJTdCJTIyY29sb3JzJTIyJTNBJTdCJTIyYmFja2dyb3VuZCUyMiUzQSUyMiUyM2ZmZmZmZiUyMiUyQyUyMmxhYmVsJTIyJTNBJTIyJTIzMDAwMDAwJTIyJTdEJTJDJTIyc2hhZG93JTIyJTNBJTIyZTIwMCUyMiU3RCUyQyUyMmhvdmVyJTIyJTNBJTdCJTIyY29sb3JzJTIyJTNBJTdCJTIyYmFja2dyb3VuZCUyMiUzQSUyMiUyMzM0NDU2MyUyMiUyQyUyMmxhYmVsJTIyJTNBJTIyJTIzZmZmZmZmJTIyJTdEJTJDJTIyc2hhZG93JTIyJTNBJTIyZTIwMCUyMiU3RCU3RCUyQyUyMmljb24lMjIlM0ElN0IlMjJwb3NpdGlvbiUyMiUzQSUyMmxlZnQlMjIlMkMlMjJpY29uJTIyJTNBJTIyZmEtYW5nbGUtZG91YmxlLWRvd24lMjIlN0QlMkMlMjJsaW5rJTIyJTNBJTdCJTIydmFsdWUlMjIlM0ElMjJhdHQyNTYxMTc5Njc4JTIyJTJDJTIydHlwZSUyMiUzQSUyMmF0dGFjaG1lbnQlMjIlMkMlMjJ0YXJnZXQlMjIlM0ElMjJfYmxhbmslMjIlN0QlN0Q=

一覧に戻る

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

水色系

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

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

Aura inline button
summaryDownload
paramsJTdCJTIybGFiZWwlMjIlM0ElMjJEb3dubG9hZCUyMiUyQyUyMnNpemUlMjIlM0ElMjJtZWRpdW0lMjIlMkMlMjJzaGFwZSUyMiUzQSUyMnJvdW5kZWQlMjIlMkMlMjJzdGF0ZXMlMjIlM0ElN0IlMjJpZGxlJTIyJTNBJTdCJTIyY29sb3JzJTIyJTNBJTdCJTIyYmFja2dyb3VuZCUyMiUzQSUyMiUyM2ZmZmZmZiUyMiUyQyUyMmxhYmVsJTIyJTNBJTIyJTIzMDAwMDAwJTIyJTdEJTJDJTIyc2hhZG93JTIyJTNBJTIyZTIwMCUyMiU3RCUyQyUyMmhvdmVyJTIyJTNBJTdCJTIyY29sb3JzJTIyJTNBJTdCJTIyYmFja2dyb3VuZCUyMiUzQSUyMiUyMzM0NDU2MyUyMiUyQyUyMmxhYmVsJTIyJTNBJTIyJTIzZmZmZmZmJTIyJTdEJTJDJTIyc2hhZG93JTIyJTNBJTIyZTIwMCUyMiU3RCU3RCUyQyUyMmljb24lMjIlM0ElN0IlMjJwb3NpdGlvbiUyMiUzQSUyMmxlZnQlMjIlMkMlMjJpY29uJTIyJTNBJTIyZmEtYW5nbGUtZG91YmxlLWRvd24lMjIlN0QlMkMlMjJsaW5rJTIyJTNBJTdCJTIydmFsdWUlMjIlM0ElMjJhdHQyNTYxMTc5NjgzJTIyJTJDJTIydHlwZSUyMiUzQSUyMmF0dGFjaG1lbnQlMjIlMkMlMjJ0YXJnZXQlMjIlM0ElMjJfYmxhbmslMjIlN0QlN0Q=

一覧に戻る


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

ピンク系

...

...

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

Aura inline button
summaryDownload
paramsJTdCJTIybGFiZWwlMjIlM0ElMjJEb3dubG9hZCUyMiUyQyUyMnNpemUlMjIlM0ElMjJtZWRpdW0lMjIlMkMlMjJzaGFwZSUyMiUzQSUyMnJvdW5kZWQlMjIlMkMlMjJzdGF0ZXMlMjIlM0ElN0IlMjJpZGxlJTIyJTNBJTdCJTIyY29sb3JzJTIyJTNBJTdCJTIyYmFja2dyb3VuZCUyMiUzQSUyMiUyM2ZmZmZmZiUyMiUyQyUyMmxhYmVsJTIyJTNBJTIyJTIzMDAwMDAwJTIyJTdEJTJDJTIyc2hhZG93JTIyJTNBJTIyZTIwMCUyMiU3RCUyQyUyMmhvdmVyJTIyJTNBJTdCJTIyY29sb3JzJTIyJTNBJTdCJTIyYmFja2dyb3VuZCUyMiUzQSUyMiUyMzM0NDU2MyUyMiUyQyUyMmxhYmVsJTIyJTNBJTIyJTIzZmZmZmZmJTIyJTdEJTJDJTIyc2hhZG93JTIyJTNBJTIyZTIwMCUyMiU3RCU3RCUyQyUyMmljb24lMjIlM0ElN0IlMjJwb3NpdGlvbiUyMiUzQSUyMmxlZnQlMjIlMkMlMjJpY29uJTIyJTNBJTIyZmEtYW5nbGUtZG91YmxlLWRvd24lMjIlN0QlMkMlMjJsaW5rJTIyJTNBJTdCJTIydmFsdWUlMjIlM0ElMjJhdHQyNTYxMDgxNDE4JTIyJTJDJTIydHlwZSUyMiUzQSUyMmF0dGFjaG1lbnQlMjIlN0QlN0Q=

一覧に戻る

情報

設定手順

設定の流れは以下です。

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

チャット設定

...

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

...

 

...

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

...

 

...

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

...

 

...

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

...

 

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

...

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

まず、チャット設定でチャットウィンドウの文言や発話者のアイコンなどの設定など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: 1.6rem;
}
div._ChatWindowUserInputContainer {
  line-height: 1.8rem ;
}

  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

...

設定をテスト環境に適用

パネル
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

...

設定をテスト環境に適用

パネル
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

...

設定をテスト環境に適用

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

カスタムCSS

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

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

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

    Image Added

     

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

    Image Added

     

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

    Image Added

     

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

    Image Added

     

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

    Image Added

...

設定をテスト環境に適用

情報

関連記事