12. Dialogflow Messengerをカスタイズして自分専用のチャットボットにする

今回は、前回までで自サイトに設置したDialogflow Messengerを少しカスタマイズして、オリジナルのチャットボットにしてみることにします。
カスタマイズと言ってもCSSを使って色を付けるのと、アイコンをオリジナルにするだけですので、簡単です。

Dialogflow Messengerの埋め込みコードのデフォルトはこんな感じになっています。

<script src="https://www.gstatic.com/dialogflow-console/fast/messenger/bootstrap.js?v=1"></script>
<df-messenger
  intent="WELCOME"
  chat-title="my-tree-bot"
  agent-id="XXXXXXXXXXXXXXXXXXXX"
  language-code="ja"
></df-messenger>

これにCSSとアイコンを付け加えるとこうなります。

<style>
df-messenger {
  --df-messenger-button-titlebar-color: #d8d8d8; /* タイトルバーとアイコンの背景色 */
  --df-messenger-button-titlebar-font-color: #27282b; /* フォントカラー */
}
</style>
<script src="https://www.gstatic.com/dialogflow-console/fast/messenger/bootstrap.js?v=1"></script>
<df-messenger
  intent="WELCOME"
  chat-title="JAZYブランディング ご相談コーナー"
  agent-id="XXXXXXXXXXXXXXXXXXXX"
  language-code="ja"
  chat-icon="https://100pamphlet.jp/wp-content/themes/100p2019/images/logo.svg"
></df-messenger>

chat-title：チャットボットのタイトル（タイトルバーに表示）
chat-icon：アイコン画像のパス
　
これで、オリジナルのAIチャットボットが完成です。
実際のチャットボットはこちらにあります。
https://100design.jp/
参考まで。