Chatbot for Facebook Messenger using dialogflow and Node.js: Part2

Prerequisite

• Facebook Page
• Facebook Developer Account
• Understanding of Dialogflow
• Knowledge of Node.js

Getting Started

We have seen how to send simple text message from the webhook server using Facebook Send API.
Now, we will look at Rich responses like card, receipts, videos, image, Buttons. But before getting started make sure you have everything working from previous blog and all intent set up with unique action in dialogflow.

Send Image

When user asks ‘send me image’ out intent from dialogflow ‘send-photo’ will get triggered and based on the intent we will get the action of that specific intent.

Make a new case in switch statement in index.js file

Index.js

case "fb-send-image":
     var imgUrl = "https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/881e6651881085.58fd911b65d88.png";
      sendImageMessage(sender, imgUrl);
break;

Now make new function that can send Image.

const sendImageMessage = async (recipientId, imageUrl) => {
  var messageData = {
    recipient: {
      id: recipientId
    },
    message: {
      attachment: {
        type: "image",
        payload: {
          url: imageUrl
        }
      }
    }
  };
    await callSendAPI(messageData);
}

callSendAPI() function we made last time it will send messageData to send API and user will get Image as response.

Send Video or Media template

When user asks ‘send me video’ out intent from dialogflow ‘send-video’ will get triggered and based on the intent we will get the action of that specific intent.

case "send-video":
    const messageData = [
        {
            "media_type": "video",
            "url": "https://www.facebook.com/FacebookIndia/videos/1772075119516020/",
            "buttons": [
                {
                    "type": "web_url",
                    "url": "https://f1948e04.ngrok.io",
                    "title": "View Website",
                }
            ]
        }
    ]
    sendVideoMessage(sender, messageData);
break;

You can also specify button to the video or image you are sending, for more information look at media template.

Note: In this media template you only can send images and videos that are posted on facebook. You can not send images or video from other sources. If you are sending image then you have to give media_type as “image” and for video message media_type will be “video”

Let’s create function to send the video to user.

const sendVideoMessage = async (recipientId, elements) => {
  const messageData = {
    recipient: {
      id: recipientId
    },
    message: {
      attachment: {
        type: "template",
        payload: {
          template_type: "media",
          elements: elements
        }
      }
    }
  };
await callSendAPI(messageData)
}

callSendAPI() function will send messageData to send API and user will get Video or images as response.

Send Quick Replies

Sending Quick replies comes in handy it’s easy. We use quick replies to request a person’s location, email address, and phone number. When you tap on quick reply button it will get disappeared and the title of that button will posted to the conversation as a message.

Add a new case in Switch statement,

case "send-quick-reply":
    var responseText = "Choose the options"
    var replies = [{
        "content_type": "text",
        "title": "Example 1",
        "payload": "Example 1",
    },
    {
        "content_type": "text",
        "title": "Example 2",
        "payload": "Example 2",
    },
    {
        "content_type": "text",
        "title": "Example 3",
        "payload": "Example 3",
    }];
    sendQuickReply(sender, responseText, replies)
break;

Now let’s create the function to send those replies,

const sendQuickReply = async (recipientId, text, replies, metadata) => {
  var messageData = {
    recipient: {
      id: recipientId
    },
    message: {
      text: text,
      metadata: isDefined(metadata) ? metadata : "",
      quick_replies: replies
    }
  };
  await callSendAPI(messageData);
}

callSendAPI() function will send messageData to send API and user will get Quick replies as response.

Send Generic template & Carousel of Generic Templates

Generic template is kind of card that contains Maximum 3 buttons, image, title and subtitle. Carousel is like slider that includes more than two generic templates. Think as developer’s point of view while making some product level chatbot we should not make two functions for sending those responses, so we will try to make some optimization.

Create new case in switch statement,

case "send-carousel" :
  const elements = [{
    "title": "Welcome!",
    "subtitle": "We have the right hat for everyone.We have the right hat for everyone.We have the right hat for everyone.",
    "imageUrl": "https://www.stepforwardmichigan.org/wp-content/uploads/2017/03/step-foward-fb-1200x628-house.jpg",
    "buttons": [
      {
        "postback": "https://f1948e04.ngrok.io",
        "text": "View Website"
      }, {
        "text": "Start Chatting",
        "postback": "PAYLOAD EXAMPLE"
      }
    ]
  }, {
    "title": "Welcome!",
    "imageUrl": "https://www.stepforwardmichigan.org/wp-content/uploads/2017/03/step-foward-fb-1200x628-house.jpg",
    "subtitle": "We have the right hat for everyone.We have the right hat for everyone.We have the right hat for everyone.",
    "buttons": [
      {
        "postback": "https://f1948e04.ngrok.io",
        "text": "View Website"
      }, {
        "text": "Start Chatting",
        "postback": "PAYLOAD EXAMPLE"
      }
    ]
  },{
    "title": "Welcome!",
    "imageUrl": "https://www.stepforwardmichigan.org/wp-content/uploads/2017/03/step-foward-fb-1200x628-house.jpg",
    "subtitle": "We have the right hat for everyone.We have the right hat for everyone.We have the right hat for everyone.",
    "buttons": [
      {
        "postback": "https://f1948e04.ngrok.io",
        "text": "View Website"
      }, {
        "text": "Start Chatting",
        "postback": "PAYLOAD EXAMPLE"
      }
    ]
  }];
  handleCardMessages(elements, sender)
break;

We are sending 3 objects in Array so it will be a carousel if we send one it will be simple Generic template.

Create handleCardMessages() to handle above elements,
async function handleCardMessages(messages, sender) {
  let elements = [];
  for (var m = 0; m < messages.length; m++) {
    let message = messages[m];
    let buttons = [];
    for (var b = 0; b < message.buttons.length; b++) {
      let isLink = message.buttons[b].postback.substring(0, 4) === "http";
      let button;
      if (isLink) {
        button = {
          type: "web_url",
          title: message.buttons[b].text,
          url: message.buttons[b].postback
        };
      } else {
        button = {
          type: "postback",
          title: message.buttons[b].text,
          payload: message.buttons[b].postback
        };
      }
      buttons.push(button);
    }
    let element = {
      title: message.title,
      image_url: message.imageUrl,
      subtitle: message.subtitle,
      buttons: buttons
    };
    elements.push(element);
  }
  await sendGenericMessage(sender, elements);
}

The above function will make payload that facebook API Accepts. Let’s make sendGenericMessage() function to send elements,

const sendGenericMessage = async (recipientId, elements) => {
  var messageData = {
    recipient: {
      id: recipientId
    },
    message: {
      attachment: {
        type: "template",
        payload: {
          template_type: "generic",
          elements: elements
        }
      }
    }
  };
  await callSendAPI(messageData);
}

callSendAPI() function will send messageData to send API and user will get Generic template or carousel as response.

Conclusion : –

I have shown the way how to send each type of responses to facebook messenger now it’s your turn to think about creative ideas to build chatbot. Fill free to hit comments if you get stuck anywhere.