BotUIを本サイトのAboutページに埋め込んだが,会話が長くなると二重にスライドバーが表示されて使いづらい.そこで,BotUIのCSSを修正することにした.

以下は修正前の動作.他に何か質問ありますかあたりから,二重にスライドバーが表示されてしまう.

以下は修正後の動作.他に何か質問ありますか以降もスライドバーが出現することはない.

関連記事はこちら:

環境

  • Easybook:本サイトで利用しているJekyllのテーマ.
  • BotUI:JavaScriptだけで動くチャットボットライブラリ.

手順

BotUIのCSSとJavaScriptをローカルに保存

ローカルでBotUIを実行するのに必要なファイルをGitHubからダウンロードする.公式ドキュメントによると,botui.min.cssbotui-theme-default.cssbotui.min.jsがあれば良さそう1.Easybookのディレクトリ構造を鑑み,それぞれcss/およびjs/配下に保存する.

botui.min.cssを修正

.botui-app-containerheight:500pxをコメントアウトし,高さ制限をなくす.

_include/head.htmlを修正

CDNではなく,ローカルのbotui.min.cssbotui-theme-default.cssを参照する.

_layouts/bot.htmlを修正

CDNではなく,ローカルのbotui.jsを参照する.

結果

こんな感じになった.

参考

  1. 試行錯誤の結果,botui.min.cssをいじるだけで問題は解決できることが判明したので,全てをダウンロードする必要はなかった.