Description of icon
Flex UI
API Reference

MessagingCanvas

A container which holds MessageInput and MessageList. Can be themed with Theme.Chat.MessagingCanvas in Theme.


Component children#

KeyComponentConditionAlignDescription
listMessageList
Message list. Displays the MessageList component
inputMessageInput
Message input. Displays the MessageInput component
trayMessageCanvasTray
Visible only if showTrayOnInactive prop is true and the channel is inactive
Message canvas tray. Displays the MessageCanvasTray component for webchat

Static Properties#

NameTypeDescription
ContentDynamicContentStore<MessagingCanvas.MessagingCanvasChildrenProps, MessagingCanvasChildrenKeys>

Dynamic content store

InputMessageInput

Shortcut for MessageInput component

MessageListMessageList

Shortcut for MessageList component

defaultPropsMessagingCanvas.MessagingCanvasProps

Default properties

Component Properties#

NameTypeDescriptionOptionalDefault
sidstring

The identifier of the Chat channel or Conversation.

No
inputDisabledReasonstring

A reason on why the input element is disabled.

Yes
avatarCallbackMessagingCanvas.AvatarCallback

A handler to request for avatar.

Yes
memberDisplayOptionsMessagingCanvas.MemberDisplayOptions

Chat member display configuration.

Yes
messageStyleMessagingCanvas.MessageStyle

Identifies how the message should be displayed.

Yes
showTypingIndicatorboolean

Should the typing indicator be shown.

Yes
showReadStatusboolean

Should the read status be shown.

Yes
showTrayOnInactiveboolean

Should MessageTray to be shown when conversation is inactive.

Yes
showWelcomeMessageboolean

Should a welcome message to be shown.

Yes
welcomeMessageTextCompiledTemplate

string representing the welcome message.

Yes
charLimitnumber

Identifies character limit for a single message.

Yes
predefinedMessageMessagingCanvas.PredefinedMessage

Defines the predefined, introductory message to be shown to a customer.

Yes
hasMarkdownSupportboolean

If set to true, messages bodies will be parsed as markdown.

Yes

Component Children Properties#

NameTypeDescriptionOptionalDefault
conversationConversationState

state of conversation

Yes
charLimitnumber

character limit

Yes
Rate this page

Need some help?

We all do sometimes; code is hard. Get help now from our support team, or lean on the wisdom of the crowd by visiting Twilio's Stack Overflow Collective or browsing the Twilio tag on Stack Overflow.