By
Want to see Twilio Flex in action? Check out our interactive demo.
Ready to start building your contact center? We're offering $5,000 worth of free Flex Hours to help you get started. Sign up and start building with Twilio Flex!
Sharing images and files during a chat interaction can help speed up support requests by providing additional context to agents and richer instructions and information to customers. That’s why we’re excited to announce that we have launched a pilot of chat attachments for Twilio Flex.
You can get started with chat attachments today by following two easy steps:
- Enable the pilot feature for flex-ui: Select 1.20.0 for
flex-uiwithin the version management panel. Then enable “Image and File Sharing for WebChat” within the pre-release features panel. If you aren’t able to select 1.20.0, please make sure that you have unchecked “Update minor versions” within the version management panel. - Enable the pilot feature for flex-webchat-ui: Upgrade your version of
flex-webchat-uito 2.5.0 and add the following snippet to your webchat configuration.
This Twilio Feature is currently available as a pilot release. Some features are not yet implemented and others may be changed before the product is declared as Generally Available. Pilot and beta products are not covered by a Twilio SLA.
Learn more about how Twilio supports products that are not yet GA.
Extending Chat Attachments
Like the rest of Twilio Flex, chat attachments are also programmable. For example, if you wanted to increase the max file size from the default of 10MiB to 50MiB and limit attachments to images only, you could do the following in a Flex plugin:
manager.updateConfig({
fileAttachment: {
// Max filesize in bytes
maxFileSize: 50 * 1024 * 1024,
// Array(string) of file extensions
acceptedExtensions: ['jpeg', 'jpg', 'png', 'gif', 'webp', 'heic', 'avci']
}
});
Chat attachments also expose a set of actions that you can invoke programmatically to automate common tasks and replace to modify existing behaviour. For example, you can use the Actions framework and the clipboard API to allow agents and customers to paste images from their clipboard by doing the following:
class PasteFileComponent extends React.Component {
constructor(props){
super(props);
this.processPaste = this.processPaste.bind(this);
}
processPaste(pasteEvent){
// We want to ignore paste events that do not have a file with them
if(!pasteEvent.clipboardData || !pasteEvent.clipboardData.files[0])
return;
// Pull a raw file from our pasteEvent
const fileBlob = pasteEvent.clipboardData.items[0].getAsFile();
Flex.Actions.invokeAction('AttachFile', {
file: fileBlob,
channelSid: this.props.channelSid
});
}
// Attach our global listener for the paste event when the component mounts
componentDidMount(){
window.addEventListener('paste', this.processPaste);
}
// Clean up our listener when the component unmounts
componentWillUnmount(){
window.removeEventListener('paste', this.processPaste);
}
// This isn't a presentational component!
render(){
return null;
}
}
Flex.MessageInput.Content.add(<PasteFileComponent key="PasteFileComponent" />);
We’re excited to see what you implement with the pilot of file attachments. We can’t wait to see what you build!
Want to see Twilio Flex in action? Check out our interactive demo.
Ready to start building your contact center? We're offering $5,000 worth of free Flex Hours to help you get started. Sign up and start building with Twilio Flex!