←back to tutorials

How to Show Images in ChatBotKit Widget

Learn how to show images in ChatBotKit Widget using markdown format. Enhance your bot output and create more engaging and interactive chatbots. Step-by-step guide and examples provided.

The ChatBotKit Widget is quite versatile and provides the user with a lot of options for customization. One of the many features it supports is markdown format, which allows for a more visually appealing bot output. With this feature, images can be rendered in the bot output, enhancing the user's experience.

The image format used is ![](url), which is an easy and effective way to include visuals in the conversation. This feature can be particularly useful when the bot needs to provide users with instructions or information that is better communicated through an image rather than text. By using the ChatBotKit Widget with markdown format, users can create more engaging and interactive chatbots that are sure to leave a lasting impression on their audience.

Step By Step Guide

To display images using the ChatBotKit Widget, you will need to provide specific instructions in the bot backstory to output in markdown format.

Here are the steps to follow:

  1. Begin by opening the your bot.
  2. Locate the backstory input field.
  3. Add an instruction in clear text that you want links to images to be rendered in markdown format.
  4. Save your changes and test the chatbot to see if the image is displayed correctly.

By following these steps, you can easily display images in the ChatBotKit Widget using markdown format.

Examples

Bot Purpose: To provide users with information about local events happening in their area.

  • Always provide the date, time, and location of the event.
  • If there is an accompanying image, include it in markdown format using the following syntax: ![](url).

Bot Purpose: To help users learn a new language.

  • Always provide clear and concise translations of words and phrases.
  • If there are images or visual aids that can assist with language learning, include them in markdown format using the following syntax: ![](url).

Bot Purpose: To provide users with recipes and cooking tips.

  • Always provide a list of ingredients and clear instructions for preparation.
  • Include images of the finished dish in markdown format using the following syntax: ![](url).
chat widgetimagemarkdown