Add Custom Image with Links to the Rasa Chatbot with Easy Steps <3

Technology is everywhere…? Technology is everything…? Technology is with everyone…?

In this generation where technology is everywhere and it is so important that the competition is at its peak. So in this huge competition we must know how to grab the audience attention so that the user will choose your technology (Rasa chatbot in our case) over any other technology. To learn and understand these ways to grab the audience attention we need to attract(eg. adding images) the audience first with the best UI that we can offer to the our user.

To understand this I have come up with this and the upcoming videos to make you learn different ways to attract and grab the Audience to your technology (Rasa chatbot in our case). In this post you will learn how to add the custom images using the links from local/server to your Rasa chatbot. Let’s get started.

Introduction to add Images

Images are basically the graphical source of information and it can consist of any data/information in a single image, for now, let’s consider our example from the previous post where the chatbot(as a waiter) was telling the complete menu and then the user has to select from it. If the chatbot is a voice bot then there will not be a problem but I case of textual chatbot the bot have the option to display an image with the complete menu. That will make the bot more attractive and more convenient for the user(as a customer). Now let’s understand how does that happen.

Working

Here what happens is we want to add an image to the Rasa chatbot but the rasa chatbot doesn’t directly support the image and it won’t take an image as an input. So to provide the image to the rasa chatbot we have a parameter that is “image” that we need to set in the domain file with the link to the image either from the server or from the local drive and that is written with the utter_ response for the chatbot. Rasa core takes care of this link and redirect to the link and display the image from the link on the chatbot.

You can also refer to this session for further clarification:

Here, one thing is very clear that we have to make changes to the domain.yml file as we are making changes to the rasa chatbot responses. So the domain.yml file that we have now is:

intents:
- greet
- goodbye
- affirm
- deny
- what_do_you_have
- vegetarian
- non_veg
- order_name_veg
- order_name_non_veg
templates:
  utter_botgreet:
  - text: How can i help you sir?
  utter_veg_non_veg:
  - text: “what would you prefer:”
    buttons:
    - title: Vegetarian
      payload: /vegetarian
    - title: Non-Vegetarian
      payload: /non_veg
  utter_veg:
  - text: we have mix veg, paneer butter masala, mushroom masala,etc?
  utter_non_veg:
  - text: we have egg curry, chicken butter masala, fish curry, boiled eggs, bread
      omlette, etc?
  utter_anthingelse:
  - text: Is there any thing else sir?
  utter_thanks:
  - text: Thanks. We will get your order shortly.
  utter_goodbye:
  - text: Bye
actions:
- utter_goodbye
- utter_botgreet
- utter_veg_non_veg
- utter_veg
- utter_non_veg
- utter_anthingelse
- utter_thanks

From the above file we can see we have utter_veg and utter_non_veg where we have to add images and insert the link. For that we have to first select what images we want to display on the chatbot, for now I have two images one for the vegetarian and other one for the non-vegetarian which are:

These are the images that I’ll pass instead of the text so as to make the chatbot more attractive. For that the changes that we have to make are:

utter_veg:
- text: 'Here are the meals for you:'
  image: "https://media-cdn.tripadvisor.com/media/photo-s/11/a7/72/0f/vegetarian-menu.jpg"
utter_non_veg:
- text: 'Here are the meals for you:'
  image: "https://media-cdn.tripadvisor.com/media/photo-s/12/3e/7c/5f/non-veg-starters-menu.jpg"

Here I have added the parameter that is “image” with the links for the respective menus. Rest you don’t have to make a change to any other file.

Now train the model and run the chatbot in the terminal with:

$ rasa train 

$ rasa x 

If everything goes right you can open rasa X in the browser and talk to the bot. Here is the output for it.

This is how your chatbot will work what you will run rasa x with your trained model.

I hope it was really helpful blog for you. But still if there are some queries related to the topic then leave a comment below in the comment section. Also provide your valuable feedback if you have like this post.

Time to wrap up now. Hope you liked our content on How to add custom images in rasa chatbot. See you in our next blog, thanks for reading our blog and do leave a comment below to help us improve the content to serve you all of our experience with you. Stay tuned with us for more Rasa Chatbot contents.

Also check out our other playlist Rasa Chatbot, Internet of things, Docker, Python Programming, etc.
Become a member of our social family on youtube here.

Till then stay tuned and Enjoy learning.

Ashish Saini

I am a software developer for Python/Machine Learning. Also, I’m Rasa Hero at Rasa. Also, I’m a youtuber where I regulary uploads the videos to help this generation learn about the technology just like they are playing games.

Author’s link