Menu

Chat Attachments

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.

This Twilio product is currently available as a Public Beta release. Some features are not yet implemented and others may be changed before the product is declared as Generally Available. Beta products are not covered by a Twilio SLA. Learn more about beta product support.

Once Flex Webchat attachments are enabled, you can start sending files via Flex web chat.

Send and receive files via web chat

Agents and customers will see the messaging canvas with any previous messages sent and received between them. At the bottom of the message canvas is the message input where you type out your replies, which includes the attachment button.

Clicking it will open your Operating System’s file picker which you can use to navigate your file structure and select the file you want to send. The chosen file will appear in a preview of the message with the file name and size shown. Click the send button to send the file or click the remove button to clear the file from the message input.

Agents will see an error notification if the file doesn’t meet the size or type restrictions you’ve configured.

When the attachment has been sent you’ll see the file preview in the chat history. If customers are able to send you files they will also appear in the chat history.

You can click the file preview to open the file. Depending on the file type it may open as a preview in your browser or be downloaded to your device. You may be prompted to select a location on your computer to save the file.

If the attachment fails to send you’ll be notified with a warning. You’ll need to re-select the file and send it again.

You can also drag-n-drop files into the Messaging Canvas to send them. Once you have dragged the file in, it will appear in the Message Input and you can send it right away or add text to the message before sending.

Next Steps

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