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 catalog 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 catalog 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 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
The carousel comprises four elements,
Image - The supported image formats are JPEG, PNG & GIF and the maximum file size should be 2 MB.
Title and Description - Title for the image and description of that image.
Primary Button - A selection button that lets the customer select their choice.
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 types on your iOS or Android mobile apps.
