How to Add Images to QnA Maker Answers in Markdown
No ads, no tracking, and no data collection. Enjoy this article? Buy us a ☕.
As you certainly all know by now, I do a lot of YouTube tutorial videos, with most of them focusing on the Bot Framework (for now). I just recently moved into a new home, and I need to complete a few tasks to get my office/studio set up (in the garage), so I've been a little behind in producing them. This was actually a blessing in disguise as the Bot Framework SDK v4 came out of preview this week at Microsoft Ignite, and some of the updates from the preview release introduced breaking changes to the full examples I was going to record. The delay actually prevented me from creating obsolete videos from the start.
Videos don't stop accumulating views just because you stop producing some though, so I've still been getting traction, as well as comments. One of the comments dealt with introducing images into the answers of the QnA Maker service.
If you've worked with LUDown at all, you know that you can use markdown in mocking out your question and answer pairs. Here's an example:
# edUi2018
## ? what can i expect?
```markdown
* In-depth, half-day workshops (at no additional charge)
* Inspirational keynotes from web innovators and top industry peers
* Helpful sessions on the latest trends, hot topics, and best practices that you can put to use right away
* Lively, fun, extraordinary events that get you out of the traditional “conference bubble” and break up all the professional development and skill-building
* Plenty of opportunities to network with fellow higher ed, museum, and library web professionals from across the country who understand the unique challenges of producing websites for large, decentralized organizations
* The chance to explore Charlottesville, Virginia—aka the Happiest City in America, Best College Town, one of America’s Favorite Mountain Towns, and one of the 5 Destinations Every American Should Visit
```
## ? who is producing edui?
```markdown
edUi is an annual conference produced by Virginia Humanities for web professionals working with institutions of learning to produce more useable and accessible online resources.
```
## ? who speaks at edui?
```markdown
We pride ourselves on being able to bring top speaking talent to an event people with small budgets can afford.
Over the years we’ve been pleased to welcome luminary speakers including Jeffrey Zeldman, Jared Spool, Adam Connor, Whitney Hess, Aaron Gustafson, Molly Holzschlag, Colleen Jones, Paul Boag and many more.
```
When this gets translated into JSON to push to the QnA Maker service, the markdown code is preserved:
{
"urls": [],
"qnaList": [
{
"id": 0,
"answer": "* In-depth, half-day workshops (at no additional charge)\r\n* Inspirational keynotes from web innovators and top industry peers\r\n* Helpful sessions on the latest trends, hot topics, and best practices that you can put to use right away\r\n* Lively, fun, extraordinary events that get you out of the traditional “conference bubble” and break up all the professional development and skill-building\r\n* Plenty of opportunities to network with fellow higher ed, museum, and library web professionals from across the country who understand the unique challenges of producing websites for large, decentralized organizations\r\n* The chance to explore Charlottesville, Virginia—aka the Happiest City in America, Best College Town, one of America’s Favorite Mountain Towns, and one of the 5 Destinations Every American Should Visit\r\n",
"questions": [
"what can i expect?"
],
"metadata": [],
"source": "custom editorial"
},
{
"id": 0,
"answer": "edUi is an annual conference produced by Virginia Humanities for web professionals working with institutions of learning to produce more useable and accessible online resources.\r\n",
"questions": [
"who is producing edui?"
],
"metadata": [],
"source": "custom editorial"
},
{
"id": 0,
"answer": "We pride ourselves on being able to bring top speaking talent to an event people with small budgets can afford.\r\nOver the years we’ve been pleased to welcome luminary speakers including Jeffrey Zeldman, Jared Spool, Adam Connor, Whitney Hess, Aaron Gustafson, Molly Holzschlag, Colleen Jones, Paul Boag and many more.\r\n",
"questions": [
"who speaks at edui?"
],
"metadata": [],
"source": "custom editorial"
}
],
"name": "edUi2018"
}
That means that markdown is supported in the QnA Maker, so the easiest way to inject an image into a QnA Maker answer, is to add the URL via markdown:
It's as simple as that. Since the QnA Maker tester, LUIS tester, and the web chat all use the same web chat control, you can see how it interprets the markdown as an image (the Bot Emulator also uses the same chat control, so it'll work there as well). Just remember that some functionality is dependent on the channel you wish to deploy to, so this may not work in all channels. Be sure to test first before deploying.