chatbotgupshup

Identify the button clicked in Carousel of a facebook bot built on Gupshup

I am using Gupshup.io to build my bot on Facebook and I have a question regarding the carousel.

Suppose I have 4 items in the carousel each with a buy button then how do I know which item's button gets clicked in the carousel by the user?

Solution

  • When a user clicks the button in the carousel, the response sent back to the bot consist of the button name and the position of the item in that list.

    For example:

    In the below image if the user clicks on the buy button for the white t-shirt then bot receives the response as "Buy 1" and for the grey t-shirt the bot will receive the response as "Buy 2". For more details refer this guide enter image description here

    Complete sample code for Gupshup's IDE Bot Builder:

    if(event.message=='t-shirt'){
       var catalogue = {
          "type": "catalogue",
          "imageaspectratio": "horizontal",
          "msgid": "cat_212",
          "items": [
            {
              "title": "White T Shirt",
             "subtitle": "Soft cotton t-shirt \nXs, S, M, L \n$10",
              "imgurl": "http://petersapparel.parseapp.com/img/item100-thumb.png",
              "options":[
                {
                  "type":"url",
                  "title":"View Details",
                  "url":"http://petersapparel.parseapp.com/img/item100-thumb.png"
                },
                 {
                  "type":"text",
                  "title":"Buy"
                 }
               ]
            },
            {
              "title": "Grey T Shirt",
              "subtitle": "Soft cotton t-shirt \nXs, S, M, L \n$12",
              "imgurl": "http://petersapparel.parseapp.com/img/item101-thumb.png",
              "options":[
                {
                  "type":"url",
                  "title":"View Details",
                  "url":"http://petersapparel.parseapp.com/img/item101-thumb.png"
                },
                 {
                  "type":"text",
                  "title":"Buy"
                 }
                ]
              }
            ]
         };
    context.sendResponse(JSON.stringify(catalogue));
    return;
       }
    if(event.message=='Buy 1' && event.messageobj.refmsgid=='cat_212'){
      context.sendResponse("Your white t-shirt will be shipped within 1 working day.");
     return;
    }
  if(event.message=='Buy 2' && event.messageobj.refmsgid=='cat_212'){
      context.sendResponse("Your Grey t-shirt will be shipped within 1 working day.");
     return;
    }