Hello,
I am developing a custom calling integration.
I do not see the “Calling Extensions” feature in my developer portal under App Features.
Could someone please let me know how that Calling Extension capability be enabled for my developer account so I can create and configure a Calling Extension manifest?
Thank you
Hey, @Dparmar2 
The “Calling Extensions” feature isn’t enabled by a button in your app settings. You activate it by sending your app’s configuration to Calling Settings endpoint.
Here are the simple steps:
- Add Required Scopes: In your app settings, go to the Scopes section and add both contacts and timeline.
- Get Your Credentials: Find your App ID and your Developer Account API Key.
- Send the API Request: Use a tool like cURL or Postman to send a POST request. This tells HubSpot your app is a calling option. Replace the placeholders with your info
The full guide with all the links is here — Calling Extensions SDK
Have fun testing! — Jaycee
Hello @Jaycee_Lewis
I have already used the Calling Settings endpoint to register my extension. Below is the endpoint I used:
# Example payload to add the call widget app settings
curl --request POST \
--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 '{
“name”:“demo widget”,
“url”:“https://mywidget.com/widget”,
“height”:600,
“width”:400,
“isReady”:false
}’
Note: This endpoint also supports PATCH, GET, and DELETE
Now, after doing this, my plugin opens correctly in the HubSpot dialer sidebar. I referred to the link:
But in this documentation, a Node.js SDK is used.
So my questions are:
Is it mandatory to use the Node.js SDK?
Or can we integrate without it?
I have already developed my plugin in vanilla JavaScript, so how can I integrate it with:
Click-to-call
On answer, create ticket
Update notes
Single Sign-On (SSO)
Right now, my plugin opens fine, and I log in manually inside it.
But I do not receive any events from HubSpot to trigger these features.
Thanks.
Hey, @Dparmar2 Thanks for the details. You’re on the right path.
For your vanilla JS app, have you tried adding a script tag to your HTML:
<script src="https://cdn.jsdelivr.net/npm/@hubspot/calling-extensions-sdk/dist/main.js"></script>
I think the reason you aren’t receiving events is that you need to initialize the SDK in your code to start “listening.” I asked Claude for a quick example:
const myCTI = new CallingExtensions({
debugMode: true,
eventHandlers: {
// This event fires first.
onReady: () => {
console.log("HubSpot is ready!");
// You must call this to complete the connection.
myCTI.initialized({ isLoggedIn: true });
},
// This handles click-to-call.
onDialNumber: (data) => {
console.log("Start call to:", data.phoneNumber);
// Your dialing logic here.
}
}
});
This should help with the event listening and click-to-call issues.
For your other questions:
- Update Notes: after the call, use the `callCompleted` event to send notes back to the HubSpot engagement record
- SSO: the `onReady` event provides the `userId`, which you can use to log the user in automatically
Please let us know if that helps, if you already worked it out, or if you are still stuck.
Talk soon! — Jaycee
I have set the code exactly as you provided, but I’m still facing an issue.
The error appears in the console, and the log message “HubSpot is ready!” is not printed.
Console shows:
dialer.html:10 Uncaught ReferenceError: CallingExtensions is not defined
at dialer.html:10:19
Register calling extension code:
<!DOCTYPE html>
<html>
<head><title>Dialer</title></head>
<script src=“https://cdn.jsdelivr.net/npm/@hubspot/calling-extensions-sdk/dist/main.js”></script>
<body>
<h3 id=“status”>Waiting for HubSpot…</h3>
<script>
const myCTI = new CallingExtensions({
debugMode: true,
eventHandlers: {
// This event fires first.
onReady: () => {
console.log(“HubSpot is ready!”);
// You must call this to complete the connection.
myCTI.initialized({ isLoggedIn: true });
},
// This handles click-to-call.
onDialNumber: (data) => {
console.log(“Start call to:”, data.phoneNumber);
// Your dialing logic here.
}
}
});
</script>
</body>
</html>
Hey, @Dparmar2 Have you tried changing the new `CallingExtensions` to `new window.HubSpot.CallingExtensions` ? It’s also a best practice to wait for the DOM to be fully ready before running your code.
Talk soon! — Jaycee
Hello @Jaycee_Lewis, Thank you for your reply.
I’ve implemented the changes you provided, but the issue still persists.
I’m still facing the same error:
Console error:
dialer.html:12 Uncaught TypeError: Cannot read properties of undefined (reading ‘CallingExtensions’) at dialer.html:12:42
The dialer.html code is shown below for reference:
<!DOCTYPE html>
<html>
<head>
<title>Dialer</title>
<script src=“https://cdn.jsdelivr.net/npm/@hubspot/calling-extensions-sdk/dist/main.js”></script>
</head>
<body>
<h3 id=“status”>Waiting for HubSpot…</h3>
<script>
setTimeout(() => {
console.log(‘start’);
const myCTI = new window.HubSpot.CallingExtensions({
debugMode: true,
eventHandlers: {
onReady: () => {
console.log(“HubSpot is ready!”);
myCTI.initialized({ isLoggedIn: true });
},
onDialNumber: (data) => {
console.log(“Start call to:”, data.phoneNumber);
}
}
});
}, 3000);
</script>
</body>
</html>
I’d appreciate your further assistance in resolving this issue.
Hey, @Dparmar2 I hope you made some progress here. One more question:
Could you please check the Network tab in your browser’s developer tools to confirm that the SDK script (.../dist/main.js) is loading with a 200 success status?
Thanks! — Jaycee
I have set the code exactly as you provided, but I’m still facing an issue.
The error appears in the console, and the log message “HubSpot is ready!” is not printed.
Console shows:
dialer.html:10 Uncaught ReferenceError: CallingExtensions is not defined
at dialer.html:10:19
Register calling extension code:
<!DOCTYPE html>
<html>
<head><title>Dialer</title></head>
<script src=“https://cdn.jsdelivr.net/npm/@hubspot/calling-extensions-sdk/dist/main.js”></script>
<body>
<h3 id=“status”>Waiting for HubSpot…</h3>
<script>
const myCTI = new CallingExtensions({
debugMode: true,
eventHandlers: {
// This event fires first.
onReady: () => {
console.log(“HubSpot is ready!”);
// You must call this to complete the connection.
myCTI.initialized({ isLoggedIn: true });
},
// This handles click-to-call.
onDialNumber: (data) => {
console.log(“Start call to:”, data.phoneNumber);
// Your dialing logic here.
}
}
});
</script>
</body>
</html>