Microsoft Bot Framework Custom Facebook Messages

Question

I've started to work on my chatbot using Bot Builder SDK in C# and Microsoft Bot Framework. I've deployed my bot and can interact with it. Currently I'm focusing on facebook messenger. I already can show cards and buttons on messenger using Microsoft.Bot.Connector.Attachment. You can find it in Bot Connector Documentation. Now I'm trying to to implement Custom Facebook Messages, but without success. Here's my code:

public async Task<Message> Post([FromBody]Message message)
    {
        if (message.Type == "Message")
        {
            message.BotPerUserInConversationData = null;


            if (message.Text.Equals("test", StringComparison.InvariantCultureIgnoreCase))
            {
                var replyMessage = message.CreateReplyMessage();
                replyMessage.ChannelData = new
                {
                    notification_type = "NO_PUSH",
                    attachment = new
                    {
                        type = "template",
                        payload = new
                        {
                            template_type = "receipt",
                            recipient_name = "Stephane Crozatier",
                            order_number = "12345678902",
                            currency = "USD",
                            payment_method = "Visa 2345",
                            order_url = "http://petersapparel.parseapp.com/order?order_id=123456",
                            timestamp = "1428444852",
                            elements = new[]
                            {
                                new {
                                    title = "Classic White T-Shirt",
                                    subtitle = "100% Soft and Luxurious Cotton",
                                    quantity = 2,
                                    price = 50,
                                    currency = "USD",
                                    image_url = "http://petersapparel.parseapp.com/img/whiteshirt.png"
                                    },
                                new
                                    {
                                        title = "Classic Gray T-Shirt",
                                        subtitle = "100% Soft and Luxurious Cotton",
                                        quantity = 1,
                                        price = 25,
                                        currency = "USD",
                                        image_url = "http://petersapparel.parseapp.com/img/grayshirt.png"
                                    }
                            },
                            address = new
                            {
                                street_1 = "1 Hacker Way",
                                street_2 = "",
                                city = "Menlo Park",
                                postal_code = "94025",
                                state = "CA",
                                country = "US"
                            },
                            summary = new
                            {
                                subtotal = 75.00,
                                shipping_cost = 4.95,
                                total_tax = 6.19,
                                total_cost = 56.14
                            },
                            adjustments = new[]
                            {
                                new {name = "New Customer Discount", amount = 20},
                                new {name = "$10 Off Coupon", amount = 10}
                            }
                        }
                    }
                };

                return replyMessage;

            }

            // return our reply to the user
            try
            {
                return await Conversation.SendAsync(message, () => new EchoDialog());
            }
            catch (Exception exc)
            {
                return message.CreateReplyMessage(exc.Message);
            }
        }
        else
        {
            return HandleSystemMessage(message);
        }
    }

For example, EchoDialog is working and I get results. I can get data in the bot framework interface. Here's the json I get from my bot:

{
  "type": "Message",
  "id": "CeBI3NS7w0k",
  "conversationId": "D9b6pW1TY29TDUB5qx6CL5U59fv49oBQK5iKABIA0nFC0C8C",
  "created": "2016-05-10T09:34:46.5131971Z",
  "language": "en",
  "text": "",
  "attachments": [],
  "from": {
    "name": "TestBot",
    "channelId": "test",
    "address": "mytestbot",
    "id": "mytestbot",
    "isBot": true
  },
  "to": {
    "name": "devportal",
    "channelId": "test",
    "address": "devportal",
    "id": "JMQ0KLCKN6R",
    "isBot": false
  },
  "replyToMessageId": "FUjcCRhTmu0",
  "participants": [
    {
      "name": "devportal",
      "channelId": "test",
      "address": "devportal",
      "id": "JMQ0KLCKN6R",
      "isBot": false
    },
    {
      "name": "TestBot",
      "channelId": "test",
      "address": "mytestbot",
      "id": "mytestbot",
      "isBot": true
    }
  ],
  "totalParticipants": 2,
  "mentions": [],
  "channelConversationId": "mytestbot",
  "channelData": {
    "notification_type": "NO_PUSH",
    "attachment": {
      "type": "template",
      "payload": {
        "template_type": "receipt",
        "recipient_name": "Stephane Crozatier",
        "order_number": "12345678902",
        "currency": "USD",
        "payment_method": "Visa 2345",
        "order_url": "http://petersapparel.parseapp.com/order?order_id=123456",
        "timestamp": "1428444852",
        "elements": [
          {
            "title": "Classic White T-Shirt",
            "subtitle": "100% Soft and Luxurious Cotton",
            "quantity": 2,
            "price": 50,
            "currency": "USD",
            "image_url": "http://petersapparel.parseapp.com/img/whiteshirt.png"
          },
          {
            "title": "Classic Gray T-Shirt",
            "subtitle": "100% Soft and Luxurious Cotton",
            "quantity": 1,
            "price": 25,
            "currency": "USD",
            "image_url": "http://petersapparel.parseapp.com/img/grayshirt.png"
          }
        ],
        "address": {
          "street_1": "1 Hacker Way",
          "street_2": "",
          "city": "Menlo Park",
          "postal_code": "94025",
          "state": "CA",
          "country": "US"
        },
        "summary": {
          "subtotal": 75,
          "shipping_cost": 4.95,
          "total_tax": 6.19,
          "total_cost": 56.14
        },
        "adjustments": [
          {
            "name": "New Customer Discount",
            "amount": 20
          },
          {
            "name": "$10 Off Coupon",
            "amount": 10
          }
        ]
      }
    }
  },
  "hashtags": []
} 

*Ids and names changed.

Has anyone managed to get FB Messenger to display templates using ChannelData?

Update: I checked it from another fb account and succeeded to get template but only for first time. Every next attempt remained me without response.

Answer 1

Your code since fine, what do you mean that "every next attempt remained me wiathout response."?

i made a BOT for Messenger too, and it work just like you. This is my code

    public async Task<Message> Post([FromBody]Message message)
    {
        if (message.Type == "Message"){
            Message ReplyMessage = message.CreateReplyMessage();
            ReplyMessage.ChannelData = getFBFunctionMenu();
            return ReplyMessage;
        }else{return HandleSystemMessage(message);}
    }

and This my Function do:

    public object getFBFunctionMenu(){
        Models.Messenger fbmsg = new Models.Messenger();
        fbmsg.ChannelData = new MessengerChannelData { notification_type = "NO_PUSH", attachment = new MessengerAttachment { payload = new MessengerPayload() } };
        fbmsg.ChannelData.attachment.type = "template";
        fbmsg.ChannelData.attachment.payload.template_type = "generic";
        List<MessengerElement> e = new List<MessengerElement>();
        List<MessengerButton> bs = new List<MessengerButton>();
        bs.Add(new MessengerButton{type = "web_url",title = "Facebook",url ="http://www.facebook.com/"});
        bs.Add(new MessengerButton{type = "web_url",title = "Google",url ="http://www.google.com/"});
        bs.Add(new MessengerButton{type = "web_url",title = "Amazon",url ="http://www.amazon.com/"});
        e.Add(new MessengerElement
        {
            title = "My Favorte Site",
            subtitle = "some descript",
            item_url = "http://localhost/",
            image_url = "http://loalhost/img.png",
            buttons = bs.ToArray()
        });
        fbmsg.ChannelData.attachment.payload.elements = e.ToArray();
        return fbmsg.ChannelData;
    }

My Model Code:

 namespace WiAdvance.BotConnector.Messenger.Models
 {

public class Messenger
{
    public MessengerChannelData ChannelData { get; set; }
}
public class MessengerChannelData
{
    public string notification_type { get; set; }
    public MessengerAttachment attachment { get; set; }
}
public class MessengerAttachment
{
    public string type { get; set; }
    public MessengerPayload payload { get; set; }
}

public class MessengerPayload
{
    public string template_type { get; set; }
    public MessengerElement[] elements { get; set; }
}

public class MessengerElement
{
    public string title { get; set; }
    public string subtitle { get; set; }
    public string item_url { get; set; }
    public string image_url { get; set; }
    public MessengerButton[] buttons { get; set; }
}

public class MessengerButton
{
    public string type { get; set; }
    public string url { get; set; }
    public string title { get; set; }
    public string payload { get; set; }
}
 }