Receive calls in HubSpot when using calling apps (BETA)

Overview

Please note:

With the introduction of inbound calling in the Calling SDK, calling apps that are using HubSpot's SDK or who can move the Calling SDK integration, can now enable the Incoming Calls feature within HubSpot. When you receive and answer inbound calls using your calling app in HubSpot, you can easily access records without the need to go back into your calling app. Inbound calls save to the Call Index Page once the call is answered for easy access to take real-time notes and review the call after it ends.

Install the latest version of Calling SDK

For npm, run:

npm i -s @hubspot/calling-extensions-sdk@latest

For yarn, run:

yarn add @hubspot/calling-extensions-sdk@latest

1. Set user availability

You can set the user's availability using on of the following events:

  • Via the initialized event:
const payload = { // Optional: Whether a user is logged-in isLoggedIn: boolean, // Optional: Whether a user is available for inbound calling isAvailable: boolean, // Optional: The desired widget size sizeInfo: { height: number, width: number } } extensions.initialized(payload);
  • Via the userAvailable event:
extensions.userAvailable();
  • Via the userUnavailable event:
extensions.userUnavailable();

2. Send message to notify HubSpot that an inbound call started

You will be able to send calling lifecycle events, such as callAnswered and callCompleted, in the same way it is done for outgoing calls.
const callInfo = { fromNumber: string, // Required: The caller's number toNumber: string, // Required: The recipient's number createEngagement: boolean, // Whether HubSpot should create an engagement for this call }; extensions.incomingCall(callInfo);
  • If you’ve set createEngagement to true, you can subscribe to onCreateEngagementSucceeded and onCreateEngagementFailed. It is recommend you do this so that you can enable your calling app to support custom objects. This will allow future integration into other areas of HubSpot. 
onCreateEngagementSucceeded(data) { const { /* A HubSpot created engagement id. */ engagementId: number, } = data; ... } onCreateEngagementFailed(data) { const { error: { message: string } } = data; ... }

3. Receive caller ID matches

  • You will be able to subscribe to onCallerIdMatchSucceeded and onCalledIdMatchFailed. This will enable you to receive contact matching data for the incoming call that previously had to be obtained via the Search API, and will solve its rate limitations. 
onCallerIdMatchSucceeded: data => { /* HubSpot has fetched caller id matches for this call. */ const { callerIdMatches: (ContactIdMatch | CompanyIdMatch)[]; } = data; } onCallerIdMatchFailed: data => { /* HubSpot has failed to fetch caller id matches for this call. */ const { error: { message: string } } = data; }
type ObjectCoordinates = { portalId: number; objectTypeId: string; objectId: number; } type ContactIdMatch = { callerIdType: 'CONTACT'; objectCoordinates: ObjectCoordinates; firstName: string; lastName: string; email: string; } type CompanyIdMatch = { callerIdType: 'COMPANY'; objectCoordinates: ObjectCoordinates; name: string; }

4. Navigate to a record page

Once you receive the caller ID matches, you can send HubSpot a message to navigate to a contact or company record page.

const data = { objectCoordinates: ObjectCoordinates // from onCallerIdMatchSucceeded }; extensions.navigateToRecord(data);

Once the call engagement is created, HubSpot will redirect to the contact page specified in the navigateToRecord payload and will sync with the SDK in the onReady event. You'll need to re-initialize the SDK using the engagement ID and show an incoming call within the iframe.

// Receive an engagementId for an existing inbound call type Payload = { engagementId: number | undefined } // Message indicating that HubSpot is ready to receive messages onReady(payload) { // Send initialized message to HubSpot to indicate that the call widget is also ready extensions.initialized(payload); if (payload.engagementId) { // Initialize calling state in the app for existing inbound call ... } ... }

In the following sections, preview how the incoming call feature will work in your calling app.

Ungate your account

To ungate your account for this beta, open your browser developer console from a HubSpot tab, and set the following:

localStorage['LocalSettings:Calling:supportsInboundCalling'] = true;

Set the provider

Before logging in to your calling app, you will need to select the provider from your call settings:

  • In your HubSpot account, click the settings icon in the main navigation bar.
  • In the left sidebar menu, click General. Then, click the Calling tab at the top.
  • Click the Receive calls through dropdown menu, then select your calling app.

choose-calling-appOnce the preferred provider is selected, incoming calls will only be received through the selected provider. HubSpot will not support receiving incoming calls from multiple providers in this version. 

If you wish to change the provider for receiving calls, you will have to go back to your call settings to make the change.

Please note: for outbound calls, you can continue to switch providersfrom the contact record.

select-calling-app

Receive incoming calls

If you've not already set up an integration with any of the calling apps, click here to learn more.

  • Log in to your calling app through the call widget in HubSpot. The call widget can be accessed on the main navigation bar.

open-calling-widget

  • Set availability to enable HubSpot to start receiving calls.

set-availability

  • Answer inbound calls from the call remote.
Please note: the behavior may vary slightly based on each calling apps' implementation.

answer-call-bananaphone

Once the call is completed, the inbound call gets logged in the Call Index page. Missed calls will also get logged here.

Please note: if the call widget is minimized but you're set to Available, you will still receive calls. If the call tab is closed during an ongoing call, the call will get disconnected.
Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.