This Twilio Flex Plugin enables your agents to send canned responses when chatting with a customer.

To learn more about developing plugins on your Flex instance, refer to the getting started guide.

There are two main files in this example:

src/AgentAutoResponsePlugin.js
src/components/CannedResponses.js

The main file is the AgentAutoResponsePlugin.js file, and contains many comments describing how the auto-response example is achieved. In addition, it appends the Canned Responses component in CannedResponses.js to Chat/SMS conversations.

While the canned-responses are static in this example, you might build on this example and call-out to your own server to retrieve your curated list of canned responses before rendering them in the Flex UI.

When you run this plugin - you'll see a pre-defined message sent by the answering agent as soon as they accept the task.

Additionally, you'll see new UI added below the Chat Input field which is a Select menu and will let you select from a list of pre-defined canned responses. When selecting any message in the select menu - it will automatically be sent into the chat/sms channel.

Make sure you have Node.js as well as npm installed.

Afterwards install the dependencies by running npm install:

cd plugin-agent-autoresponse

# If you use npm
npm install

In order to develop locally, you can use the Webpack Dev Server by running:

twilio flex:plugins:start

This will automatically start up the Webpack Dev Server and open the browser for you. Your app will run on http://localhost:3000. If you want to change that you can do this by setting the PORT environment variable:

PORT=3001 twilio flex:plugins:start

When you make changes to your code, the browser window will be automatically refreshed.

Type twilio flex:plugins:start --help to get more detailed information about the command.

When you are ready to deploy your plugin, in your terminal run:

twilio flex:plugins:deploy --major --changelog "Adding Auto-Response for Agents" --description "Ability for agents to send canned responses"

This will upload your plugin to Flex. After a deploy, your plugin is not yet enabled for all your users on your Flex application. You need to run the release command after the deploy to enable any changes:

twilio flex:plugins:release --name "Plugin Auto-Response" --description "Enabling plugin auto-response" --plugin plugin-agent-autoresponse@latest

For more details on deploying your plugin, refer to the deploying your plugin guide.

Note: Common packages like React, ReactDOM, Redux and ReactRedux are not bundled with the build because they are treated as external dependencies so the plugin will depend on Flex to provide them globally.

Thanks goes to these wonderful people (emoji key):

Alice Cai 🐛 💻 📖 🎨 💬

Kousha Talebian 🐛 💻 📖 🎨 💬

John Fischelli 💻 📖 🎨

This project follows the all-contributors specification. Contributions of any kind welcome!