Introducing the new Calling SDK Demo App

Hi, my name is Alonso Cadenas. I'm the technical lead for the Calling extensions team at HubSpot and I'm super excited to share the new Demo app for the Calling Extensions SDK with you. So let's begin by answering what is The Calling Extensions SDK? It is an open source JavaScript software development kit for integrating calling web apps into HubSpot. It allows HubSpot and your app to communicate via events like Dial number and in the case that HubSpot needs to let your calling app know that the user intends to make a call. The SDK can be installed via Node Package Manager and once you do so, it allows your app to be rendered in an iframe that users can access directly from a record in the CRM. So let's talk about the exciting features of the new Demo app. The new Demo app features a real life implementation of the calling extensions SDK using React, TypeScript and Style components. It is intended to make it easy to understand the calling flow. The Demo app is accessible to all. It does not require local installation, meaning that not just developers but decision makers can understand the third party calling experience and you can also use the Demo app as a blueprint for building your calling app with a HubSpot like experience. Lastly, the Demo app makes it easy to test new SDK features as we release them. So let's show you how you can run the Demo Calling app. What we'll do is we will head on over to the developer docs and specifically the Run the Demo Calling App section. So a couple of things to call out here are that you will need a Developer account and you'll also need to create an app from your developer account. Once you do that we can go ahead and head over to the Run the Demo Calling App section where you'll see that now we have two demo apps to offer. The first one is the demo minimal JS which is the minimal implementation of the SDK using JavaScript, HTML and CSS. And the new demo app is called the Demo React TS which is the real life implementation and we can take a quick look at how we are using it in the code. So we'll head on over to the package JSON and then here we can see that we've installed the SDK as a dependency. We're using the latest version here in line 21. We can head back here to Ucti where we are importing this dependency and then we are instantiating a new Calling Extensions class here with specifically the Demo Debug mode set to true and the specific event handlers that you want to use. So we can close this out and head back over to our first step here, which is to install node JS on your environment. So what we can do is we can go to the terminal, make sure that we have it by running Node V. And we do we have the latest LTS version at this time. So we can provide proceed to step two, which is to clone or fork or download the zip of the repo. So what I'll do is I'll head back to demo react TS and clone it. So copy the URL git clone such as SDK and then the next step is to CD into that directory. So we were there now so can close up closes tab. And we see here that we've opened the terminal, navigated to the root directory of the project and then we can run one of the two commands. So this command is for the demo react ts. So we'll run it. So what this command will do is go into the demo react TS directory, install the node dependencies and then start the project. So it started the project, now it's opened a new tab in curl and there it is. So here we have our local server running the demo app and we can go to the console tab of our developers console and we can take a look at how it's trying, how the demo app is trying to send events. So if you click on sign in with sso for example, we see that it's tried to send a logged in event. But we have a warning here that we are not connected to HubSpot. So in order to do that we can go ahead and proceed to the next steps which is to launch the app from HubSpot. So I can close out this window. Our app will continue to run in the background here and we'll proceed to launch the demo calling app from HubSpot. So in order to do that, you have to navigate to your records and choose a contact from there. So I've chosen Ron Swanson here from one of my contacts. And the next step is to, if you've completed the installation steps which we have, copy this local storage setting. So we'll head back over. I will filter by calling extensions as I know that that's how we're logging it and paste the local setting. So now I'll refresh the page and then head over to the call button and switch providers. So I'll head to the demo widget local provider and as soon as I click on I select that provider. I see that the demo app has initialized, it syncs with HubSpot and then it's initialized itself. So we can open the call options here and we can see that there's the same phone number here that we see for our contact is ready and you can make the call as soon as I click the call button. You see that there are two events triggered by the SDK from HubSpot. So we have the visibility changed and the dial number event. So as you can see, each event contains data. So for example, this dial number event contains the phone number that I'm trying to call or the phone number that the user is trying to call. And it's letting the demo app know through the SDK, hey, this is who the user is intending to call. So we can head back to our demo and we can put our username, our password. Remember that this is, you know, this is a demo. So the there is no real backend or authentication layer happening here. So we can put in our values and then proceed to log in. We have the phone number here, we have a dialer, you see that we have the logged in event, so we can go ahead and make that call. And you see that outgoing call started from the demo to HubSpot and then HubSpot responded by saying, hey, I've created this engagement and it'll include the engagement ID as well that you'll be logging all of the call properties with. And then we have the call answer. So eventually the call was answered and we can toggle different features from the demo and end our call. If you like, you can add notes, but as you see here, we have the call ended event and we can save it. We have call completed and then as soon as we close the widget, you'll see that the visibility changed from HubSpot telling the calling app, right? And we see that the call is immediately logged here. So we have it. We can choose the outcome and the direction and then the processing duration will be calculated, you know, later. And so there we go. We have our local demo app running and working in logging calls in HubSpot. So then the next step to do is to proceed to run the demo calling app without any installation. So in order to do that, I'll end the local server so we're no longer running it. I'll come back here and then for the demo react ts, I'll copy the local storage setting and head back to my portal and in this case I will paste the setting and then refresh the page once again. So now I can go back to switching my provider from the call button. And then I see that there's the demo widget react. So I select the demo widget react and as expected, I see that the demo app has synced with HubSpot and initialized so we can open the call options. We again see the same view to make the call, so we'll click on that, we see the visibility change and the dial number events have been triggered. So then I can easily just click on sign in with SSO and we see that the user is logged in, we make the call, we see that the outgoing call started, the engagement was created and the call was answered. So now we can end it. So we see the call ended, we save the call, the call completed, we close it and we see it here. And then again we can choose our outcome and our direction and we are all set. We have ran the demo app without any installation at all. So now you should feel ready to be able to proceed to the next section which is to install the Calling extensions SDK on your calling app. Thank you for your time. Bye bye Bye bye.