Converting JSON code of Facebook's Generic Template to C# in Bot framework

Question

I am having a hard time converting this generic template of facebook to C#. I am not sure if i converted it right. Below is the code i tried but is not rendering on messenger. Thank you.

    curl -X POST -H "Content-Type: application/json" -d '{
  "recipient":{
    "id":"<PSID>"
  },
  "message":{
    "attachment":{
      "type":"template",
      "payload":{
        "template_type":"generic",
        "elements":[
           {
            "title":"Welcome!",
            "image_url":"https://petersfancybrownhats.com/company_image.png",
            "subtitle":"We have the right hat for everyone.",
            "default_action": {
              "type": "web_url",
              "url": "https://petersfancybrownhats.com/view?item=103",
              "webview_height_ratio": "tall",
            },
            "buttons":[
              {
                "type":"web_url",
                "url":"https://petersfancybrownhats.com",
                "title":"View Website"
              },{
                "type":"postback",
                "title":"Start Chatting",
                "payload":"DEVELOPER_DEFINED_PAYLOAD"
              }              
            ]      
          }
        ]
      }
    }
  }
}' "https://graph.facebook.com/v2.6/me/messages?access_token=<PAGE_ACCESS_TOKEN>"

This is what i tried in c# but it is not working. I am not sure if i converted it the proper way. Any help would be appreciated thank you.

   Activity previewReply = stepContext.Context.Activity.CreateReply();

            previewReply.ChannelData = JObject.FromObject(
            new
            {
                attachment = new
                {
                    type = "template",
                    payload = new
                    {
                        template_type = "generic",
                        elements = new
                        {
                            title = "title",
                            subtitle = "subtitle",
                            image_url = "https://thechangreport.com/img/lightning.png",
                            buttons = new object[]
                            {
                                new
                                {
                                    type = "element_share,",
                                    share_contents = new
                                    {
                                        attachment = new
                                        {
                                            type = "template",
                                            payload = new
                                            {
                                                template_type = "generic",
                                                elements = new
                                                {
                                                        title = "x",
                                                        subtitle = "xx",
                                                        image_url = "https://thechangreport.com/img/lightning.png",
                                                        default_action = new
                                                        {
                                                             type = "web_url",
                                                             url = "http://m.me/petershats?ref=invited_by_24601",
                                                        },
                                                        buttons = new
                                                        {
                                                              type = "web_url",
                                                              url = "http://m.me/petershats?ref=invited_by_24601",
                                                              title = "Take Quiz",
                                                        },
                                                },
                                            },
                                         },
                                     },
                                },
                            },
                        },
                    },
                },
            });

            await stepContext.Context.SendActivityAsync(previewReply);

Answer 1

The elements and buttons attributes need to be lists. Take a look at the example template below.

var attachment = new
{
    type = "template",
    payload = new
    {
        template_type = "generic",
        elements = new []
        {
            new {
                title = "title",
                image_url = "https://thechangreport.com/img/lightning.png",
                subtitle = "subtitle",
                buttons = new object[]
                {
                    new {
                        type = "element_share",
                        share_contents = new {
                            attachment = new {
                                type = "template",
                                payload = new
                                {
                                    template_type = "generic",
                                    elements = new []
                                    {
                                        new {
                                            title = "title 2",
                                            image_url = "https://thechangreport.com/img/lightning.png",
                                            subtitle = "subtitle 2",
                                            buttons = new object[]
                                            {
                                                new {
                                                    type = "web_url",
                                                    url = "http://m.me/petershats?ref=invited_by_24601",
                                                    title = "Take Quiz"
                                                },
                                            },
                                        },
                                    },
                                },
                            }
                        },
                    },
                },
            },
        },
    },
};

reply.ChannelData = JObject.FromObject(new { attachment });

Note, you only need to add a share_contents element to your template if your main template is different from the template you are trying to share. Otherwise, your button can just be new { type = "element_share" }, which makes the template far less complex.

Also, be sure to Whitelist all of your URLs and make sure all of the image URLs work properly - a couple of them weren't working properly. The template won't render if the URLs aren't Whitelisted and image links are broken.

Hope this helps!