How to make your AI Chatbot Display Images

How to make your AI Chatbot Display Images

This is a tutorial on how you can make your AI chatbot display images within the conversation. Aria have previously written about image support in our AI chatbot, but she didn't go into details about why this is important. This article will explain why you need images, and also how to manually add images if you don't get images automatically during scraping.

Why your AI chatbot needs images

Displaying images within AI chatbot conversations is indeed crucial to enhancing the user experience. Long stretches of text can often be overwhelming and may detract from the key points being communicated. In e-commerce, the effective use of images can significantly boost engagement and sales. According to studies, including images can increase conversion rates by a staggering 1600% when utilized correctly. This is because images can instantly communicate value, quality, and other product attributes that might take much longer to convey through text alone.

In customer support contexts, visual aids are equally valuable. They can provide clear, step-by-step guidance, making it easier for users to understand and follow instructions. For instance, when dealing with complex technical issues, a series of screenshots or diagrams can be more instructive than lengthy textual explanations. This visual approach not only improves comprehension but also enhances customer satisfaction by making support interactions more efficient and user-friendly. Additionally, integrating visuals into support materials can cater to different learning styles, as some users may find visual information more accessible than textual content. Therefore, incorporating images in various forms of digital communication is not just an aesthetic choice, but also a practical strategy to improve clarity, engagement, and customer experience.

How to manually add images

When scraping your website, the chatbot will automatically add images by itself, but what happens when you want to add other images manually? To add images manually you will need to go to:

Machine Learning -> Training data -> Filter on Type: select the model you’d like to add images to -> Edit existing snippet or click Add to add a new snippet -> Find your image’s URL and paste it into the snippet’s completion using Markdown formatting -> Click preview on the bottom to make sure the image URL isn’t broken.

Below is a screenshot, not only illustrating how to add images, but also illustrating the importance of adding images.

How to add images to your AI chatbot


According to research on e-commerce, adding one image doubles your conversion in comparison to having zero images. Adding two images, further doubles it once more. Obviously this doesn't last forever, so don'd add a thousands product images and expect a trillion times as much conversion. But having an AI chatbot that can display images is crucial in an e-commerce setting.

With AINIRO.IO, having an AI chatbot with images is implicitly given. Our scraping process will even automatically extract images from your website and add these as Markdown to your training data. However, sometimes you might want to explicitly add links to images. The above explanes how.

Tage Leander Hansen

Tage Leander Hansen I am the CEO and Co-Founder of AINIRO.IO AS together with Aria. I write about Machine Learning, AI, and how to help organizations adopt said technologies. You can follow me on LinkedIn if you want to read more of what I write.

Published 19. Feb 2024