CSSのカスタマイズ方法(独自CSSの読み込み)

CSSを編集し、WEBチャットの見た目を自由に変更することができます。

このページは旧バージョンのWEBチャットをご利用中の方を対象にしています。

■バージョンの確認方法

WEBチャットの貼り付けタグ内で読み込まれているjsファイルのファイル名を確認します。

・ファイル名が「https://botbird.biz/js/dist/botbird-webchat-component.js」となっている
→新バージョンをご利用中です。CSSのカスタマイズ方法はこちらをご覧ください。

・ファイル名が「https://botbird.biz/js/chatBox.js」または「https://botbird.biz/js/chatBox_v●.js」(●は数字)となっている
→旧バージョンをご利用中です。CSSのカスタマイズ方法はこのページで確認してください。

■ CSSの編集方法

https://botbird.biz/css/chatbox.css よりデフォルトのCSSを全てコピーし、新規CSSファイルにペーストします。

お手元のエディタソフトを利用し、CSSを編集します。
以下に、代表的なid・classの一例を記載します。

.chatBoxHeader：WEBチャットボックスのタイトル

.speech-bubble-user：ユーザーが発話した内容(吹き出し)

※吹き出し下部の三角は::after要素で定義

.speech-bubble-bot：ボットが返答した内容(吹き出し)

吹き出し下部の三角は::after要素で定義

#inputBox：ユーザーが入力するテキストボックス

#inputBoxSubmitBtn：送信ボタン

先ほど編集したCSSファイルを、サーバーにアップロードします。どのディレクトリにアップロードしても構いません。アップロードが完了したら、CSSファイルのパスを控えておきます。

WEBチャットボックスタグ内の、下記”https://botbird.biz/css/chatbox.css”の部分を、3)でアップロードしたCSSファイルのパスに変更してください。

以上が、CSSのカスタマイズ(独自CSSの読み込み)方法です。