Take your chatbot to the next level with images and GIFs

In this post we’ll take a look at how to add pictures and GIFs to your Power Virtual Agents topics. You can use a simple Power Automate flow to have your Power Virtual Agent respond with images and GIFs throughout a conversation. While this can also be achieved using Bot Composer, in my opinion Power Automate is a lot easier and you don’t require learning an additional skillset. Bot Composer, however, has advanced capability to extend your bot, compared to what will be shown in this post.

Using Power Automate, your bot can display an image or GIF in the context of the conversation. It will work like this:

1. Get the URL to the pictures and/or GIFs you want to display. Make sure they are hosted online and publicly available.
2. In your Power Virtual Agent topic, use the Call an action node.
3. Create a flow. Create a variable for each URL, then add each to the Return to Power Virtual Agents action.
4. Back in your topic you can insert the outputs (your images and GIFs) throughout the conversation.

Here’s a closer look at each step, which you can follow along:

1. Get the URL to pictures/GIFs and keep it handy.

Tip: For the purpose of this tutorial I’ve done a Bing image search so I can filter to images online that are free to use. I’ll be using Furbies as an example (classic!).
This is the image URL that will be used:
https://upload.wikimedia.org/wikipedia/en/7/70/Furby_picture.jpg
I’ll also use a GIF from GIPHY
https://media.giphy.com/media/xT9KVwYwrL1LWn8tqg/giphy.gif

Make sure that the image /GIF is hosted online.

2. Building your topic

Go to Power Virtual Agents. In your topic, add a Call an action node. Create a new flow.

3. Building the flow

In your Power Automate flow, add an Initialize Variable step. Give the variable a name, set it to string, and paste the URL of the picture/GIF. Create an Initialize Variable step for each URL.

You will now add each variable as an output sent to Power Virtual Agents. In the Return value(s) to Power Virtual Agents, add a text output for each URL. Give it a name. In the value area of each output, type the following:


Ensure there are no spaces between any of the characters. Replace the red text with the dynamic content generated from Initialize Variable step of the respective image/GIF.

Save the flow and go back to your topic in Power Virtual Agents.

4. Add the flow outputs to the conversation

You can now add the flow to your topic. The outputs (images/gifs) can be inserted as variables throughout the conversation. Give it a test and Publish the bot when you’re ready.

For more about Power Virtual Agents and if you are looking to get started, check out my tutorials on how to create your own space-themed chatbot.

---

---