アクションボットのカスタムスタイル（CSS）を変更する方法

Download as PDF

概要

次のハウツー記事では、CSSを使用してアクションボットの外観をどのように変更するかを説明します。

CSSを変更する前に
独自のロゴとボットのアイコンを追加する場合は、最初にアセットライブラリにアップロードすることをお勧めします。

1. すべてのファイルをアセットライブラリにアップロード
2. IDをコピー
3. コピーしたIDを後でCSSに追加できるように保存する

動画チュートリアル

アクションボットのCSSのクイックチュートリアルについては、この動画をご覧ください。

CSSを使用したアクションボットのスタイリング

アクションボットの外観と使用感を変更するには、

1. エディタに移動
2. アクションボットを開く（すべての項目→アクションボット）
3. ボットに移動
4. [Customize the Look and Feel of Your Bot（ボットの外観と使用感カスタマイズ）]をクリックします
5. [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に移動します：

1. エディタ
   に移動
2. ［Customize
   （カスタマイズ）]をクリックします
3. 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;

}