Drop-down
The drop-down menu is a clear method of showing a list of data, allowing users to pick their choice from the list.
| Attributes | Mandatory | Description | Values |
| type | Yes | The type of input to be displayed to the visitor | drop-down |
| options | Yes | An array of options you would like to display | [ Note: A maximum of 200 options in the array with a character limit of 80 each can be given. |
| placeholder | No | Custom text for option search placeholder | Search for a plan |
| multiple | No | To select multiple values | true |
| select_label | No | Custom text for the dropdown label, for multi-select dropdown | Pick your plan |
| min_selection | No | Minimum selection | 2 |
| max_selection | No | Maximum selection | 4 |
Channel compatibility and limitations
Pro Tip: Facebook Messenger, Instagram, WhatsApp, Telegram, and LINE channels do not support this card. However, you can handle it differently using the channel value in the visitor map. For example, provide an if condition statement (if the visitor's channel is Facebook or Instagram) and provide the drop-down menu options as a single or multi-select option card.
Use Case
Copied{
"type": "drop-down",
"placeholder": "Choose a plan",
"options": [
{
"value": "0",
"label": "Premium"
},
{
"value": "1",
"label": "Basic",
"selected": true
},
{
"value": "2",
"label": "Enterprise"
}
],
"select_label": "Select",
"multiple": true,
"min_selection": 1,
"max_selection": 3
}Copied//Context handler function
result = Map();
response = Map();
response.put("action", "reply");
response.put("replies", ["please select your plan"]);
response.put("input", {
"type": "drop-down",
"placeholder": "Choose the plan",
"options": [
{
"value": "0",
"label": "Premium"
},
{
"value": "1",
"label": "Basic",
"selected": true
},
{
"value": "2",
"label": "Enterprise"
}
],
"select_label": "Select",
"multiple": true,
"min_selection": 1,
"max_selection": 3
});
prompt = Map();
prompt.put("param_name", "reply");
prompt.put("data", response);
result.put("prompt", prompt);
result.put("todo", "prompt");
return result;
//Execution function
result = Map();
response = Map();
response.put("action", "reply");
response.put("replies", ["please select your plan"]);
response.put("input", {
"type": "drop-down",
"placeholder": "Choose the plan",
"options": [
{
"value": "0",
"label": "Premium"
},
{
"value": "1",
"label": "Basic",
"selected": true
},
{
"value": "2",
"label": "Enterprise"
}
],
"select_label": "Select",
"multiple": true,
"min_selection": 1,
"max_selection": 3
});
result.put("data", response);
return result;Copied{
"type": "drop-down",
"placeholder": "Choose a plan",
"options": [
{
"value": "0",
"label": "Premium"
},
{
"value": "1",
"label": "Basic",
"selected": true
},
{
"value": "2",
"label": "Enterprise"
}
],
"select_label": "Select",
"multiple": true,
"min_selection": 1,
"max_selection": 3
}Copied{
"platform": "ZOHOSALESIQ",
"action": "reply",
"replies": [
"please select your plan"
],
"input": {
"type": "drop-down",
"placeholder": "Choose the plan",
"options": [
{
"value": "0",
"label": "Premium"
},
{
"value": "1",
"label": "Basic",
"selected": true
},
{
"value": "2",
"label": "Enterprise"
}
],
"select_label": "Select",
"multiple": true,
"min_selection": 1,
"max_selection": 3
}
}Copied"user_defined": {
"zohosalesiq": {
"action": "reply",
"replies": [
"please select your plan"
],
"input": {
"type": "drop-down",
"placeholder": "Choose the plan",
"options": [
{
"value": "0",
"label": "Premium"
},
{
"value": "1",
"label": "Basic",
"selected": true
},
{
"value": "2",
"label": "Enterprise"
}
],
"select_label": "Select",
"multiple": true,
"min_selection": 1,
"max_selection": 3
}
}
}Copied"channelData": {
"zohosalesiq": {
"action": "reply",
"replies": [
"Please select your plan"
],
"input": {
"type": "drop-down",
"placeholder": "Choose a plan",
"options": [
{
"value": "0",
"label": "Premium"
},
{
"value": "1",
"label": "Basic",
"selected": true
},
{
"value": "2",
"label": "Enterprise"
}
],
"select_label": "Select",
"multiple": true,
"min_selection": 1,
"max_selection": 3
}
}
}