14
6

More than 1 year has passed since last update.

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

Posted at

はじめに

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

前提

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

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

実現方法

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

image.png

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

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

入力すると
image.png

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

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

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

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

image.png

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

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

image.png

まとめ

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

余談

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

image.png

14
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
6