We have recently refreshed our branding across our offerings and changed the names of our pricing plans. If you have signed up before Aug 9, 2021, please click Previous plans to view your applicable plans.
We assure you that this change will not impact your product experience, and no action is required on your part.
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 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,
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 let’s 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 type on your iOS or Android mobile apps.
