# Flex WebChat 2.0 Components

> \[!WARNING]
>
> Webchat 2.0 is no longer supported. It uses Flex UI 1.x.x's [legacy messaging](/docs/flex/developer/messaging), which has reached end-of-life.
>
> If you are using Webchat 2.0, [migrate to Webchat 3.x.x](/docs/flex/developer/conversations/webchat/migrate).
>
> If you are starting out with Webchat, build with [Webchat 3.x.x](/docs/flex/developer/conversations/webchat) instead.

Flex WebChat 2.0 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

![Blue button labeled 'Chat with us' with a speech bubble icon.](https://docs-resources.prod.twilio.com/981a5dc6be2233e257e5c89d7cb057bc72e0fe7eb54cd3227efe3787f8a33739.png)

*Direction: Horizontal*

### MainContainer

![MainContainer.](https://docs-resources.prod.twilio.com/0f248ef9bbd3ffd3c6200b34e0269ba86776aba3a6c3ea52b875e457dee97265.png)

*Direction: Horizontal*

### MainHeader

![Chat with Us header with close button.](https://docs-resources.prod.twilio.com/1e53997adc4c98a72e86bdd303505f174de68f8499367f1be4707ec80097b305.png)

*Direction: Vertical*

### PreengagementCanvas

![Form asking for name and question with submit button labeled 'OK Let's Go!'.](https://docs-resources.prod.twilio.com/9ec5d75955edcc14ff5703bddc05e758c3b3a1a2a6edf50346bfc94e26c9863b.png)

*Direction: Vertical*

### PendingEngagementCanvas

![Loading spinner with blue progress arc.](https://docs-resources.prod.twilio.com/a1d27f2012672369849984c0912fc57990b78f4b5a97b46a80da42b6fef6ad87.png)

*Direction: Vertical*

### MessagingCanvas

![MessagingCanvas-v2.](https://docs-resources.prod.twilio.com/d9ee85f4206ad6d143bde96da0291d23dddf93a85c16bf045984a2728c023472.png)

*Direction: Vertical*

### MessageList

![Chat messages between Damien Smith and Robert Ryan with timestamps.](https://docs-resources.prod.twilio.com/f29485864f741f501e967404103463dba23ce76278acb17639ecadd65037b0df.png)

*Direction: Horizontal*

### MessageList.WelcomeMessage

![MessageList.WelcomeMessage-v2.](https://docs-resources.prod.twilio.com/995f9c15a8b8ce8b2f5aed17d2a888d2a3cd72c4d4cdf20601bea62650ade501.png)

*Direction: Vertical*

### MessageListItem

![Flex.MessageListItem.](https://docs-resources.prod.twilio.com/cf3cf18f1047a470146ebda0318fe1597d569a01363893102773e59f1eaf5c1e.png)

*Direction: Vertical*

### MessageBubble

![Webchat message input field with send button.](https://docs-resources.prod.twilio.com/6b0bbdd8edad08baeb1d10b933371773e85c96a9098cdc4649aafdaf7d35e544.png)

*Direction: Vertical*

### MessageInput

![Flex.MessageInput.](https://docs-resources.prod.twilio.com/a94df921f12546bd4a2e3577e7f07c13dd024b501f9d75422c2755552a7205ff.png)

*Direction: Vertical*

### MessageCanvasTray

![End of chat message with button to start new chat.](https://docs-resources.prod.twilio.com/7833231b7d076e0467cb251c24fa921685ecceb736536127c3ed21c2854f3def.png)

*Direction: Vertical*