How to Set Up Custom Payload Responses in DialogFlow Intents via the API

Using custom payloads in your Facebook messenger responses can be very powerful. However, due to the lack of documentation, it can be frustrating to navigate how DialogFlow takes in the responses and passes them along to Facebook.

This article will focus on using the API via python to set up custom payloads, but the examples will work for the DialogFlow console and other languages as well. My goal was to use quick replies but not have the payload be the title text (I wanted to quick reply to link to a url, using a custom call back).

Warning! Please remember that custom payloads will usually NOT be displayed in the DialogFlow console! They usually need to be tested directly from Facebook Messenger.

Facebook Custom Payload Response in DialogFlow

The end result in the DialogFlow console will look like this:

{
  "facebook": {
    "quick_replies": [
      {
        "image_url": "https://s3.amazonaws.com/com.niches.production/story_images/new_images/000/001/280/width_600/Flank-Steak-chimichurri-overhead.jpg?1438173522",
        "content_type": "text",
        "title": "Flank",
        "payload": "https://www.amazingfoodmadeeasy.com/sous-vide-times-temperatures/how-to-sous-vide/flank-steak"
      },
      {
        "title": "Sirloin",
        "payload": "https://www.amazingfoodmadeeasy.com/sous-vide-times-temperatures/how-to-sous-vide/beef-sirloin-steak",
        "image_url": "https://s3.amazonaws.com/com.niches.production/story_images/new_images/000/001/520/width_600/Sous-Vide-Sirloin-Roasted-Vegetables.jpg?1451824582",
        "content_type": "text"
      }
    ],
    "text": "What Type of Meat?"
  }
}

And the python creation script will look like this:

intents_client = dialogflow.IntentsClient()
parent = intents_client.project_agent_path(dialogflow_project_id())

part = dialogflow.types.Intent.TrainingPhrase.Part(
  text = "Steak Guides")
training_phrase = dialogflow.types.Intent.TrainingPhrase(parts=[part])

messages = []
custom_payload = dialogflow.types.struct_pb2.Struct()
custom_payload.update(
    {
        "facebook": {
          "text": "What Type of Meat?",
          "quick_replies": [
              {
                  "image_url": "https://s3.amazonaws.com/com.niches.production/story_images/new_images/000/001/280/width_600/Flank-Steak-chimichurri-overhead.jpg?1438173522",
                  "content_type": "text",
                  "title": "Flank",
                  "payload": "https://www.amazingfoodmadeeasy.com/sous-vide-times-temperatures/how-to-sous-vide/flank-steak"
              },
              {
                  "payload": "https://www.amazingfoodmadeeasy.com/sous-vide-times-temperatures/how-to-sous-vide/beef-sirloin-steak",
                  "image_url": "https://s3.amazonaws.com/com.niches.production/story_images/new_images/000/001/520/width_600/Sous-Vide-Sirloin-Roasted-Vegetables.jpg?1451824582",
                  "content_type": "text",
                  "title": "Sirloin"
              }
          ]
        }
    }
)

payload_message = dialogflow.types.Intent.Message(platform="FACEBOOK", payload=custom_payload)
messages.append(payload_message)

intent = dialogflow.types.Intent(
    display_name = "Steak Guides",
    training_phrases = [training_phrase],
    messages = messages
)

response = intents_client.create_intent(parent, intent)

Works for Most Facebook Messenger Message Types

As far as I can tell, you can use any of the Facebook Messager messaging types in these custom payloads. Just grab whatever is in the "message" section of the examples in the Facebook guides and place that into the "facebook" section of DialogFlow.

So for a silly example of just sending text, the Facebook example is:

curl -X POST -H "Content-Type: application/json" -d '{
  "recipient":{
    "id":""
  },
  "message":{
    "text":"hello, world!"
  }
}' "https://graph.facebook.com/v6.0/me/messages?access_token="

And you can just grab out:

{
  "text":"hello, world!"
}

And put that into the DialogFlow custom payload.

{
  "facebook": {
    "text": "hello, world!"
  }
}

That's a super basic example, but the same concept will work for custom quick replies, carousels, and other more advanced messages.

Ignore Attachments Unless You Are Using Them

Another issue you can run into when using the DialogFlow console itself, is that when you click "custom payload" it gives you:

  {
    "facebook": {
      "attachment": {
        "type": "",
        "payload": {}
      }
    }
  }

But you don't always need the "attachment" section, that can be replaced with any Facebook messaging types, like in the simple text example above.