Why can't rich messages be displayed in Messenger since they are shown in the internal tester?

Question

I have a Dialogflow chatbot. In the Dialogflow internal tester everything works fine, but in the version displayed on facebook I cannot get the cards or suggestions. Even when I replace them with code from another working chatbot.

const functions = require('firebase-functions');
const {WebhookClient} = require('dialogflow-fulfillment');
const {Card, Suggestion, Payload} = require('dialogflow-fulfillment');
var answers = [];

process.env.DEBUG = 'dialogflow:debug'; // enables lib debugging statements

exports.dialogflowFirebaseFulfillment = functions.https.onRequest((request, response) => {
  const agent = new WebhookClient({ request, response });

  function welcome(agent) {
    agent.add('Hi! Do you want to discover your lockdown personality?');
    agent.add(new Card({
        title: '1. How has the COVID-19 crisis',
        imageUrl: 'https://ejoy-english.com/blog/wp-content/uploads/2018/08/shutterstock_524250877-e1496428580440.jpg',
        text: 'impacted the stability of your life?',
      })
    );
    agent.add(new Suggestion("1 more exasperated and hopeless"));
    agent.add(new Suggestion("2 less freaked out than other people"));
    agent.add(new Suggestion("3 More calm and hopeful"));
    agent.add(new Suggestion("4 More scared and panicked"));
    agent.add(new Suggestion("5 More surprised and baffled"));
  }
  let intentMap = new Map();
  intentMap.set('Default Welcome Intent', welcome);


  agent.handleRequest(intentMap);
});

Here's what I get on Facebook:

And in the Dialogflow's inernal tester:

It's working well on Slack and I managed to do another chatbot which use rich messages as well without using JSON payload and it worked well on messenger. I don't know why can't rich messages be displayed in Messenger with this specific chatbot.

Answer 1

The DialogFlow built-in tester is a good way to validate the conversation flow and test the intent recognition, however about the rendering of the response (from quick replies to attachments) you need to consider that Facebook has a different render engine (same for other channels) so certain types do not play well and they are not definitely standardise.

The solution in this case I believe to provide a custom Facebook payload which is what the Messenger platform expects.

For buttons for example:

 {
  "facebook": {
    "attachment": {
      "type": "template",
      "payload": {
        "template_type": "button",
        "text": "Can I ask you a few questions?",
        "buttons": [
          {
            "title": "Yes",
            "payload": "Yes",
            "type": "postback"
          },
          {
            "payload": "No",
            "title": "No",
            "type": "postback"
          }
        ]
      }
    }
  }
}

As you use the DialogFlow Fulfillment library you want to look at the Payload object.

agent.add(new Payload(agent.FACEBOOK, {/*your custom payload here*/});

Answer 2

I notice something strange from the HTTP response for my dialogflow fulfillment webhook service: The received JSON payload has 4 unwanted characters injected at the beginning of the JSON when I use the Dialogflow Messenger client embedded on my webpage. But these characters do not appear in the JSON response payload when I use the "Try it now" tester in the Dialogflow Agent console.

These additional characters could cause an invalid JSON, thus breaking the rendering of cards and quick replies in the messaging client. Is this the bug in the Dialogflow Messenger that is causing the rendering problem?

)]}' <---What are these???
{
  "responseId": "xxxxx",
  "queryResult": {
    "queryText": "baby shower",
    "parameters": {
      "occassionType": "baby shower"
    },
    "allRequiredParamsPresent": true,
    "fulfillmentText": "Ok, you are looking for your baby shower",
    "fulfillmentMessages": [{
      "text": {
        "text": ["Ok, you are looking for your baby shower"]
      }
    }, {
      "payload": {
        "queryResult": {
          "action": "input.welcome",
          "allRequiredParamsPresent": true,
          "diagnosticInfo": {
            "webhook_latency_ms": 191.0
          },
          "fulfillmentMessages": [{
            "text": {
              "text": ["Hi! My name is Buffie. XXXXXXX"]
            }
          }, {
            "card": {
              "buttons": [{
                "postback": "https://somewhere.com",
                "text": "Button"
              }],
              "imageUri": "https://www.gstatic.com/webp/gallery/4.jpg",
              "subtitle": "This is some example text...",
              "title": "Card Title"
            }
          }],
          "fulfillmentText": "Hi! My name is Buffie, how can I help you",
          "intent": {
            "displayName": "Default Welcome Intent",
            "name": "projects/xxxxx/xxxxx"
          },
          "intentDetectionConfidence": 1.0,
          "languageCode": "en",
          "parameters": {
          },
          "queryText": "hi"
        },
        "responseId": "XXXXXXXX",
        "webhookStatus": {
          "message": "Webhook execution successful"
        }
      }
    }],
    "intent": {
      "name": "projects/xxxxx/xxxx/xxxx",
      "displayName": "Occassion"
    },
    "intentDetectionConfidence": 1.0,
    "languageCode": "en"
  }
}