Use Chat and Messaging

Flex supports various messaging channels, including SMS, Web Chat and WhatsApp. Using Flex, a contact center agent can handle multiple messaging tasks at one time.

Flex provides mulitple features that help agents handle messaging channels more efficiently, like:

  • Customer presence indicators
  • Typing indicators
  • Markdown support
  • In-app and browser notifications
  • Unread message count badges

Customer presence

Customer presence indicator allows agents to see a Web Chat customer's connection status (online or offline) in real-time.

In order to use the Customer Presence feature, you'll need to enable a Reachability Indicator in your Programmable Chat service instance. So, if Customer Presence is not displaying an online status, make sure that the Reachability Indicator is enabled!

Agent Desktop View

Agent will be displayed an indicator in the Task List and Task Canvas Header. It will show a green icon if the customer is online, and a grey one if offline.

Screenshot 2019-10-07 at 22.43.08.png

Teams View

A Supervisor, when monitoring Web Chat tasks, can see a customer presence indicator in the Task Canvas Header

Screenshot 2019-10-28 at 09.20.15.png

Typing indicator

The agent will see a typing indicator if a participant (customer or another agent) of a Web Chat channel is typing.

The agent can see a typing indicator in the Task List and in the Messaging Canvas

Screenshot 2019-10-07 at 22.49.46.png

Task List

Screenshot 2019-10-07 at 22.50.49.png

Messaging Canvas


Markdown support allows agents to format Web Chat messages. This can improve the readability of longer messages. Using bold text, italics, or bulleted lists can create structure and emphasis in your agents' messages, and ensure that customers read and understand the message correctly.

Starting from @twilio/flex-ui@1.26.0, Markdown is a Generally available feature and can be turned on/off using Flex settings. Go to Flex Settings to enable markdown.

Additionally, the Web Chat user must be using WebChat v2.2 or later to see markdown-formatted messages.

To toggle Markdown on/off in Web Chat, use the following configuration option

    markdownSupport: {
        enabled: true,

Agents can add Markdown to their messages by using Flex standard syntax.

Screenshot 2019-10-07 at 23.24.17.png

Screenshot 2019-10-07 at 23.25.22.png

Example of adding bold text to the messsage

Flex Standard Markdown Syntax









Bullet list

* List

* List

* List

Ordered list

1. List

2. List

3. List



Code block

` code block `

Messages using Flex markdown syntax can also be sent into the Chat Channel with the Programmable Chat REST API. API-generated messages will be displayed for Flex and WebChat users as formatted text.

In-app and browser notifications

In-app and browser notifications help agents respond to tasks that require their attention in a timely manner. Notifications improve response time and help create a smooth customer experience.

Agents will be notified of the following activity regarding messaging tasks:

  • New messaging task created
  • New message in a messaging task posted by another participant

Starting from @twilio/flex-ui@1.26.0, browser notifications is a Generally Available feature and can be turned on/off using Flex settings. Go to Flex Settings to enable browser notifications.

In-app notifications for new tasks

If an agent is offered a new messaging task while they are navigated away from the Agent Desktop View, an in-app notification will be shown in a status bar below the header.

The agent can accept or reject the new task from the notification.

In addition to in-app notifications, a badge will also be shown on the Side Navigation to indicate that new tasks are available.

Screenshot 2019-10-28 at 13.33.10.png

Browser notifications

Agent will receive a browser notification if:

  • A new messaging task comes in while Flex is not in focus, or
  • A new message appears in an active messaging task while Flex is not in focus

Screenshot 2019-10-07 at 22.19.53.png

Receiving browser notification for a new message

Enabling Browser Notifications

Agents will be prompted to enable browser notifications each time they log in or refresh the page. Once they choose to allow or block browser notifications, they will no longer see the prompt.

Screenshot 2019-10-07 at 22.21.32.png

Enabling browser notifications

The Flex UI also provides an interface for developers to customize in-app and browser notifications. Find out more about the Flex Notifications Framework.

Unread messages

Flex will display an unread message count in the Task List to indicate whether the agent has any unread messages in an active messaging task. This allows the agent to see if there has been any activity in the messaging task without clicking on the task itself.

Side Navigation will show a badge without a count if there are new unaccepted tasks or unread messages in any of the active messaging tasks in Agent Desktop View.

Screenshot 2019-10-07 at 22.55.32.png

Unread message count in Task List

Screenshot 2019-10-07 at 22.56.14.png

New task or new message indicator in Side Navigation

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 Community Forums or browsing the Twilio tag on Stack Overflow.

Thank you for your feedback!

We are always striving to improve our documentation quality, and your feedback is valuable to us. How could this documentation serve you better?

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

Thanks for your feedback!

Refer us and get $10 in 3 simple steps!

Step 1

Get link

Get a free personal referral link here

Step 2

Give $10

Your user signs up and upgrade using link

Step 3

Get $10

1,250 free SMSes
OR 1,000 free voice mins
OR 12,000 chats
OR more