Created April 5, 2020 | Last updated May 3, 2021

So your boss went to Twilio-conf and came back and told you to implement Twilio Flex huh? Now you are in the middle of learning React, while trying to learn how to create Flex plugins, implement Typescript, Scss, etc, all-the-while you have a deadline due at the end of the week. This guide is for you my friend!


My name is Chase Gibbons and I am over a team responsible for building out a fairly complex twilio flex project to ultimately replace our existing contact-center. My employer recently paid upwards…

I’ve been aggregating a bunch of Twilio Flex examples I’ve found under a new github organization shown below. Most every example has one or more serverless function definitions as well as an independent Twilio Flex plugin that interacts with the serverless functions to achieve the desired result.

P.s. As of right now my team just adds any of the example plugins we like in the following org to our own existing flex plugin. (aka we only build/deploy one flex plugin and we only deal with one package.json, one appConfig.js, and one index.ts file) Because otherwise we’d have to maintain, build…

This shows how we can quickly convert a .mov file to .gif format using Automator and Apple’s quick actions

First things first, we are going to create a Mac “Quick Action” automator script which automatically converts .mov to .mp4 for you. Next we will create another Mac “Quick Action” automator script which instead outputs your movie files as .gifs. Let’s get started!


  1. Install ffmpeg — either via a direct download or using brew:

Direct download:


brew install ffmpeg

Automator script

2. On your mac, press cmd + space then type in the word Automator and click on the Automator app.

3. Click on New Document

4. Click on Quick Action, click Choose

V2 — Updated July 4, 2021

To be clear, they have since updated their messaging canvas and you can now ultimately recreate/re-invoke their messaging-canvas a lot easier via their new autoInitChannel={true} feature introduced as follows:

<MessagingCanvas autoInitChannel={true} sid={this.state.channelSid} key='rd-task-lookup-view-messaging-canvas' ref={this.messagingCanvasRef} showWelcomeMessage={false}></MessagingCanvas>

You no longer have to manually join the channel yourself and do all that jazz as stated below, but you still need the elevated supervisor programmable chat role on your user in order for it to be able to to auto-join the channels onInit correctly..

V1 — Updated May 9, 2019 (Original Article)

There are four main parts you need to worry about to successfully accomplish this feature on your own:

  1. Elevating your…

I decided to start writing some documentation of my own on Twilio Flex because I have had troubles finding docs on how to perform certain tasks. In this episode, I’ll cover what it ultimately takes to override the call center agent’s full name to a friendly name across the flex-ui and flex-webchat-ui projects. (Useful for security reasons, so the contact-center agent’s fullname isn’t exposed to the webchat users)

This task initially took me the better part of two days to track down the ultimate non-djanky solution. I eventually discovered the solution by looking into the minified source-code itself.


  1. We need…


Just doing my part in helping contribute to the community

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store