CSSのカスタマイズ方法(新バージョンをご利用の方)

botbirdbiz

こちらは2020年夏頃より提供している新バージョンをご利用の方を対象にしています。バージョンの確認方法はこちら(旧バージョンのCSS編集方法)内の「■ バージョンの確認方法」をご覧ください。

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

■ CSSの編集方法

１)　デフォルトのCSSを取得する

https://botbird.biz/css/botbirdbiz_custom.css より編集用のCSSを入手します(右クリックで保存できます)。

２)　CSS内容を編集する

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

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


.speech-bubble-user：ユーザーが発話した内容(吹き出し)
※吹き出し横の三角は::after要素で定義
undefined

.speech-bubble-bot：ボットが返答した内容(吹き出し)
※吹き出し横の三角は::after要素で定義
undefined

#inputBox：ユーザーが入力するテキストボックス
#inputBoxSubmitBtn：送信ボタン
undefined

３)　編集したCSSファイルをサーバーにアップロードする

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

４)　WEBページ内で編集したCSSファイルを読み込む

WEBチャットを表示するページ内で、さきほどアップロードしたCSSファイルを読み込みます。

<link rel="stylesheet" href="(CSSの保存場所)/botbirdbiz_custom.css">

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