cssを設定してデザインを変更する


(1) チャットプラスの管理画面にログイン後、以下のURLに遷移します。

https://app.chatplus.jp/admin/cp/chat-css

(2)「独自CSSを入力」欄にデザイン変更のコードを入力し、「更新」ボタンをクリックします。

デザイン変更コード

チャットの高さ変更

※赤字部分の数字を変更することで、チャットの高さを変更できます。
■ミニテーマ

#chatplusview.chatplusview-mini #outline #chatpluscontent #body #messages{height:330px;}

■ベーシックテーマ

#chatplusview.chatplusview-basic #outline #chatpluscontent #body #messages{height:330px;}

■アプリテーマ

#chatplusview.chatplusview-app #outline #chatpluscontent #body #messages, #chatplusview.chatplusview-app #outline #chatpluscontent #body.frame #messages {height:330px;}

■モダンテーマ

#chatplusview.chatplusview-modern{height:500px;}

 

チャット(待機時)の幅変更

※赤字部分の数字を変更することで、チャットの幅を変更できます。

#chatplusview.chatplusview-basic.closed #outline,
#chatplusview.chatplusview-app.closed #outline,
#chatplusview.chatplusview-mini.closed #outline{
position:absolute;
right:0;
bottom:0;
width:200px;}

 

チャット表示位置の変更

※以下を記述すると、チャットを左側に表示できます。

#chatplusview{
left:0px;
}

 

チャット枠の削除

※ユーザーがメッセージを打てないようにし、全ての質問にチャットボットで対応する場合に使用します。

#chatplusview #textarea {
display:none !important;
}

 

チャット枠の高さ変更

※ユーザーがメッセージを入力する枠の高さを調整します。

#chatplusview.chatplusview-basic #outline #chatpluscontent #textarea
#message-wrapper textarea,
#chatplusview.chatplusview-basic #outline #chatpluscontent #textarea
#message-wrapper.has-operate textarea,
#chatplusview.chatplusview-app #outline #chatpluscontent #textarea
#message-wrapper textarea,
#chatplusview.chatplusview-app #outline #chatpluscontent #textarea
#message-wrapper.has-operate textarea,
#chatplusview.chatplusview-mini #outline #chatpluscontent #textarea
#message-wrapper textarea,
#chatplusview.chatplusview-modern #outline #chatpluscontent #textarea
#message-wrapper textarea {
height: 150px;
max-height: 150px;} }
モダンテーマ以外でチャット枠の高さ変更する場合は、チャット>メニューより、入力欄を1行にするのチェックをはずしてください

 

チャットウインドウアイコンの変更

※赤字部分のUniコードを変更することで、チャットウインドウアイコンを変更できます。

アイコンのUniコード参照ページ:http://fontawesome.io/icons/
使いたいアイコンのページに移動して、Uniコードをコピーします

■ウインドウ最小化ボタン

#chatplusheader .operate .button-close .fa::before {content: "\f05c";}

■チャット終了ボタン

#chatplusheader .operate .button-remove .fa::before {content: "\f2d3";}

■スマホ版:全画面表示ボタン

#chatplusheader .operate .button-expand .fa::before {content: "\f0a6";}

■スマホ版:縮小表示ボタン

#chatplusheader .operate .button-compress .fa::before {content: "\f0a7";}
コードを追加するときは、既に書いてあるコードを消さずに追記します。

シェアする

フォローする

  • RSSを