How do I know which Card's shortcut is clicked

[Vejey_Gandier]

I’m having 3 cards with the following Titles: RED, BLUE, GREEN
Each of these cards have the same shortcut: EDIT, EDIT, EDIT

When I click on EDIT on BLUE, how do I know if I clicked BLUE’s EDIT and not RED/GREEN’s EDIT? Is there a way to information to the next FLOW?

[kellseyshaw]

Hi Vejay,

There isn’t a way to do that, sorry. You would need to use different text per shortcut as shortcuts are designed to start a certain flow.

[Vejey_Gandier]

I’m currently using attributes to circumvent this issue. Let me know if you guys have it in the roadmap.

[kellseyshaw]

Hi Vejey,

We don’t plan on changing the functionality of the shortcuts currently, as they were intended to be used to trigger flows meaning they would naturally have unique values assigned to them.

You could use our Webhook feature to add in a custom card, which would then give you the perfect solution.

You can check out Messenger’s documentation for an example that you can use. It’s the Payload that needs to contain your trigger value. The text could say Edit for each button then.

We’ve got another topic where something similar has been done so you could look at that to see how the custom webhook is put together.

Location Button (Messenger) - Making sending your location easy

Now that we support receiving location values, you no doubt will want to know how to give the user a button to send that location to you. You can use our Wehbook service to create a custom request to Messenger to provide the user with a message and the location button and here's how. Your URL should be: https://graph.facebook.com/v2.6/me/messages?access_token=InsertYourPageToken You'll just need to pop your page token on the end there where indicated. The Method should be POST. T…

[Vejey_Gandier]

It works great for Location.

I followed the documentation: https://developers.facebook.com/docs/messenger-platform/send-api-reference/list-template and tried implementing a List Template

Substitue:

RECIPIENT_ID = {{bot_new_message.user_id}}
PAGE_ACCESS_TOKEN = {{Your page access token}}

{
“recipient”:{
“id”:“RECIPIENT_ID”
}, “message”: {
“attachment”: {
“type”: “template”,
“payload”: {
“template_type”: “list”,
“elements”: [
{
“title”: “Classic T-Shirt Collection”,
“image_url”: “https://peterssendreceiveapp.ngrok.io/img/collection.png”,
“subtitle”: “See all our colors”,
“default_action”: {
“type”: “web_url”,
“url”: “https://peterssendreceiveapp.ngrok.io/shop_collection”,
“messenger_extensions”: true,
“webview_height_ratio”: “tall”,
“fallback_url”: “https://peterssendreceiveapp.ngrok.io/”
},
“buttons”: [
{
“title”: “View”,
“type”: “web_url”,
“url”: “https://peterssendreceiveapp.ngrok.io/collection”,
“messenger_extensions”: true,
“webview_height_ratio”: “tall”,
“fallback_url”: “https://peterssendreceiveapp.ngrok.io/”
}
]
},
{
“title”: “Classic White T-Shirt”,
“image_url”: “https://peterssendreceiveapp.ngrok.io/img/white-t-shirt.png”,
“subtitle”: “100% Cotton, 200% Comfortable”,
“default_action”: {
“type”: “web_url”,
“url”: “https://peterssendreceiveapp.ngrok.io/view?item=100”,
“messenger_extensions”: true,
“webview_height_ratio”: “tall”,
“fallback_url”: “https://peterssendreceiveapp.ngrok.io/”
},
“buttons”: [
{
“title”: “Shop Now”,
“type”: “web_url”,
“url”: “https://peterssendreceiveapp.ngrok.io/shop?item=100”,
“messenger_extensions”: true,
“webview_height_ratio”: “tall”,
“fallback_url”: “https://peterssendreceiveapp.ngrok.io/”
}
]
},
{
“title”: “Classic Blue T-Shirt”,
“image_url”: “https://peterssendreceiveapp.ngrok.io/img/blue-t-shirt.png”,
“subtitle”: “100% Cotton, 200% Comfortable”,
“default_action”: {
“type”: “web_url”,
“url”: “https://peterssendreceiveapp.ngrok.io/view?item=101”,
“messenger_extensions”: true,
“webview_height_ratio”: “tall”,
“fallback_url”: “https://peterssendreceiveapp.ngrok.io/”
},
“buttons”: [
{
“title”: “Shop Now”,
“type”: “web_url”,
“url”: “https://peterssendreceiveapp.ngrok.io/shop?item=101”,
“messenger_extensions”: true,
“webview_height_ratio”: “tall”,
“fallback_url”: “https://peterssendreceiveapp.ngrok.io/”
}
]
},
{
“title”: “Classic Black T-Shirt”,
“image_url”: “https://peterssendreceiveapp.ngrok.io/img/black-t-shirt.png”,
“subtitle”: “100% Cotton, 200% Comfortable”,
“default_action”: {
“type”: “web_url”,
“url”: “https://peterssendreceiveapp.ngrok.io/view?item=102”,
“messenger_extensions”: true,
“webview_height_ratio”: “tall”,
“fallback_url”: “https://peterssendreceiveapp.ngrok.io/”
},
“buttons”: [
{
“title”: “Shop Now”,
“type”: “web_url”,
“url”: “https://peterssendreceiveapp.ngrok.io/shop?item=102”,
“messenger_extensions”: true,
“webview_height_ratio”: “tall”,
“fallback_url”: “https://peterssendreceiveapp.ngrok.io/”
}
]
}
],
“buttons”: [
{
“title”: “View More”,
“type”: “postback”,
“payload”: “payload”
}
]
}
}
}
}’ “https://graph.facebook.com/me/messages?access_token=PAGE_ACCESS_TOKEN”

I get the following error:

{“error”:{“message”:"(#100) The URL provided is not whitelisted for messenger extensions",“type”:“OAuthException”,“code”:100,“error_subcode”:2018062,“fbtrace_id”:“HqDa28axMhk”}}

I also tried whitelisting https://peterssendreceiveapp.ngrok.io/ as the URL from the above example (directly from FB) it still didn’t work.

What is the domain that I need to whitelist to get it work? Please help thanks!

[kellseyshaw]

Hi Vejey,

It would be the domain that you are using in the URL fields but it must be a valid domain for you to be able to whitelist it and the one used in Messenger’s example isn’t valid so you won’t be able to whitelist that one

[Anish]

@Vejey_Gandier

Hi Vejey,

Were you able to get this to work? I had the exact same error.

Also is your Bot set up as an app or connected directly to the page?

Thanks

[Viljami_Ketola]

Hey,

I’m having the same problem. What is this whitelisting you are talking about? Is it Flow XO feature or FB messenger? And where is it located? On the Facebook page?

I went around this by deleting all the urls from the request, but it didn’t help. It still gave me an error:
“(#100) Pages using Messenger Extensions must use https and not include any port.”

{
"attachment": {
  "type": "template",
  "payload": {
    "template_type": "list",
    "top_element_style": "compact",
    "elements": [
      {
        "title": "Classic T-Shirt Collection",
        "subtitle": "See all our colors",
        "buttons": [
          {
            "title": "View",
            "type": "web_url",
            "messenger_extensions": true,
            "webview_height_ratio": "tall"
          }
        ]
      },
      {
        "title": "Classic White T-Shirt",
        "subtitle": "See all our colors",
        "default_action": {
          "type": "web_url",
          "messenger_extensions": false,
          "webview_height_ratio": "tall"
        }
      },
      {
        "title": "Classic Blue T-Shirt",
        "subtitle": "100% Cotton, 200% Comfortable",
        "default_action": {
          "type": "web_url",
          "messenger_extensions": true,
          "webview_height_ratio": "tall"
        },
        "buttons": [
          {
            "title": "Shop Now",
            "type": "web_url",
            "messenger_extensions": true,
            "webview_height_ratio": "tall"
          }
        ]        
      }
    ],
     "buttons": [
      {
        "title": "View More",
        "type": "postback",
        "payload": "payload"            
      }
    ]  
  }
}
  }

[Viljami_Ketola]

Solved it myself already…

Whitelisting happens from the Facebook Page settings -> messenger. I don’t know what the exact setting’s name is in english but in finnish it wasn’t very clear that I should add an url in there.

Anyways… you can’t just delete the urls or fields url and img_url fields from the json.