たころぐ

興味の向くままに

【BotUI】アバター画像を追加する

BotUI でBot(Agent)やユーザ(Human)にアバター画像を表示させることができるようになったようなので、やり方を記載します。
実装はされたものの、まだ公式ドキュメントには記載されていない。。。(2019/2/23時点)

この辺のCommitで実装されたよう。
- avatar photo url
- Agent and human profile photo added.

 
アバター画像とは、誰のコメントなのかを視覚的にわかりやすくするものです。吹き出しの根本に付く画像です。
こんなの。
f:id:tacoyaky:20190223230324j:plain

ソースと実行結果

ソースツリー
- 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: "それは暑いね!こまめに休むことにするよ。"
  });
});

上記ソースを実行した結果 f:id:tacoyaky:20190223230639p:plain

備考

現時点では、Agent と Human で設定値が異なるようなので、下記にまとめました。

  false true 任意のURL
Agent(bot) 非表示 デフォルトのロボ画像 デフォルトのロボ画像
Human 非表示 画像読み込みエラーアイコン 任意の画像

任意の画像には、jpegpngsvg形式の画像は指定可能なようです(他は調べられていません)。

 
アバター画像が設定できると、視覚的にもどちらのコメントかわかりやすくなるし、全体的にやわらかい雰囲気でとっつきやすくなるので、いいですね♪
 
以上