Drop-down and Carousel APIs


With Freshchat’s conversation API you can now extend your conversation workflows to use Drop-downs and Carousels in your conversations. You can improve customer experience by adding a drop-down or carousel as a response type instead of the regular reply text box.


What are dropdowns ?


A drop-down is a list of options from which a customer can choose one. 


For example, 


What are Carousels ?


A Carousel is a horizontally sliding catalogue of options a customer can pick from. Each option is displayed as a card with an image, title, description, and two buttons. 


For example, if a customer reaches out for a list of shoes available in size 12, an agent can send a catalogue of options, instead of sharing multiple webpage links, using the Carousel API. From this, the customer can make a selection. This will create a rich experience for the customer and also make it easier for them to pick an item and place an order. 



Once the customer selects an option, the agent can share a payment link or checkout page with the item added.




Elements of Carousel


Carousel comprises of four elements,

  1. Image - The supported image formats are JPEG, PNG & GIF and the  maximum file size should be 2 MB.

  2. Title and Description - Title for the image and description of that image.

  3. Primary Button - A selection button that let’s the customer select their choice.

  4. Secondary Button - It’s an optional button that can be used to hyperlink an URL.


Note Carousels can have a maximum of two buttons.





Dropdown API Payload


curl--location--request POST
  'https://<API_URL_GOES_HERE>/v2/conversations/<CONVERSATION_ALIAS_GO
ES_HERE > /messages' \
  --header 'Authorization: Bearer <AUTH_TOKEN_GOES_HERE>'\
  --header 'Content-Type: application/json'\
  --data - raw '{
"actor_id": < AGENT_ALIAS_GOES_HERE > ,
  "message_type": "normal",
  "actor_type": "agent",
  "message_parts": [
  {
    "text":
    {
      "content": "<b>Dropdown</b><br/> Agent MESSAGE - from postman"
    }
  }],
  "reply_parts": [
  {
    "template_content":
    {
      "type": "quick_reply_dropdown",
      "sections": [
      {
        "name": "options",
        "parts": [
        {
          "quick_reply_button":
          {
            "label": "Google",
            "custom_reply_text": "Google",
            "payload": "123_Google"
          }
        },
        {
          "quick_reply_button":
          {
            "label": "Yahoo",
            "custom_reply_text": "Yahoo",
            "payload": "234_yahoo"
          }
        },
        {
          "quick_reply_button":
          {
            "label": "Reddit",
            "custom_reply_text": "Reddit"
          }
        }]
      }]
    }
  }]
}
'


Carousel API Payload


curl--location--request POST
'https://<API_URL_GOES_HERE>/v2/conversations/<CONVERSATION_ALIAS_GO
ES_HERE > /messages' \
--header 'Authorization: Bearer <AUTH_TOKEN_HERE>
--data - raw '{
"actor_id": < AGENT_ID_GOES_HERE > ,
"message_type": "normal",
"actor_type": "agent",
"message_parts": [
{
"text":
{
"content": "<b>Carousel</b><br/> Agent MESSAGE - from postman"
}
}],
"reply_parts": [
{
"template_content":
{
"type": "carousel",
"sections": [
{
"name": "carousel_title",
"parts": [
{
"text":
{
"content": "Hello choose one of following..."
}
}]
},
{
"name": "cards",
"parts": [
{
"template_content":
{
"type": "carousel_card_default",
"sections": [
{
"name": "hero_image",
"parts": [
{
"image":
{
"url": "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x9
2 dp.png "
}
}]
},
{
"name": "title",
"parts": [
{
"text":
{
"content": "This is title"
}
}]
},
{
"name": "description",
"parts": [
{
"text":
{
"content": "This is description"
}
}]
},
{
"name": "callback",
"parts": [
{
"callback":
{
"payload": "thisispayload",
"label": "callback"
}
}]
},
{
"name": "view",
"parts": [
{
"url_button":
{
"url": "http://google.com",
"label": "google",
"target": "_blank"
}
}]
}]
}
},
{
"template_content":
{
"type": "carousel_card_default",
"sections": [
{
"name": "hero_image",
"parts": [
{
"image":
{
"url": "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x9
2 dp.png "
}
}]
},
{
"name": "title",
"parts": [
{
"text":
{
"content": "This is title"
}
}]
},
{
"name": "description",
"parts": [
{
"text":
{
"content": "This is description"
}
}]
},
{
"name": "callback",
"parts": [
{
"callback":
{
"payload": "thisispayload",
"label": "callback"
}
}]
},
{
"name": "view",
"parts": [
{
"url_button":
{
"url": "http://google.com",
"label": "google",
"target": "_blank"
}
}]
}]
}
}]
}]
}
}]
}
'


Dropdowns and Carousels (Android & iOS SDK)


You can also use dropdowns and carousels as a response type on your iOS or Android mobile apps.