4
Help us understand the problem. What are the problem?

posted at

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

はじめに

この記事は「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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
4
Help us understand the problem. What are the problem?