hubspot/calling-extensions-sdk

A JavaScript SDK for integrating calling apps into HubSpot.

Overview

The Calling Extensions SDK allows apps to provide a custom calling option to HubSpot users directly from a record in the CRM.

A calling extension consists of three main components:

• The Calling Extensions SDK, a JavaScript SDK that enables communication between your app and HubSpot.
• The calling settings endpoints, which are used to set the calling settings for your app. Each HubSpot account that connects to your app will use these settings.
• The calling iframe, which is where your app appears to HubSpot users and is configured using the calling settings endpoints.

Getting Started

1. Create an app from your app developer account, and create a developer test account to test your app.
2. Install the Calling Extensions SDK on your calling app. Alternatively, you can run the demos if you'd like to see the SDK in action first.
3. Understand the typical message flow between the calling app and HubSpot.
4. Learn how to use the Calling Extensions SDK.
5. Test your app.
6. Get your app ready for production.
7. Publish your app to the HubSpot marketplace.
8. Review the FAQs.

calling-extensions-sdk's Issues

Permissions for Notifications are denied after some time

Checklist

• I have read the FAQs.
• I have checked the issue tracker for duplicate issues.

Description

When you try to use CTI inside Hubspot after some time Iframe has declined Notification permission (see screenshot). This happens for our app only inside Hubspot environment and we are not able to reproduce it always. This sometimes happens when you reload iframe.
Maybe question here would be: Is Hubspot somehow disabling permissions for Notifications inside CTI?

Expected behavior

Iframe should have always Notification permission granted.

To Reproduce

1. Go to Hubpost interface
2. Show CTI
3. Try to reload iframe
4. After some time (not always) permissions are denied

Screenshots/source code

Additional context

N/A

Can not overide call provider anymore

When trying to enable it from browser console. After refresh, still locked

localStorage.setItem( "LocalSettings:Sales:CallingExtensions", '{"name": "RingCentral", "url": "https://xxxx.com"}')

Remove default hubspot call provider

How do we remove the default hubspot phone provider when using our own provider. This is too confusing to our users that they need to choose our provider.

Upgrading from 0.0.13 to 0.1.4 breaks vite

Checklist

• I have read the FAQs.
• I have checked the issue tracker for duplicate issues.

Description

When i upgraded from 0.0.13 to 0.1.4 my UI could no longer build and the following error occurs

Failed to resolve entry for package "@hubspot/calling-extensions-sdk". The package may have incorrect main/module/exports specified in its package.json. [plugin vite:dep-scan]

    node_modules/esbuild/lib/main.js:1360:21:
      1360 │         let result = await callback({
           ╵                      ^

imports used:

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

and

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

Hubspot ID

How can our widget obtain the hubspot instance id?

In some situation, would created some ghost call logs

// Sends a message to notify HubSpot that an outgoing call has started.

const callInfo = {
  phoneNumber: string, // optional unless call is initiated by the widget
  createEngagement: true // whether HubSpot should create an engagement for this call
};
extensions.outgoingCall(callInfo);

This engagement do not have a status of "completed", normally when call end, will update this call engagement as "completed", it will appear in timeline.

// Sends a message to notify HubSpot that the call has completed.
// After receiving the call completed event, HubSpot will
//   1) insert the engagement into the timeline
//   2) set the default associations on the engagement
//   3) closes the the widget unless `hideWidget` is set to false.
const data = {
  engagementId: number,
  hideWidget: boolean // (optional) defaults to true
};
extensions.callCompleted(data);

But in some situations, somehow failed to call extensions.callCompleted(data), then this will create a ghost call log in timeline, the behavior would when goto this page, would some call log slot loading, but after page loaded, the call log slots disappear, if check requests from browser developer tool, would see engagements data like this:

Temporality of IFrame across HubSpot

Currently, the IFrame is abruptly killed when navigating to another page.
The ability to retain the IFrame when navigating around HubSpot would ease the amount of work the soft phone needs to do when it is initialized in order to get set up in time for an outbound call to take place.
Resolving this issue would greatly reduce load times and provide greater support for inbound call functionality.

Issue with the floating widget

Can we get a message indicating that the user has clicked the back button in the floating widget?

Specify Node.js version for compatibility

We should specify the minimum required Node.js version, by setting engines in the package.json file to the semantic versioning specification range that is compatible with calling-extensions-sdk without requiring --openssl-legacy-provider support.

Additionally, we should remove and gitignore existing .node-version files from the packages. While it is helpful in a local development setup, .node-version has yet to be adopted by nvm, and can potentially create noise for users who only require a minimum compatible version.

Related to discussion in #98 (comment)

Build fails due to `require` being used

Checklist

• I have read the FAQs.
• I have checked the issue tracker for duplicate issues.

Description

The file specified in module field should be written in ESM, but Constants.js uses require.

Expected behavior

Written as ESM (use import)

To Reproduce

repro: https://github.com/bhbs/calling-extensions-sdk-issues-159

1. npm create vite
2. select vanilla, javascript
3. npm i --save @hubspot/calling-extensions-sdk
4. import something
5. npm run build
6. npm run preview

Screenshots/source code

Iframe position and passing custom properties from hub spot to calling sdk

Hi, Do you any settings to change iframe position, header changes ? Can we pass any custom properties to event like current logged in user etc or any data from hubspot?

Include ownerId in "onReady" event data

Hi, guys

We are building a CTI integration with Hubspot on top of our current integration features, and we're having an issue we'd like to ask your help with, if possible.

Currently, the current agent/user's ID (ownerId) is only sent on the onDialNumber event, and we'd like to ask if you could also send that data on the onReady event, because that's when we're initializing our CTI and prompting the user for login, etc.

Is this possible?
Thanks!

Issue with webpack.config

Hello team,

I am getting issue about babel loader in webpack config file. Please see the error below:

13:27:46	added 1436 packages from 1165 contributors in 25.02s
13:27:47	57 packages are looking for funding
13:27:47	run npm fund for details
13:27:47	Running "npm run build"
13:27:48	> [email protected] build /vercel/workpath0
13:27:48	> webpack -p
13:27:48	clean-webpack-plugin: /vercel/workpath0/build has been removed.
13:27:49	Hash: cfb3474bd3b191dd10cc
13:27:49	Version: webpack 4.46.0
13:27:49	Time: 1250ms
13:27:49	Built at: 02/26/2021 7:57:49 AM
13:27:49	1 asset
13:27:49	Entrypoint main = main.js
13:27:49	[0] ./index.js 354 bytes {0} [built] [failed] [1 error]
13:27:49	ERROR in ./index.js 19:34
13:27:49	Module parse failed: Unexpected token (19:34)
13:27:49	File was processed with these loaders:
13:27:49	* ./node_modules/babel-loader/lib/index.js
13:27:49	You may need an additional loader to handle the result of these loaders.
13:27:49	| import { createRequire } from 'module';
13:27:49	|
13:27:49	> var require = createRequire(import.meta.url);
13:27:49	|
13:27:49	| require('dotenv').config({
13:27:50	npm ERR! code ELIFECYCLE
13:27:50	npm ERR! errno 2
13:27:50	npm ERR! [email protected] build: webpack -p
13:27:50	npm ERR! Exit status 2
13:27:50	npm ERR!
13:27:50	npm ERR! Failed at the [email protected] build script.
13:27:50	npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
13:27:50	npm ERR! A complete log of this run can be found in:
13:27:50	npm ERR! /vercel/.npm/_logs/2021-02-26T07_57_50_035Z-debug.log
13:27:50	Error: Command "npm run build" exited with 2
13:27:54	Done with "package.json"

I have also tried "babel-preset-es2015" but its still not working for me. I am having the same issue on both heroku and versel while deploying. Please suggest me how can i fix this.

problems with the demo

When running npm i it fails because webpack cannot find an entry file it tries to look at default ./src, which isn't there:

user@server /some/path/node_modules/@hubspot/calling-extensions-sdk/demo $ npm i
npm WARN prepublish-on-install As of npm@5, 'prepublish' scripts are deprecated.
npm WARN prepublish-on-install Use 'prepare' for build steps and 'prepublishOnly' for upload-only.
npm WARN prepublish-on-install See the deprecation note in 'npm help scripts' for more information.

> [email protected] prepublish /some/path/node_modules/@hubspot/calling-extensions-sdk/demo
> npm run build

> [email protected] build /some/path/node_modules/@hubspot/calling-extensions-sdk/demo
> webpack

Insufficient number of arguments or no entry found.
Alternatively, run 'webpack(-cli) --help' for usage info.

Hash: a73b6ad3df4d89f78a61
Version: webpack 4.32.1
Time: 28ms
Built at: 05/22/2019 10:29:00 AM

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

ERROR in Entry module not found: Error: Can't resolve './src' in '/some/path/node_modules/@hubspot/calling-extensions-sdk/demo'

If you make a default webpack.config.js file with:

module.exports = {
    entry : "./index.js",
}

It succeeds and you get a dist library with a main.js file.
Next problem then is, when running http-serve and opening the demopage, the html file tries to include a script with this line:
<script src="./build/index_combined.js" async=""></script>

• the build folder and the index_comined.js file doesn't exist.
  Maybe it should be ./dist/main.js instead?

Additional user information

orDinal Number we get information about users, such as phone number, ownerId, etc. Is there a way to get information firstName, lastName, etc.
Maybe there is a way using ownerId or something else?

not working on nodejs v 14

Hi ,

I'm trying to use your project with nodejs 14 but it is not generating nodemodules in proper way and running npm start gives error

npm WARN deprecated [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies. npm WARN deprecated [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2. npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated npm WARN notsup Unsupported engine for [email protected]: wanted: {"node":"<8.10.0"} (current: {"node":"14.5.0","npm":"6.14.5"})

Kindly i need your reply as soon as possible because our development team needs a decision for integration with hub spot

Regards ,
Marwa

iFrame not initialized to send a message

Checklist

• I have read the FAQs.
• I have checked the issue tracker for duplicate issues.

Description
When you try to reload iframe manually inside Hubspot you will get the following warning

iFrame not initialized to send a message {type: 'CALL_ENDED', data: undefined}

Also sometimes the iFrame is not able to request permission for notifications when reloaded

Expected behavior

The iFrame should be somehow able to request resync when reloaded. Is this correct behavior?

To Reproduce

1. Go to https://app.hubspot.com/
2. Click on Reload Frame
3. See iFrame not initialized to send a message...

Additional context
This is also happening when doing window.location.assign inside same Iframe host

Incoming call support

I know you are trying to support incoming call by HubSpot. (not iframe)
https://community.hubspot.com/t5/HubSpot-Ideas/Handle-inbound-incoming-calls-in-HubSpot/idi-p/14232

I want to provide iframe incoming call using calling-extensions-sdk.
But,,, this project looks completely stopped..

Should I give up using HubSpot iframe incoming call?

JavaScript CDN

I need not "import CallingExtensions from @hubspot/calling-extensions-sdk" but JavaScript CDN.
Can you prepare that?

ex)
<script src="https://app.hubspot.com/callling-extensions-sdk_min.js" type="text/javascript"></script>

Problem when run with Express

I need run this sdk with express, but i give this error:

ReferenceError: window is not defined
at Object. (../node_modules/@hubspot/calling-extensions-sdk/dist/main.js:10:4)
at Module._compile (internal/modules/cjs/loader.js:1085:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
at Module.load (internal/modules/cjs/loader.js:950:32)
at Function.Module._load (internal/modules/cjs/loader.js:790:12)
at Module.require (internal/modules/cjs/loader.js:974:19)
at require (internal/modules/cjs/helpers.js:93:18)
at Object. (/home/oniram/workspace/teste/index.js:3:29)
at Module._compile (internal/modules/cjs/loader.js:1085:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)

Is it possible to open the Hubspot's call widget using this calling extension sdk?

Actually, I am trying to implement feature for receiving incoming calls. In my application, incoming calls can only be received if the Hubspot's calling widget is already opened. Is there any way, I can receive the incoming calls even if the calling widget is in closed state? Or may be I can send message to hubspot from this calling extension sdk to open the calling widget.

Unable to run demo

 npm start

> [email protected] start
> node scripts/support_node_17+.js webpack-dev-server --open

Running on Node.js v19.8.1.
Setting --openssl-legacy-provider to support Node.js v17+.
node: --openssl-legacy-provider is not allowed in NODE_OPTIONS

failed to integrate call widget when redirect

we’d like our customer to set their own CTI Url on HubSpot, each url begins with their own subdomain, e.g. x1.XXX.jp, v1.XXX.jp. But seems it is not possible to set different CTI Url for each customer on HubSpot, so we decided to set common url as prodctionWidgetURL, and redirect to CTI Url.

It runs as expected on localhost, but won’t run as expected on our testing environment.

We guess that web browser have not send _Constants.messageType.SYNC , when host of prodctionWidgetURL and displayed url on iframe are different.

IFrameManager.js

key: "onMessage",
    value: function onMessage(event) {
      var data = event.data,
          origin = event.origin;

      if (this.destinationHost !== origin) {
        // Ignore messags from an unkown origin
        return;
      }

Could you fix to integrate call widget when redirect?

V2 of the SDK

Hi @dstgermain,
We well start using the SDK next week, and plan to develop on the integration while using it.
Do you have any timeline for a V2 of the SDK?
Will there be any breaking changes in V2?

...Currently we're working on a larger effort for calling navigation and potentially a V2 of this SDK.

Originally posted by @dstgermain in #33 (comment)

Issue with sending payload to settings API

I'm working on calling extension and I would like to create calling settings via API instead of using local storage.

According to the docs:

curl --request POST \
  --url 'https://api.hubapi.com/crm/v3/extensions/calling/APP_ID/settings?hapikey=HUBSPOT_API_KEY' \
  --header 'accept: application/json' \
  --header 'content-type: application/json' \
  --data '{"name":"demo widget","url":"https://mywidget.com/widget","height":600,"width":400,"isReady":true}'

I should be able to make such a POST request but I'm receiving following error:

{"status":"error","message":"Writes to call settings data only accepted on api.hubspot.com","correlationId":"88caad12-42f1-41d5-a144-b0bb8daaf770"}

Is the documentation out of date or am I missing something in the configuration?

HubSpot Calling Extension SDK is broken in Safari

Checklist

• I have read the FAQs.
• I have checked the issue tracker for duplicate issues.

Description

HubSpot shows the error There was an issue connecting with <<Extension Name Omitted>>. in the calling modal.

Web Developer Console contains error:

Unable to post message to <<iFrame URL Omitted>>. Recipient has origin https://app.hubspot.com.

Expected behavior

The Calling Extension frame becomes visible, and the widget receives messages/events from HubSpot.

To Reproduce

1. Install a Calling SDK Extension Demo per the instructions.
2. Click the Call button on a Contact.
3. Look at the Developer Console.

Screenshots/source code

Device information

Device: MacBook Pro
OS: macOS 13.4
Browser: Safari
Browser Version: 16

Additional context

Chrome does not have this issue.

onVisibilityChanged is not working as expected

Description

1. We receive onVisibilityChanged message with invalid data, for example if the user minimizes the call widget, we receive data: Object { isMinimized: false, isHidden: false }, same issue if you send callCompleted({ hideWidget: true }) .
2. If the user clicks the X button at the top of the call widget, we will not receive onVisibilityChanged.

Expected behavior
onVisibilityChanged should reflect the correct call widget state.

To Reproduce

1. Go to any contact page.
2. Open the call widget.
3. Try to minimize it, you should receive

{
  "type": "VISIBILITY_CHANGED",
  "data": {
    "isMinimized": false,
    "isHidden": false
  },
}

4. Try to click the X button, you will not receive onVisibilityChanged message.

New update issues

since new update to calls feature I am facing few issues:

1. • callCompleted doesn't close the call iframe
2. • Testing your app from a local environment ( setting new local app url from localstorage doesn't work)

Description 1: after call is ended i am calling cti.callCompleted(engagementData) it used to close the call iframe before the update but it doesn't close anymore.

Description 2: i tried (https://github.com/HubSpot/calling-extensions-sdk#testing-your-app-from-a-local-environment) but not able to see the demo app in provider's list.

any help or reply would be appreciated.
thanks

Duplicate FAQ in README.md

Thanks.

<details>
 <summary> How can users install the integration? </summary>
 <p>
    The current SDK does not support inbound calling. We understand this is a big feature request and will have more to share about our plans for inbound calling in the future. </p>
</details>

open/maximize calling iframe

Hi ,

is there a way to control minimize /maximize or open the calling iframe from js?

Regards ,
Marwa