Quick-reply-button widget

The quick-reply-button widget provides text-only user options.

Example

Button properties

This widget inherits all the properties of the Button widget, except context, which has different supported values.

Property

Description

Data type

actionType

Button action when user clicks, which is one of: cancel | reset | submit.

Default value is submit.

enum

align

Position of the inline style button relative to the parent container, which is one of: left | right | center| justifyLeft | justifyRight | justifyCenter.

Default value is center.

Note: This property supports some values not supported for this property in the Button widget.

enum

ariaLabel

ARIA label, which provides additional information about the element's purpose and functionality to assistive technologies, such as screen readers. If this is not provided, assistive technologies use helpText instead.

string

context

JSONClosed containing the properties that define the visual appearance of the item, as described in Context properties.

Note: The supported values for this widget are different from those for the Button widget.

string (JSON)

event

Name of event that fires when a user clicks the button, in the format: "event": { "name": "onlogin" }.

string (JSON)

id

Unique identifier of this widget.

string

setFocus

Indicates whether the engine sets focus to this widget. Default is false.

If set to true, the engine sets focus to the first button when the rich-media widget is presented to the user. This is useful for accessibility and usability, when the user is presented with multiple buttons and must click one.

Boolean

size

Specifies the size of the button. Supported values are: small | large .

Default value is small.

enum

text

Text value displayed on the button.

string

type Rich-media type, which is always QuickReplyButton. string

Context properties

These are the context properties.

Context property

Description

Data type

border

Button border color as a hex color code.

string (hex color code)

borderRadius

Button border radius, in pixels.

integer

borderWidth

Button border width, in pixels.

integer

color

One of: primary | secondary | success | danger | warning | info | light | dark | link | Hex color value (#ff0000).

string (enum or hex color code)

textColor

Text color as a hex color code.

string (hex color code)

Widget-specific expression evaluations

Property

Example

Data type

selectedIndex

Example: #widget1.button5.selectedIndex

integer

selectedText

Example: #widget1.button5.selectedText

string

selectedValue

Example: #widget1.button5.selectedValue

integer

Code sample

var obj = {
    "widgetType": "form",
    "nodes":
    [{
            "id": "widget1",
            "controls": {
                "0": {
                    "type": "QuickReplyButton",
                    "id": "button5",
                    "context": "secondary",
                    "text": ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
                    "event": {
                        "name": "eventquick"
                    }
                },
                "1": {
                    "type": "QuickReplyButton",
                    "id": "button6",
                    "context": "info",
                    "text": ["email", "call", "message", "chat", "none of the above"],
                    "values": ["email####", "call####", "message####", "chat###"],
                    "event": {
                        "name": "eventquick"
                    }
                },
                "2": {
                    "type": "QuickReplyButton",
                    "id": "button6",
                    "context": "primary",
                    "text": ["email", "call", "message", "chat", "none of the above"],
                    "values": ["email####", "call####", "message####", "chat###"],
                    "style": "outline",
                    "event": {
                        "name": "eventquick",
                        "when": "onClick"
                    }
                },
                "3": {
                    "type": "QuickReplyButton",
                    "id": "button6",
                    "context": "primary",
                    "text": ["email", "call", "message", "chat", "none of the above"],
                    "align": "left",
                    "values": ["email####", "call####", "message####", "chat###"],
                    "style": "outline",
                    "event": {
                        "name": "eventquick",
                        "when": "onClick"
                    }
                },
                "4": {
                    "type": "QuickReplyButton",
                    "id": "button6",
                    "text": ["email", "call", "message", "chat", "none of the above"],
                    "context": {
                        "textColor": "#000000",
                        "color": "primary"
                    },
                    "align": "right",
                    "size": "large",
                    "values": ["email####", "call####", "message####", "chat###"],
                    "style": "outline",
                    "event": {
                        "name": "eventquick",
                        "when": "onClick"
                    }
                },
                "5": {
                    "type": "QuickReplyButton",
                    "id": "button6",
                    "text": ["email", "call", "message", "chat"],
                    "context": {
                        "textColor": "#000000",
                        "color": "primary"
                    },
                    "align": "right",
                    "size": "large",
                    "values": ["email####", "call####", "message####"],
                    "style": "outline",
                    "event": {
                        "name": "eventquick",
                        "when": "onClick"
                    }
                },
                "6": {
                    "type": "QuickReplyButton",
                    "id": "button6",
                    "text": ["email", "call", "message", "chat"],
                    "context": {
                        "textColor": "#000000",
                        "color": "primary"
                    },
                    "align": "right",
                    "size": "large",
                    "values": ["email####", "call####", "message####", "chat####"],
                    "icons": [{
                            "name": "icono-commentEmpty"
                        }, {
                            "name": "icono-commentEmpty"
                        }, {
                            "name": "icono-commentEmpty",
                            "position": "right"
                        }, {
                            "name": "icono-commentEmpty",
                            "position": "right"
                        }
                    ],
                    "style": "outline",
                    "event": {
                        "name": "eventquick",
                        "when": "onClick"
                    }
                },
                "7": {
                    "type": "QuickReplyButton",
                    "id": "button7",
                    "text": ["email", "call", "message", "chat"],
                    "context": {
                        "textColor": "#000000",
                        "color": "primary"
                    },
                    "align": "right",
                    "size": "large",
                    "values": ["email####", "call####", "message####", "chat####"],
                    "titles": ["CHAT", "CHAT1", "CHAT2", "CHAT3"],
                    "icons": [{
                            "name": "icono-commentEmpty"
                        }, {
                            "name": "icono-commentEmpty"
                        }, {
                            "name": "icono-commentEmpty",
                            "position": "right"
                        }, {
                            "name": "icono-commentEmpty",
                            "position": "right"
                        }
                    ],
                    "style": "outline",
                    "event": {
                        "name": "eventquick",
                        "when": "onClick"
                    }
                },
                "8": {
                    "type": "QuickReplyButton",
                    "id": "button6",
                    "context": "info",
                    "text": ["email", "call", "message", "chat", "none of the above"],
                    "values": ["email####", "call####", "message####", "chat###"],
                    "align": "justifyLeft",
                    "event": {
                        "name": "eventquick"
                    }
                },
                "9": {
                    "type": "QuickReplyButton",
                    "id": "button6",
                    "context": "info",
                    "text": ["email", "call", "message", "chat", "none of the above"],
                    "values": ["email####", "call####", "message####", "chat###"],
                    "align": "justifyRight",
                    "event": {
                        "name": "eventquick"
                    }
                },
                "10": {
                    "type": "QuickReplyButton",
                    "id": "button6",
                    "context": "info",
                    "text": ["email", "call", "message", "chat", "none of the above"],
                    "values": ["email####", "call####", "message####", "chat###"],
                    "align": "justifyCenter",
                    "event": {
                        "name": "eventquick"
                    }
                }
            }
        }
    ]
}