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.
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article