Skip to content Skip to navigation Skip to topbar

Twilio Docs

Twilio Flex Developer Documentation Index

Getting Started

Building with Flex checklist Set up your Flex Instance Getting Started with React Plugin Development

Tutorials

Add Components to Flex UI Setting up an IVR with Studio

Flex Insights

Overview TaskRouter Data in Flex Insights Add Additional TaskRouter Data Label Data Enabling Dual-Channel Recordings Custom Media attached to Conversations Secure Playback of Recordings from Custom Storage Embedding Dashboards Dashboards Programmability Run Insights on a Custom Domain Workforce Management Real-Time Adherence HIPAA for Insights Historical Reporting

Insights API

General Usage Export Data Map Global Identifiers to Workspace Identifiers

Messaging

API Overview

Flex Flow Resource Manage Flex Flows Flex Chat Channel Resource

Architectural Overviews

Inbound Messages with Flex WebChat UI Integrate a Custom Chat Client with Flex Receive Inbound Messages from SMS, WhatsApp and Facebook Messenger Send Outbound Messages via SMS, WhatsApp and Other Channels

Messaging Limits FAQ and Troubleshooting

Flex Webchat 2.0

Overview Set up and use Webchat 2.0 Configuration Theming, Styling, and Branding Components Localization and UI templating (Webchat 2.0)Actions Cookies and the Web Storage API (Webchat 2.0)Using Pre-Engagement Form Data and Context (Webchat 2.0)Enable Chat Attachments (Webchat 2.0)Customizing Chat Attachment Behavior (Webchat 2.0)Building with Chat Attachments (Webchat 2.0)

Conversations

Getting Started Developer Overview

API Overview

Interactions API Interactions Resource Channels Subresource Interaction Channel Participants Invites Subresource WebChats Resource

Guides

Receive Inbound Messages with Flex Conversations Channels Send Outbound Messages with Flex Conversations Channels Park an Interaction Integrate a Custom Chat Client with Flex Integrate Webchat React App with Flex

File Attachments and API Limits FAQ and Troubleshooting

Flex Webchat 3.0 (Public Beta)

Webchat 3.0 overview Webchat 3.0 security Set up and use Webchat 3.0 Migrate to Webchat 3.0 Cookies and the Web Storage API Using Pre-Engagement Form Data and Context

Known Issues Best Practices

Voice

Overview Implement Click-to-Dial Administrator Guide: Dialpad Overview

Email

Building with Email in Twilio Flex Customize the Email in Flex UI Manage email conversations Email in Flex limitations

Flex UI and Plugins

Overview UI and Plugins Flex UI 2.0 Enhancements Flex UI Requirements Overview of Flex UI programmability options Override Flex UI 2.x.x themes, branding and styling Flex Plugin Library Use Twilio Paste with a Flex Plugin

Flex UI Components

Overview Work with Components and Props Add Components to Flex UI Create and Style Components Add Context to Components

Use UI Actions Use Redux with Flex Modify Flex UI Keyboard Shortcuts Work with Notifications Task Channel Definitions Create Custom Views and Routes Sounds and Audio Team View Filters Real-Time Queues View Programmability Web Accessibility Developer Guide to Troubleshooting the Flex UI Error Handling and Debugging Downgrade to Flex UI 1.x.x

Flex UI 1.x.x

1.0 Overview Flex Manager Flex UI Configuration Localization and UI Templating Theming, Branding, and Styling Flex UI Icons Flex UI Components Actions Framework Notifications Framework Task Channel Definitions Solutions Library (Flex UI 1.x.x)

Migrate from Flex UI 1.x.x to 2.x.x

Build a Flex Plugin

Make HTTP Requests Debugging a Flex Plugin React versions Environment Variables in Flex Plugins Sample Solutions

Manage Plugins

Custom Plugins Dashboard Keep Plugins Up-To-Date

Plugins CLI

Overview Install Flex Plugins CLI Upgrade Flex Plugins CLI Migrate Legacy Plugins to the CLI Common Use Cases Run Multiple Plugins Locally Validate, Deploy, and Release Archive Plugins and Configurations Plugins CLI Reference Plugins CLI release notes

Plugins API

Overview Releasing Flex plugins with the Plugins API Rolling Back a Release Plugin Resource Plugin Version Resource Plugin Configuration Resource Plugin Release Resource

Configuration

Overview The appConfig.js object Flex Configuration REST API Known issue for self-hosted Flex

Agent Routing with TaskRouter Agent Copilot: Use a webhook to store wrap-up notes (Public Beta)Unified Profiles Container (Public Beta)

Release Notes

How We Release Flex Flex UI Release Notes for 2.x.x Flex UI Release Notes for v1.x.x Flex WebChat UI Release Notes

Administrator Guide End User Guide

Messaging
Voice
Serverless
Flex
Studio
All docs...

SDKs
Help

Log in
Sign up

Rate this page:

12345

On this page

What can you do with dynamic components?
WebChat components

EntryPoint
MainContainer
MainHeader
PreengagementCanvas
PendingEngagementCanvas
MessagingCanvas
MessageList
MessageList.WelcomeMessage
MessageListItem
MessageBubble
MessageInput
MessageCanvasTray

What can you do with dynamic components?

WebChat components

PreengagementCanvas

PendingEngagementCanvas

MessagingCanvas

MessageList.WelcomeMessage

MessageListItem

MessageCanvasTray

Flex WebChat 2.0 Components

(information)

Info

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

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

EntryPoint.

Direction: Horizontal

MainContainer

MainContainer.

Direction: Horizontal

MainHeader

MainHeader.

Direction: Vertical

PreengagementCanvas

PreEngagementCanvas.

Direction: Vertical

PendingEngagementCanvas

PreEngagementCanvas.

Direction: Vertical

MessagingCanvas

MessagingCanvas-v2.

Direction: Vertical

MessageList

Flex.MessageList.

Direction: Horizontal

MessageList.WelcomeMessage

MessageList.WelcomeMessage-v2.

Direction: Vertical

MessageListItem

Flex.MessageListItem.

Direction: Vertical

MessageBubble

Flex.MessageBubble.

Direction: Vertical

MessageInput

Direction: Vertical

MessageCanvasTray

MessageCanvasTray.

Direction: Vertical

Rate this page:

12345

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.

Terms of service

Copyright © 2024 Twilio Inc.