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 |
---|---|---|
|
Button action when user clicks, which is one of: Default value is |
enum |
|
Position of the inline style button relative to the parent container, which is one of: Default value is Note: This property supports some values not supported for this property in the Button widget. |
enum |
|
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 |
string |
|
JSON 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) |
|
Name of event that fires when a user clicks the button, in the format: |
string (JSON) |
|
Unique identifier of this widget. |
string |
|
Indicates whether the engine sets focus to this widget. Default is If set to |
Boolean |
|
Specifies the size of the button. Supported values are: Default value is |
enum |
|
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 |
---|---|---|
|
Button border color as a hex color code. |
string (hex color code) |
|
Button border radius, in pixels. |
integer |
|
Button border width, in pixels. |
integer |
|
One of: |
string (enum or hex color code) |
|
Text color as a hex color code. |
string (hex color code) |
Widget-specific expression evaluations
Property |
Example |
Data type |
---|---|---|
|
Example: |
integer |
|
Example: |
string |
|
Example: |
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"
}
}
}
}
]
}