twilio-professional-services / plugin-email

Twilio Flex / SendGrid Email Integration Example

<>

Setting up SendGrid

• You'll need to authenticate your domain
• Then point your MX record to mx.sendgrid.net
• Configure the inbound parse webhook to point at your application. If using ngrok like me, it should look like https://yourtunnel.ngrok.io/inbound.
  • Note: Twilio Functions are currently not compatible with the inbound parse webhook
• Generate a SendGrid API Key here and note it down

Configuring Twilio Flex

• Navigate to your TaskRouter Workspace (it should be named Flex Task Assignment), then to Task Channels and create a new Task Channel named Email.

• Create an email Flex Flow

You'll need your webhook URL handy, in this quickstart I will use ngrok in this example. You'll also need your ChatServiceSid which can be found here.

Run the following curl:

curl -X POST https://flex-api.twilio.com/v1/FlexFlows \
  --data-urlencode 'ChannelType=custom' \
  --data-urlencode 'Enabled=true' \
  --data-urlencode 'ContactIdentity=null' \
  --data-urlencode 'IntegrationType=external' \
  --data-urlencode 'Integration.Url=https://yourtunnel.ngrok.io/flexflow' \
  --data-urlencode 'FriendlyName=Email FlexFlow' \
  --data-urlencode 'ChatServiceSid=ISxxxxxxxxx' \
  --data-urlencode 'LongLived=true' \
  -u ACxxxxxxxx:[AUTH_TOKEN]

This should yield a Flex Flow Sid like FOxxxxxxxxx -- note it down.

Setting up your webhook

Hopefully you've already cloned this repository and ran npm install. Next:

• Navigate to the server folder
• Configure your environment variables cp .env.example .env
  • We noted down the Flex Flow Sid and SendGrid API key already from the steps above
  • Here are links to grab the account sid and auth token, your workspace and workflow sid and flex chat service sid.
• Run the server node index.js
• Start your tunnel ngrok http 8080

If you followed the steps above correctly, sending an e-mail should now yield some logs and a task within Flex.

Of course, Flex doesn't know how to render tasks for our new e-mail channel yet, so we can't see the contents. For that, let's add a plugin!

Building the plugin

In the root of the plugin-email directory execute

• npm install
• npm run build

Then upload the resulting distribution file to Twilio Assets.

It should now look like this:

Changing the URL of your server

If you find yourself wanting to update the URL for your express server, you'll need to update the URL in two places:

• Replace the inbound parse webhook with your new URL
• Update the FlexFlow with your new URL:

curl -X POST https://flex-api.twilio.com/v1/FlexFlows/FOxxx \
  --data-urlencode 'Integration.Url=https://yourtunnel.ngrok.io/flexflow' \
  -u ACxxxxxxxx:[AUTH_TOKEN]

Authors

• Martin Amps
• Trenton McManus

Disclaimer

This software is to be considered "sample code", a Type B Deliverable, and is delivered "as-is" to the user. Twilio bears no responsibility to support the use or implementation of this software.

plugin-email's Issues

Update for Flex UI 2.0

Thanks for this great example - any chance we can get an updated version of this for Flex UI 2.0? I'm trying myself but would be great to have a sample to start with

See Email

Hi ! I trying view the email in Twilio Flex with the plugin.

I can receive the email,

but when wanting to open the mail, it fails

I configurate the .env.example and whit it data create the file .env, and configurate the appConfig.js

how can I view the email ?

question.

Hello I'm trying implement your plugin. I have a couple question about it. What do you mean with "Run the following curl" step two of this tutorial. Thanks for the help

.ENV FILE

Hello , I'va one question about the variarable FLEX_FLOW_SID=????? on the file .env what suppose to be thhe value of this variable?and how can I get it?, thanks for you help.

Reply to newly created task in flex is not working

Hi

I am using this code for my email integration

Able to create a task once email sent, but reply is not working. Please help me