Skip to main content

Built-in Actions in React

To add your own actions, follow the customization guide.

Currently, React package of BotUI supports the following actionTypes:

input

Shows an <input> tag with the attributes passed in the data:

botui.action.add({ placeholder: 'enter your name' }, { actionType: 'input' })

The above example will show a text input with the given placeholder.

botui.action.add({ type: 'date' }, { actionType: 'input' })

This example will ask the user to pick a date.

select

Shows a <select> tag with options provided in the data:

bot.action.set(
{
// isMultiSelect: true,
options: [
{ label: 'John', value: 'john' },
{ label: 'Jane', value: 'jane', selected: true },
],
},
{ actionType: 'select' }
)

selectButtons

Shows a custom component with the options shown as buttons:

bot.action.set(
{
options: [
{ label: 'John', value: 'john' },
{ label: 'Jane', value: 'jane' },
],
},
{ actionType: 'selectButtons' }
)

Meta attributes

Each of the above action also supports following properties in the meta:

{
actionType: '...',

cancelable?: boolean, // default 'false'. whether to show a 'cancel' button or not.
cancelButtonText?: string, // 'Cancel'. Text of the cancel button.
cancelMessageText?: string, // 'Cancelled'. Text to show in the message after an action is cancelled.
confirmButtonText?: string, // 'Done'. Confirm button text
}