CRM API | Receive calls in HubSpot when using calling apps

curl --request PATCH \
 --url 'https://api.hubapi.com/crm/v3/extensions/calling/APP_ID/settings?hapikey=DEVELOPER_ACCOUNT_API_KEY' \
 --header 'accept: application/json' \
 --header 'content-type: application/json' \
 --data '{"supportsInboundCalling":true, "usesCallingWindow":true, "usesRemote":true}'

{
  ...otherExtensionSettings,
  "supportsInboundCalling": true,
  "usesCallingWindow": true,
  "usesRemote": true
}

{
  ...otherExtensionSettings,
  "supportsInboundCalling": true,
  "usesCallingWindow": false,
  "usesRemote": true
}

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

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

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);

extensions.userAvailable();

extensions.userUnavailable();

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);

onCreateEngagementSucceeded(data) {
    const {
      /* A HubSpot created engagement id. */
      engagementId: number,
    } = data;
      ...
  }

onCreateEngagementFailed(data) {
    const {
      error: { message: string }
    } = data;
      ...
  }

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;
}

const data = {
  objectCoordinates: ObjectCoordinates, // from onCallerIdMatchSucceeded
};

extensions.navigateToRecord(data);

// 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
      ...
    }
    ...
}

import CallingExtensions from "@hubspot/calling-extensions-sdk";

const options = {
 ...,
 eventHandlers: {
   ...,
   onReady: ({iframeLocation, ...restOfTheProperties}) => {
     /* HubSpot is ready to receive messages. */
     // Store the property to create different logic for different scenarios
     this.iframeLocation = iframeLocation
   },
 }
};

const extensions = new CallingExtensions(options);

private iframeLocation;
private extensions;

this.extensions = new CallingExtensions({
 eventHandlers: {
   ...,
   onReady: (data: {iframeLocation, ...restOfTheProperties}) => {
     this.iframeLocation = iframeLocation
   },
   ...
 },
});

// Create a BroadcastChannel to communicate between your app
this.broadcastChannel = new BroadcastChannel("calling-app-example");

this.broadcastChannel.onmessage = (data) => {
   switch(data.type) {
     case 'OUTGOING_CALL_STARTED': {
       if (this.iframeLocation === 'window') {
	  placeCall()
         this.extensions.outgoingCall({externalCallId: '123'})
       }
       handleUIChangeToDialing()
     }
     ...
   }
}

// When users start an outbound call, this function will be called
 handleOutgoingCall(callDetails: OnOutgoingCall)  {
   this.broadcastChannel.postMessage({
     type: thirdPartyToHostEvents.OUTGOING_CALL_STARTED,
     payload: callDetails,
   });
   if (this.iframeLocation === 'window') {
     placeCall()
     this.extensions.outgoingCall({externalCallId: '123'})
   }
   handleUIChangeToDialingState()
 }