Frontline Hubspot Serverless Quickstart

NOTE: Effective February 9, 2023, Twilio Frontline is limited to existing Frontline accounts only. New and existing Twilio customers without previous access to Frontline will not be able to get Frontline through Twilio's Console nor access developer documentation. For more information, please check out the Twilio Frontline Support documentation.

This repository implements a Twilio Frontline integration service using Twilio Serverless with Hubspot as the contact database. It implements a few features:

• 📇 Display a contact list in Frontline from a list of Hubspot Contacts
• 🔀 Route inbound conversations in Frontline based on Hubspot record ownership

Prerequisites

We recommend following the setup outlined Frontline node.js quickstart, which shows you how to do the following:

• A Twilio Account. Don't have one? Sign up for free!
• An SMS enabled phone number.
• A Twilio Frontline instance connected to an Identity Provider for user authentication.
• Twilio Conversations configured to use the Frontline Conversations service as it's default conversation service.
• A Free Hubspot Account

Once you reach the step to "Configure the Frontline Integration Service" you are ready to deploy this app.

Project setup

Follow these steps to clone the repository, install dependencies, and set environment variables:

# Clone the repository:
git clone

# Change to the project directory:
cd frontline-hubspot-serverless-quickstart

# Install dependencies:
npm install

# Copy the sample environment variables file to .env:
cp .env.example .env

Environment Variables Reference

ACCOUNT_SID= # Your twilio account SID, found in the console.
AUTH_TOKEN= # Your auth token, found in the console.

SSO_REALM_SID= # Go to console > Frontline > Manage > SSO/Log in

TWILIO_SMS_NUMBER= # SMS enabled phone number in e164 format (e.g. +14135551234)
TWILIO_WHATSAPP_NUMBER= # A Twilio WhatsApp sender, if you have one.

HUBSPOT_API_KEY= # Your Hubspot API key

Deploy

Deploy this Serverless app with one command:

twilio serverless:deploy --service-name=frontline-hubspot-quickstart

ℹ️ Always deploy to the same Twilio Account as your Frontline Service: This integration service uses Twilio-signed requests to protect the callback URLs. The callback URLs will reject requests from a different Twilio account with a 403 error. You can check which account you're deploying to with twilio profiles:list and add another account with twilio profiles:add.

If your deploy is successful, you should see an output that looks like this:

The app provides generates the following callback URLs:

• /callbacks/crm: called when Frontline loads the contact list or a user detail page.
• /callbacks/outgoing-conversation: called when a user initiates an outbound conversation.
• /callbacks/templates: called when a user opens the templates menu.
• /callbacks/twilio-conversations: called after a conversation is created or a participant is added to the conversation.

Configure Callbacks

Copy and paste the callback URLs (uncluding your unique subdomain) into your Frontline configuration in the console.

Routing configuration

In the Twilio Console, go to Frontline > Manage > Routing and make sure 'Pool routing' is selected.

Frontline callbacks

In the Twilio Console, go to Frontline > Manage > Callbacks and copy / paste the following callback URLs from your Frontline integration service:

• CRM Callback URL: [your_app_url]/callbacks/crm
• Outgoing Conversations Callback URL: [your_app_url]/callbacks/outgoing-conversation
• Templates Callback URL: [your_app_url]/callbacks/templates

Conversations Setup Callbacks

In the Twilio Console, go to Conversations > Services > Defaults

• Find the service entry marked Default Conversation Service and click on the 'View Service' button.
• From the service configuration page, click on the *Webhooks link
• In the Webhook Url section, set BOTH the pre and post webhook URLs to [your_app_url]/callbacks/twilio-conversations
• In the Webhook Filtering section, select the onConversationAdded and onParticipantAdded events.

This callback receives the onConversationAdd and onParticipantAdded events from the Conversations service and sets the name of the conversation as well as the participant and participant avatar that is joining the conversation.