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.

Twilio Flex Hubspot Click-to-Call & Outbound SMS & WhatsApp Plugin

A Twilio Flex Plugin to leverage your customer data from Hubspot and initiate an outbound call or an outbound SMS / WhatsApp on Flex. This plugin uses the Hubspot APIs to retrieve your customer data from Hubspot. Twilio Serverless is used for the the backend.

Prerequisite

• Twilio Flex instance with Flex UI 2.0
• Twilio Phone Number
• Hubspot API Key is required to authenticate your API calls. How to get your key?
• Twilio CLI tool with Flex Plugin and Serverless Plugin Extensions

Install the Twilio CLI by running:

brew tap twilio/brew && brew install twilio

Then, install the Flex Plugin extension for the Twilio CLI:

twilio plugins:install @twilio-labs/plugin-flex

Finally, install the Serverless plugin extension for the Twilio CLI:

twilio plugins:install @twilio-labs/plugin-serverless

Installation

Serverless Function

First, you need to deploy the Twilio Serverless functions.

Move to the serverless folder and make a copy of the file .env.sample by running:

cd serverless
cp .env.sample .env

Update the .env file (located in the serverless folder) with your values :

ACCOUNT_SID=<Your Value>
AUTH_TOKEN=<Your Value>
HUBSPOT_API_KEY=<Your Value>
INBOUND_SMS_STUDIO_FLOW=<Your Value>
TASK_ROUTER_WORKSPACE_SID=<Your Value>
TASK_ROUTER_WORKFLOW_SID=<Your Value>
TASK_ROUTER_QUEUE_SID=<Your Value>
TWILIO_PHONE_NUMBER=<Your Value>
TWILIO_WA_PHONE_NUMBER=<Your Value>

Update the file src/assets/templates.private.json with a JSON Array of string containing all your pre-approved WhatsApp Templates :

[
  "My first template with {{customerFirstName}} and {{customerLastName}} and {{agentName}}.",
  "Hello {{customerFirstName}} {{customerLastName}}, it's {{agentName}} from WhatsApp, feel free to reach out to me if you need more help"
]

The available dynamic parameters are :

Parameter	Value
{{customerFirstName}}	Customer Firstname from Hubspot
{{customerLastName}}	Customer Lastname from Hubspot
{{agentName}}	Flex Agent Name

Finally, deploy the serverless function by running:

npm run deploy

After the deployment, copy and keep the domain URL somewhere (example: https://flex-hubspot-click-to-call-serverless-2348-xxx.twil.io)

Twilio Flex Plugin

Now you need to deploy the plugin, move to the plugin folder, and make a copy of the .env.sample file by running:

cd plugin
cp .env.sample .env

Update the .env with your values :

FLEX_APP_TWILIO_SERVERLESS_DOMAIN=<Your Value>

Next, deploy the flex plugin by running:

twilio flex:plugins:deploy --changelog "ADD A CHANGELOG"

Finally, release the flex plugin by running:

twilio flex:plugins:release --plugin [email protected] --name "NAME OF THE RELEASE" --description "DESCRIPTION OF THE RELEASE"

Development

First Move to the serverless folder and make a copy of the file .env.sample by running:

cd serverless
cp .env.sample .env

Update the .env (located in the serverless folder) with your values :

ACCOUNT_SID=<Your Value>
AUTH_TOKEN=<Your Value>
HUBSPOT_API_KEY=<Your Value>
INBOUND_SMS_STUDIO_FLOW=<Your Value>
TASK_ROUTER_WORKSPACE_SID=<Your Value>
TASK_ROUTER_WORKFLOW_SID=<Your Value>
TASK_ROUTER_QUEUE_SID=<Your Value>
TWILIO_PHONE_NUMBER=<Your Value>
TWILIO_WA_PHONE_NUMBER=<Your Value>

Next, start the twilio serverless on your local machine by running:

npm start

Now you need to start the Flex plugin, move to the plugin folder, and make a copy of the .env.sample file by running:

cd plugin
cp .env.sample .env

Next update the .env (located in the root folder) file with your local serverless instance hostname:

FLEX_APP_TWILIO_SERVERLESS_DOMAIN=<Your Value>

Finally start the local flex plugin instance from the root folder by running:

twilio flex:plugins:start