バナーの末尾へスキップバナーの冒頭に移動

【初期設定】WhatYaデザインテーマ

メタデータの末尾にスキップ

作成者尾関沙紀、最終変更日2022/11/15

メタデータの先頭に移動

このページの古いバージョンを表示しています。現在のバージョンを表示します。

現在のバージョンとの相違点ページ履歴を表示

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

概要

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

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

黒系

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

一覧に戻る

白系

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

一覧に戻る

黄色系

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

一覧に戻る

水色系

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

一覧に戻る

ピンク系

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

一覧に戻る

設定手順

設定の流れは以下です。

チャット設定

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

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

チャット設定画面を開き、画面右上部の「新しく設定をはじめる」をクリックします。
チャット設定では各項目にデフォルト値が設定されています。
3以降から各項目の値を変更していきます。
プレースホルダーではメッセージ入力欄にデフォルトで表示される文言を変更できます。
任意のテキストをご入力ください。
メッセージ入力欄で改行できるようにする場合は入力欄の改行を許可にチェックを入れてください。
※こちらの項目は、改行によるいたずら投稿防止のため、デフォルトではチェックなしとなります。
改行によるいたずら投稿の可能性も考慮いただき、当機能ご利用のご判断ください。
補足１：チェックを入れる場合
メッセージ入力欄内での改行が可能です。
PCの場合は、Enterを押下すると改行されます。
メッセージを送信する場合は、以下の方法もしくはチャットウィンドウのメッセージ送信ボタンを
押下してください。
・Macの場合：Control＋EnterもしくはCommand＋Enter
・Windowsの場合：Ctrl＋EnterもしくはWindows＋Enter
補足２：メッセージ入力欄のデザインが崩れた場合
環境によってはメッセージ入力欄のCSSが崩れる可能性があります。
その場合は、 line-heightをご調整ください。
※サンプルCSS
```
#_ChatWindowUserInput {
  font-size: 1.6rem;
}
div._ChatWindowUserInputContainer {
  line-height: 1.8rem ;
}
```
ボットの名前ではボットのメッセージの下に表示される文言を変更できます。
任意の名前をご入力ださい。
ボットの画像URLではボットのアイコン画像を変更できます。
任意のアイコン画像のURLを入力ください。
チャットユーザーの名前ではユーザーのメッセージの下に表示される文言を変更できます。
任意の名前をご入力ださい。
オペレーターの画像URLでは、有人接続後にオペレーターがアサインされるまでの間に表示されるアイコン画像を変更できます。
任意のアイコン画像のURLを入力ください。
ヘッダー部分の文字ではチャットウィンドウ上部に表示される文言を変更できます。
任意のテキストをご入力ください。
スクロールを抑制は動作確認を行い、ページのスクロールに影響があった場合にチェックを入れてください。
チャットロード中の画像URLではチャット読み込み時の画像を設定できます。
任意の画像のURLを入力ください。
ハンバーガーメニューを非表示にしたい場合はメニューボタンを無効化にチェックを入れてください。
bot接続バーを有効化にチェックを入れると、オペレータ接続時にチャットウィンドウのタイトル下部にオペレータ接続中メッセージとbot切り替えボタンが表示されます。
bot接続バーを有効化にチェックを入れた場合は、オペレータ接続中メッセージとbot切り替えボタンの文言を入力ください。
SpecialTagを有効化にチェックを入れると、スペシャルタグをご利用いただくことができます。
※スペシャルタグの詳細に関しては、こちらの記事をご覧ください。
CSS分離にチェックを入れると、カスタムCSSが利用できるようになります。
※カスタムCSSの詳細に関しては、こちらの記事をご覧ください。
項目の入力が完了したら保存をクリックします。
任意のコメントを入力し、確定をクリックします。
※作成後、一覧に表示されたとき分かりやすい名前に設定する事をお勧めします。
保存済み一覧に作成したリビジョンが表示されます。

設定をテスト環境に適用

チャットボタン設定

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

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

チャットボタン設定を開き、画面右上部の「設定をインポート」をクリックします
ダウンロードしていただいた「buttons」から始まるjsonファイルをクリックしてファイル選択、
もしくは、水色点線枠内にファイルをドロップします。
ファイル名を確認の上、確定をクリックします。
インポートしたリビジョンにコメントをつけて確定をクリックします。
※インポート後、一覧に表示されたとき分かりやすい名前に設定する事をお勧めします。
保存済み一覧にインポートしたリビジョンが表示されます。

設定をテスト環境に適用

チャットデザイン

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

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

チャットデザイン画面を開き、画面右上部の「設定をインポート」をクリックします
ダウンロードしていただいた「chat_design」から始まるjsonファイルをクリックしてファイル選択、
もしくは、水色点線枠内にファイルをドロップします。
ファイル名を確認の上、確定をクリックします。
インポートしたリビジョンにコメントをつけて確定をクリックします。
※インポート後、一覧に表示されたとき分かりやすい名前に設定する事をお勧めします。
保存済み一覧にインポートしたリビジョンが表示されます。

設定をテスト環境に適用

カスタムCSS

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

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

カスタムCSS画面を開き、画面右上部の「設定をインポート」をクリックします
ダウンロードしていただいた「custom_css」から始まるjsonファイルをクリックしてファイル選択、
もしくは、水色点線枠内にファイルをドロップします。
ファイル名を確認の上、確定をクリックします。
インポートしたリビジョンにコメントをつけて確定をクリックします。
※インポート後、一覧に表示されたとき分かりやすい名前に設定する事をお勧めします。
保存済み一覧にインポートしたリビジョンが表示されます。

設定をテスト環境に適用

関連記事

ラベルがありません