10

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:

introducir la descripción de la imagen aquí

And in the Dialogflow's inernal tester:

introducir la descripción de la imagen aquí

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.

Revolucion for Monica
  • 2,848
  • 8
  • 39
  • 78

2 Answers2

0

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*/});
Beppe C
  • 11,256
  • 2
  • 19
  • 41
  • Thanks for your answer! That's a nice way around. However I managed to create a chatbot with nice rich messages which doesn't use json payload. I don't know what I'm missing for this one ... – Revolucion for Monica Jun 03 '20 at 09:52
  • On Facebook? Or the emulator? You might need to define an Agent for the FB responses and one for the default one. In the DialogFlowUI you typically use a Default one when it is just a text response (it works everywhere) but then specify channel by channel to make sure the right payload is sent to the right render engine – Beppe C Jun 03 '20 at 11:16
0

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"
  }
}
Gerald Lim
  • 41
  • 2