Images in bot messages

A picture is worth a thousand words

Images are a very convenient and effective way to communicate. This document will tell you everything you need to know about using images in your bot.

Messages

There are two ways in which images can be used in Botfuel Dialog.

BotImageMessage

The SDK class BotImageMessage takes an image URL and creates an image message.

BotImageMessage is supported with both Messenger Adapter and Botfuel Adapter. You can learn more about Botfuel Dialog messages in general here.

For example, this GreetingView will show the logo image before the welcome text.

const { Helper } = require('botfuel-dialog');

class GreetingsView extends View {
   render(userMessage, { extraData }) {
      const messages = [];

      const logoImageUrl = "https://sample.website.com/logo.jpg"
      messages.push(new BotImageMessage(logoImageUrl) );

      messages.push(new BotTextMessage("Hello. How can I help you?"));
      return messages;           
   }
}

An image can also be combined with text and action buttons to form a Card, using the Botfuel Dialog class [Card(title, imageUrl, actions)].(https://github.com/Botfuel/botfuel-dialog/blob/master/packages/botfuel-dialog/src/messages/card.js)

CardsMessage groups an array of Card to create a carousel message (see this Facebook doc for carousel message type details).

new CardsMessage([
  new Card(
    'Title 1',
    'http://.../item1.png',
    [
      new Postback('More info', 'infos-item-1', []),
    ],
  ),
  new Card(
    'Title 2',
    'http://.../item2.png',
    [
      new Postback('More info', 'infos-item-2', []),
    ],
  ),
    new Card(
      'Title 3',
      'http://.../item3.png',
      [
        new Postback('More info', 'infos-item-3', []),
      ],
  ),
])

Images

In Botfuel Dialog, you can use both static and dynamically generated images in your bot.

Static images

You can have static images defined locally in your bot and Botfuel Dialog will serve them automatically through a WebApdater (such as the messenger adapter or the botfuel adapter).

Your images must be inside your bot’s /src/static/ folder:

/src
  /static
    /images
      logo.png
      chart.png
      ...

The urls of those static images can be obtained with the getStaticUrl function:

const imageUrl =  WebAdapter.getStaticUrl("images/logo.png");
messages.push(new BotImageMessage( imageUrl );
...

Dynamic images

As a bot developer, instead of using static images you may want to create dynamic images on the fly based on user input and send those images back to the user as part of the bot’s answer.

This is done in two steps:

First, you create an HTML template (using handlebars format) from which a full dynamic HTML page will be created. The handlebars templates must be defined inside the /src/templates folder:

/src
  /static
    /images
    /css
  /templates
    product_info.handlebars
    ...

For example, you might want to send back product information that contains a title, four images, and a description. Here is how the corresponding template would look like:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="/static/css/style.css">
</head>
<body>
  <h1> {{ productName }} </h1>

  <div class="product-images" >
    <img src="/static/images/{{ productImages.[0] }}">
    <img src="/static/images/{{ productImages.[1] }}">
    <img src="/static/images/{{ productImages.[2] }}">
    <img src="/static/images/{{ productImages.[3] }}">
  </div>

  <div class="product-description">
    {{ productDescription }}
  </div>
</body>
</html>

Images and stylesheets for the templates should be stored in the static folder as shown in the above example.

Botfuel Dialog will create a dynamic page based on the parameters you provide in the handlebars expressions {{ ... }} of the template.

Second, to get the image (screenshot) of that page, you use the getImageUrl function, that takes as parameters a template name, a parameter object for handlebars expressions, and optionally image width, height, quality:

var productInfo = { 
  productName: "Top Hat", 
  productImages: ["tophat1.png", "tophat2.png", "tophat3.png", "tophat4.png"], 
  productDescription: "..." 
  };

var productInfoImageUrl = WebAdapter.getImageUrl( "product_info.handlebars", 
                                             productInfo,
                                             800, 600, 80);
                                             
messages.push(new BotImageMessage( productInfoImageUrl );

The optional image parameters width, height and quality have default values 800, 600, and 80 respectively. Width and height correspond to the viewport of the Chrome browser, which renders the template html page while taking the screenshot. The quality parameter must be between 0 and 100. You can set lower quality value to reduce image size.