Menu

Flex WebChat Components

This guide is for Flex UI 1.x and channels that use Programmable Chat and Proxy. If you are using Flex UI 2.x or you are starting out, we recommend that you build with Flex Conversations.

Flex WebChat UI is a library of programmable or dynamic components that exposes a content property and allows you to add, replace, and remove any component and its children.

What can you do with dynamic components?

  • Add, replace, remove any component and its children
  • Specify direction on where to add components new components
  • Specify condition on which to add, replace and remove components

Learn more about dynamic components in Flex UI Components

WebChat components

EntryPoint

EntryPoint

Direction: Horizontal

MainContainer

MainContainer

Direction: Horizontal

MainHeader

MainHeader

Direction: Vertical

PreengagementCanvas

PreEngagementCanvas

Direction: Vertical

PendingEngagementCanvas

PreEngagementCanvas

Direction: Vertical

MessagingCanvas

MessagingCanvas-v2.png

Direction: Vertical

MessageList

Flex.MessageList

Direction: Horizontal

MessageList.WelcomeMessage

MessageList.WelcomeMessage-v2.png

Direction: Vertical

MessageListItem

Flex.MessageListItem

Direction: Vertical

MessageBubble

Flex.MessageBubble

Direction: Vertical

MessageInput

Flex.MessageInput

Direction: Vertical

MessageCanvasTray

MessageCanvasTray

Direction: Vertical

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.

Thank you for your feedback!

Please select the reason(s) for your feedback. The additional information you provide helps us improve our documentation:

Sending your feedback...
🎉 Thank you for your feedback!
Something went wrong. Please try again.

Thanks for your feedback!

thanks-feedback-gif