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.

AttributesMandatoryDescriptionValues
typeYesThe type of input to be displayed to the visitordrop-down
optionsYesAn array of options you would like to display

[
  {
    "value": "0",
    "label": "Premium"
  },
  {
    "value": "1",
    "label": "Basic",
    "selected": true
  }
]

Note: A maximum of 200 options in the array with a character limit of 80 each can be given.
Options in the menu can be pre-selected by adding the "selected" key as true.

placeholderNoCustom text for option search placeholderSearch for a plan
multipleNoTo select multiple valuestrue
select_labelNoCustom text for the dropdown label, for multi-select dropdownPick your plan
min_selectionNoMinimum selection2
max_selectionNoMaximum selection4

​​

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
    }
  }
}