Customizing Chat Attachment Behavior (Webchat 2.0)

You can adjust the maximum file size that can be uploaded by either the agent or the customer. Enter a value in bytes into the maxFileSize value to set the max file size allowed. If no value is provided the default value of 10,485,760 (10Mb) is used.

1
// Max file size = 10 mb = 10 x 1024 x 1024 = 10,485,760
2

3
interface Config {
4
  fileAttachment?: {
5
    enabled?: boolean;
6
    maxFileSize?: number;
7
  };
8
}

You can also specify a custom set of file extensions that can be uploaded. Enter all the accepted file extensions as an array into the acceptedExtensions value.

All extensions are supported by Programmable Chat, so you should include all the file types you want to use in your custom array. A custom value entered into the acceptedExtensions array will override the default extensions set.

1
// Accepted extensions = .png, .txt, .pdf = ["png", "txt", "pdf"]
2

3
interface Config {
4
  fileAttachment?: {
5
    enabled?: boolean;
6
    acceptedExtensions?: Array<string>;
7
  };
8
}

An example of both of these settings is shown below.

1
fileAttachment: {
2
  enabled: true,
3
  maxFileSize: 26214400,
4
  acceptedExtensions: ["png", "txt", "pdf"]
5
}

There are four actions that can be invoked programmatically. You can use these to assist agents with quick actions or automate parts of a web chat interaction.

Select and send a file as an attachment in a single action.

Actions.invokeAction("SendMediaMessage", { file: file, channelSid: "unique_channel_identifier" });

Add a file as an attachment in the message input field.

⚠️ Note: Attaching a file will replace text that was already entered.

Actions.invokeAction("AttachFile", { file: File, channelSid: "unique_channel_identifier" });

Remove an unsent attached from the message input field.

⚠️ Note: Detaching a file will not restore previous text that was replaced using the attach action.

Actions.invokeAction("DetachFile", { file: File, channelSid: "unique_channel_identifier" });

Download the file attached to a message. This will return a temporary link that can be used by channel members to download the file. This link is only valid for 5 minutes after which a new temporary link will need to be requested.

Actions.invokeAction("DownloadMedia", { message: message, channelSid: "unique_channel_identifier" });

Only one file can be sent at a time. You can repeat the attachment process to send multiples or compress the files you wish to send into a single file. Note that if you do this you must allow the chosen extension to be sent (e.g. Zip) in your configuration file.

Additionally, you must send messages and files separately. If you enter text into the message input element, the Webchat interface will disable the attachment button. If you select a file, you cannot enter any text.

The Attachments feature is built on Programmable Chat media support capabilities. If you have built a custom chat client on Twilio Programmable Chat, you can still use attachment support for agents in Flex UI. All media messages posted in the channel will be rendered in Flex UI for the agent as attachments.

Flex Media Support is GDPR-compliant. This means:

• Metadata logs that contain PII are deleted within 7 days of creation.
• You can use the Programmable Chat API to delete the message content and associated media.

Both the agent (Flex UI) and customer (Flex web chat UI) must enable attachments in order to send and receive files. If only one side is enabled, the other will not be able to view the attachments received.

Finally, Flex does not handle any virus scanning or content filtering. As this feature is built on Programmable Chat media support capabilities, you can use your in-house implementation to do additional validation of the sent media messages using Programmable Chat webhooks.

• Supervisor cannot download attachments when monitoring a live chat.
• Supervisor cannot download attachments from the Insights transcript of a past chat.
• Customers will not see an error if the file they have selected doesn't meet the size or type restrictions.
• It is not possible to copy and paste or drag files into the message input field.
• Studio flow does not recognize media messages, so automated responses or "Send to Flex" widget will not be triggered by them