アクションボットのカスタムスタイル（CSS）を変更する方法
概要
次のハウツー記事では、CSSを使用してアクションボットの外観をどのように変更するかを説明します。
CSSを変更する前に
独自のロゴとボットのアイコンを追加する場合は、最初にアセットライブラリにアップロードすることをお勧めします。
- すべてのファイルをアセットライブラリにアップロード
- IDをコピー
- コピーしたIDを後でCSSに追加できるように保存する
アクションボットのCSSのクイックチュートリアルについては、この動画をご覧ください。
CSSを使用したアクションボットのスタイリング
アクションボットの外観と使用感を変更するには、
- エディタに移動
- アクションボットを開く（すべての項目→アクションボット）
- ボットに移動
- [Customize the Look and Feel of Your Bot（ボットの外観と使用感カスタマイズ）]をクリックします
- [Advanced Customizations（高度なカスタマイズ）]をクリックしてCSSエディタを開きます
チャットダイアログボックスのヘッダーの色を変更
CSSセレクタ：.chat-wrapper .chat-header
CSSの例：
.chat-wrapper .chat-header {
background: red !important;
border: red !important;
}
ダイアログメッセージのテキストの色を変更
CSSセレクタ：.message .message-text
CSSの例：
.message .message-text {
color: red !important;
}
メッセージの吹き出しの背景色を変更
CSSセレクタ：
- .message .message-text
- .message .message-text-arrow::before
- .message .message-text-arrow::after
- .message.user-message .message-text
- .message.user-message .message-text-arrow::before
- .message.user-message .message-text-arrow::after
CSSの例：
.message .message-text {
background: red !important;
}
.message .message-text-arrow::before {
background: red !important;
}
.message .message-text-arrow::after {
background: red !important;
}
ユーザーのメッセージを変更するには：
.message.user-message .message-text {
background: red !important;
}
.message.user-message .message-text-arrow::before {
background: red !important;
}
.message.user-message .message-text-arrow::after {
background: red !important;
}
メッセージの影を削除
メッセージボックスの背後にある影を削除するには、ステートメントに次の行を追加します：
- .message .message-text
- message .message-text-arrow::before
- .message .message-text-arrow::after
CSSの例：
.message .message-text {
box-shadow: 0 0px 0px 0 rgba(0,0,0,0) !important;
}
.message .message-text-arrow::before {
box-shadow: 0 0px 0px 0 rgba(0,0,0,0) !important;
}
.message .message-text-arrow::after {
box-shadow: 0 0px 0px 0 rgba(0,0,0,0) !important;
}
エラーメッセージのテキストの色を変更
CSSセレクタ：.message .message-text-error
CSSの例：
.message .message-text-error {
color: red !important;
}
ヘッダーのロゴを変更
CSSセレクタ：.chat-wrapper .chat-header .chat-logo
CSSの例：
.chat-wrapper .chat-header .chat-logo {
background: url(https://.....image...) no-repeat center center !important;
background-size: 82px !important;
width: 82px !important
}
SENDボタンの色を変更
CSSセレクタ：
- .input-send .message-btn
- .input-send .message-btn:disabled
- .input-send .message-btn:hover
CSSの例：
.input-send .message-btn {
background-color: red !important;
}
.input-send .message-btn:disabled {
background-color: red !important;
}
.input-send .message-btn:hover {
background-color: orange !important;
}
アクションボットのボットアイコンを変更
CSSセレクタ：
- .message-bot-icon
- .message-bot-icon-error
CSSの例：
.message-bot-icon {
background-image: url(https://.....image...)!important;
}
.message-bot-icon-error {
background-image: url(https://.....image...)!important;
}
「メッセージの削除」アイコンの色を変更
CSSセレクタ：
- .message.can-be-removed .chat-message-remove
- .message.can-be-removed .chat-message-remove:hover
CSSの例：
.message.can-be-removed .chat-message-remove {
background-color: red !important;
color: red !important;
}
.message.can-be-removed .chat-message-remove:hover {
background-color: red !important;
color: red !important;
}
「スタートオーバー」アイコンの色を変更
CSSセレクタ：
- .chat-wrapper .chat-btn-over
- .chat-wrapper .chat-btn-over:hover
CSSの例：
.chat-wrapper .chat-btn-over {
background-color: orange !important;
color: black !important;
}
.chat-wrapper .chat-btn-over {
background-color: orange !important;
color: black !important;
}
「ライブチャットを開始」アイコンの色を変更
CSSセレクタ：
- .chat-wrapper .chat-btn-live-chat
- .chat-wrapper .chat-btn-live-chat:hover
CSSの例：
.chat-wrapper .chat-btn-live-chat {
background-color: orange !important;
color: black !important;
}
.chat-wrapper .chat-btn-live-chat:hover {
background-color: green !important;
color: black !important;
}
すべての上アクションのボタンの色を変更
CSSセレクタ：.chat-wrapper .chat-action-btn
CSSの例：
.chat-wrapper .chat-action-btn {
background-color: orange!important;
color: black !important;
}
スクロールダウンボタンの色を変更
CSSセレクタ：.chat-wrapper .chat-scroll-button-inner
CSSの例：
.chat-wrapper .chat-scroll-button-inner {
background-color: red !important;
}
背景色を変更
CSSセレクタ：.chat-wrapper .chat-body
CSSの例：
.chat-wrapper .chat-body {
background-color: purple !important;
}
ライブチャット提案の色を変更
CSSセレクタ：.chat-wrapper .live-chat-suggestion
CSSの例：
.chat-wrapper .live-chat-suggestion {
background-color: orange !important
color: black !important
}
ライブチャットアイコンの色を変更
CSSセレクタ：.chat-wrapper .chat-action-btn .chat-action-btn-icon
CSSの例：
.chat-wrapper .chat-action-btn .chat-action-btn-icon {
fill: red !important;
}
アクションボットコンテナの位置を変更
コンテナの位置を変更するには、エディタのメインCSSに移動します：
- エディタ
に移動 - ［Customize
（カスタマイズ）]をクリックします - CSSタブに移動
ボットのコンテナに関連するセレクタ：.wm-chatbot .wm-chatbot-containerです
そのため、画面上の位置と同じセレクタ内の高さと幅のCSSを組み合わせることができます。 絶対位置は、ウェブページの上部、右、下部、および左側のマージンからボットのボックスの位置を定義します。
CSSの例：
.wm-chatbot .wm-chatbot-container {
height: 800px !important;
width: 800px !important;
position: absolute !important;
top: 200px !important;
left: 0px !important;
}
この記事は役に立ちましたか？
はい
いいえ
ご意見ありがとうございます！