Using different Custom payloads for Dialogflow messenger and Facebook messenger integration in Dialogflow CX

I guess this might be a stupid issue, solvable in a really easy way, but I'm really struggling.

I have the “old” chatbot, built in Dialogflow ES with 2 integrations (DF messenger, FB messenger). And because I set up 2 integrations I automatically have 2 tabs for responses available with every intent.

If I want to add a button, I need to use the Custom payload type of response. And since I have 2 different integrations which I need different code for, I need to set the custom payload for each of them (1 on every tab).

Custom payload for the DF messenger example:

{
  "richContent": [
    [
      {
        "icon": {
          "color": "#F78A2D",
          "type": "network_check"
        },
        "text": "Text on the button",
        "type": "button",
        "link": "https://www.example.com"
      }
    ]
  ]
}

Custom payload for the FB messenger example with the similar functionality:

{
  "facebook": {
    "attachment": {
      "type": "template",
      "payload": {
        "template_type": "button",
        "buttons": [
          {
            "title": "Text on the button",
            "url": "https://www.example.com",
            "type": "web_url"
          }
        ],
        "text": "Required text"
      }
    }
  }
}

Everything works as expected.

The issue

I want to achieve the same thing with Dialogflow CX.

I’ve set up same integrations (DF and FB messenger) and the first thing I noticed is that I don’t see any additional tab for FB messenger. Because I can’t find the separate FB tab I’ve been playing with the single Custom payload response and mixing both codes together (for DF messenger and FB messenger) with no success.

What I managed to do is:

If in this single Custom payload response I use just the code for DF messenger, it works with DF messenger as expected - the user gets the response with the button. The FB messenger just “ignores” the code and doesn’t show the button. The code:

{
  "richContent": [
    [
      {
        "icon": {
          "color": "#F78A2D",
          "type": "network_check"
        },
        "text": "Text on the button",
        "type": "button",
        "link": "https://www.example.com"
      }
    ]
  ]
}

If I use just the code for the FB messenger, it works as expected - the user gets the response with the quick replies. The DF messenger just “ignores” the code and doesn’t show quick replies/chips. The code (different than in Dialogflow ES, but let’s start simple, using just quick replies :D):

{
  "text": "Pick a color:",
  "quick_replies":[
    {
      "content_type":"text",
      "title":"Red",
      "payload":"Red color"
    },{
      "content_type":"text",
      "title":"Green",
      "payload":"Green color"
    }
  ]
}

And now we come to the problem. Because there’s no extra tab for FB messenger (as stated before) I’m trying to male things work by mixing both codes together. So the mixed code looks like this:

{
  "richContent": [
    [
      {
        "icon": {
          "color": "#F78A2D",
          "type": "network_check"
        },
        "text": "Text on the button",
        "type": "button",
        "link": "https://www.example.com"
      }
    ]
  ],
  "text": "Pick a color:",
  "quick_replies":[
    {
      "content_type":"text",
      "title":"Red",
      "payload":"rdeč"
    },{
      "content_type":"text",
      "title":"Green",
      "payload":"zelen"
    }
  ]
}

As you’d assume by now, this code works with DF messenger integration (the user gets the button), but it doesn’t work with FB integration (user doesn’t get the quick replies).

So the real questions are:

1. How do I get this to work?
2. Am I somewhere missing a different tab for FB messenger responses (similar to DF ES)?
3. Or is there just a thing or two missing inside the code?
4. Should I maybe use the conditional response aka “IF FB messenger integration THEN use FB code ELSE use DF code”? If so, how can I check what integration is being used at the moment by user?

Oh, BTW, does anyone have any quick link about how to debug the FB messenger integration? I'm familiar with the GCP Logs explorer, but I can't seem to find any FB related issues in those logs - I'm assuming they could help since the FB integration is not working as expected.

The answer I got on Google forum and which best describes the solution and is up to date:

---

The engineers are working on implementing using custom payloads for different integrations in a single agent for Dialogflow CX (LINK). You can subscribe to get automatic updates on the progress made on this feature request by selecting the star listed at the left side of the thread title.

In the meantime, a possible workaround would be to use different agents for the integrations.

---

EDIT: Just thought of another solution which I believe could be more than just a workaround and might actually stick around (maybe that's even the way Google imagined it). We could use the versioning in the way that we have different versions for different integrations. The only drawback worth mentioning and which I can see here is that we need to use all bot flows in all versions and therefore in all integrations. Which could be an issue if we want to use totally different communication flow for different integrations. The issue is kind of solvable by emptying flows for specific integrations (or not using/linking them at all), but on the other hand the totally different communication flow could also just simply mean a new agent.

Feel free to comment on this solution. I'm courious if you agree.