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

Prerequisite

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

Send List template

The list template is a list of 2-4 elements with an button where button can be optional. Each item may contain a thumbnail image, title, subtitle, and one button.

Create new case in Switch statement,

case "send-list":
    const list = {
        "template_type": "list",
        "top_element_style": "compact",
        "elements": [
            {
                "title": "Classic T-Shirt Collection",
                "subtitle": "See all our colors",
                "image_url": "http://pngimg.com/uploads/tshirt/tshirt_PNG5450.png",
                "buttons": [
                    {
                        "title": "View",
                        "type": "web_url",
                        "url": "https://yudiz-bot.herokuapp.com/collection",
                        "messenger_extensions": true,
                        "webview_height_ratio": "tall",
                        "fallback_url": "https://yudiz-bot.herokuapp.com"
                    }
                ]
            },
            {
                "title": "Classic White T-Shirt",
                "subtitle": "See all our colors",
                "default_action": {
                    "type": "web_url",
                    "url": "https://yudiz-bot.herokuapp.com/view?item=100",
                    "messenger_extensions": false,
                    "webview_height_ratio": "tall"
                }
            },
            {
                "title": "Classic Blue T-Shirt",
                "image_url": "http://pngimg.com/uploads/tshirt/tshirt_PNG5450.png",
                "subtitle": "100% Cotton, 200% Comfortable",
                "default_action": {
                    "type": "web_url",
                    "url": "https://yudiz-bot.herokuapp.com/view?item=101",
                    "messenger_extensions": true,
                    "webview_height_ratio": "tall",
                    "fallback_url": "https://yudiz-bot.herokuapp.com"
                },
                "buttons": [
                    {
                        "title": "Shop Now",
                        "type": "web_url",
                        "url": "https://yudiz-bot.herokuapp.com/shop?item=101",
                        "messenger_extensions": true,
                        "webview_height_ratio": "tall",
                        "fallback_url": "https://yudiz-bot.herokuapp.com"
                    }
                ]
            }
        ],
        "buttons": [
            {
                "title": "View More",
                "type": "postback",
                "payload": "payload"
            }
        ]
    }
    sendListMessege(sender, list)
break;

To send this list Create new function,

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

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

Send Button template

Button template includes text message with up to three attached buttons. We can send three types of buttons that can handle postback, Phone call, and URL.

Create new case in switch statement,

case "send-button":
  const responseText = "exmple buttons";
  const elements = [{
    "type": "web_url",
    "url": "https://f1948e04.ngrok.io",
    "title": "URL",
  }, {
    "type": "postback",
    "title": "POSTBACK",
    "payload": "POSTBACK TEST"
  }, {
    "type": "phone_number",
    "title": "CALL",
    "payload": "+919510733999"
  }]
  sendButtonMessage(sender, responseText, elements)
break;
Create a sendButtonMessage() function to send those elements,
const sendButtonMessage = async (recipientId, text, buttons) => {
  var messageData = {
    recipient: {
      id: recipientId
    },
    message: {
      attachment: {
        type: "template",
        payload: {
          template_type: "button",
          text: text,
          buttons: buttons
        }
      }
    }
  };
  await callSendAPI(messageData);
}

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

Send Open Graph template

The open graph template allows to send open graph URL with optional button. Currently, only sharing songs is supported.

Create new case in Switch Statement,

case "send-graph" :
  var element = [{
    "url": "https://open.spotify.com/album/1XbZ2tMfcQTbVkr55JnoRg",
    "buttons": [
      {
        "type": "web_url",
        "url": "https://en.wikipedia.org/wiki/Rickrolling",
        "title": "View More"
      }
    ]     
  }]  
  sendGraphTemplate(sender,element);
break;

Now create sendGraphTemplate() function to send element,

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

callSendAPI() function will send messageData to send API and the song will appear in a bubble that allows the user to see album art and preview the song.

Send Receipt template

When you are making chatbot for shopping related apps and when user buys something from your bot you must send receipt at the end of payment, that’s the receipt template facebook provides.

Create new case in switch statement,

case "send-receipt":
    const recipient_name = "Nikhil Savaliya";
    const currency = "INR";
    const payment_method = "Visa 2345";
    const timestamp = 1428444852;
    const elementRec = [{
        "title": "Classic Blue T-Shirt",
        "subtitle": "100% Soft and Luxurious Cotton",
        "quantity": 1,
        "price": 350,
        "currency": "INR",
        "image_url": "http://pngimg.com/uploads/tshirt/tshirt_PNG5450.png"
    }];
    const address = {
        "street_1": "A-6, First Floor",
        "street_2": "Safal Profitaire,",
        "city": "Ahmedabad",
        "postal_code": "380015",
        "state": "Gujarat",
        "country": "IN"
    };
    const summary = {
        "subtotal": 350.00,
        "shipping_cost": 4.95,
        "total_tax": 6.19,
        "total_cost": 361.14
    };
    const adjustments = [
        {
            "name": "New Customer Discount",
            "amount": 20
        },
        {
            "name": "$10 Off Coupon",
            "amount": 10
        }
    ];
    const order_url = "https://37cf1e51.ngrok.io"
    sendReceiptMessage(sender,
        recipient_name,
        currency,
        payment_method,
        timestamp,
        elementRec,
        address,
        summary,
        adjustments,
        order_url);
break;

Create sendReceiptMessage() function to send above elements,

const sendReceiptMessage = async (
  recipientId,
  recipient_name,
  currency,
  payment_method,
  timestamp,
  elements,
  address,
  summary,
  adjustments,
  order_url
 ) => {
  var receiptId = "order" + Math.floor(Math.random() * 1000);
  var messageData = {
    recipient: {
      id: recipientId
    },
    message: {
      attachment: {
        type: "template",
        payload: {
          template_type: "receipt",
          recipient_name: recipient_name,
          order_number: receiptId,
          currency: currency,
          payment_method: payment_method,
          order_url: order_url,
          timestamp: timestamp,
          address: address,
          summary: summary,
          adjustments: adjustments,
          elements: elements,
        }
      }
    }
  };
  await callSendAPI(messageData);
}

By this way you can generate and send receipt to users when they make payment.

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.