【BotUI】アバター画像を追加する
BotUI でBot(Agent)やユーザ(Human)にアバター画像を表示させることができるようになったようなので、やり方を記載します。
実装はされたものの、まだ公式ドキュメントには記載されていない。。。(2019/2/23時点)
この辺のCommitで実装されたよう。
- avatar photo url
- Agent and human profile photo added.
アバター画像とは、誰のコメントなのかを視覚的にわかりやすくするものです。吹き出しの根本に付く画像です。
こんなの。
ソースと実行結果
ソースツリー
- index.html
- main.js
- myPhoto.jpeg // "Human"のアバター画像
ソース(main.js)
var botui = new BotUI('chatbot-demo'); botui.message.bot({ photo: true, content: "こんにちは" }).then(function(){ botui.message.human ({ photo: './myPhoto.jpeg', content: "こんにちは" }); }).then(function(){ botui.message.bot ({ photo: true, content: "明日は40℃を超えるらしいよ。気を付けてね。" }); }).then(function(){ botui.message.human ({ photo: './myPhoto.jpeg', content: "それは暑いね!こまめに休むことにするよ。" }); });
上記ソースを実行した結果
備考
現時点では、Agent と Human で設定値が異なるようなので、下記にまとめました。
false | true | 任意のURL | |
---|---|---|---|
Agent(bot) | 非表示 | デフォルトのロボ画像 | デフォルトのロボ画像 |
Human | 非表示 | 画像読み込みエラーアイコン | 任意の画像 |
任意の画像には、jpeg、png、svg形式の画像は指定可能なようです(他は調べられていません)。
アバター画像が設定できると、視覚的にもどちらのコメントかわかりやすくなるし、全体的にやわらかい雰囲気でとっつきやすくなるので、いいですね♪
以上