Power Virtual Agents でチャットボットに画像を表示する【改定版】

#はじめに

この記事は「Power Virtual Agents for Teamsでチャットボットに画像を表示する」の
完全上位互換
になります。
Power Virtual Agents の応答メッセージに画像を表示する際は、こちらの手法をご利用ください。

#前提

Power　Virtual Agnets のメッセージや質問には、画像の埋め込みや、フォントスタイルの変更などのメニューは存在しません。（2022年1月時点）

ですが、実行環境ではHTMLタグを解釈が可能です。
よって、タグなどを利用し、画像の表示を実現します。

#実現方法

メッセージや、質問の本文にHTMLタグを埋め込んでください。
（利用可能なタグについては今後調査していく予定です）

<img src="https://japaclip.com/files/tiger.png" alt="tiger">

今回は「ジャパクリップさんの素材を利用させていただきました。ありがとうございます。

入力すると

すぐに見た目が空になりますが、問題ありません。

トピックの保存後、[ボットのテスト]ペインにてトピックを呼び出すと、HTMLタグが解釈されずに表示されます。

イメージの表示の他、文字のスタイルも変更可能です。

<span style="color: red; font-family:'ヒラギノ明朝 ProN'; font-size: 23px;">roar!!</span>

作成したボットを[公開]し

公開環境からチャットボットを呼び出すと、HTMLの解釈が行われ画像が表示されます。

#まとめ

PVAエディターの[ボットのテスト]ではHTMLタグが解釈されないため、まさかHTMLが記載可能とは気が付きませんでした。
この手法で、手軽にリッチな応答を表示するチャットボットが作成可能となります。

#余談

タグのsrcに、base64エンコードした画像データを埋め込んで、応答メッセージを作成してみましたが、実行時にサイズオーバーのエラーとなりました。