Welcome to an Azure Communication Services Calling Widget Sample

This project is aimed to teach developers on how to create a Calling Widget using the Azure Communication UI Library.

Depending on your needs, you might need to create an experience for your customers to be able to get a hold of you with minimal setup on their part. Calling Widget is a tool that is meant for allowing instant interaction, whether that is reaching out to customer support, having a quick call with your financial advisor, or other customer facing teams. The goal of this sample is to help make you one click away from your customers.

❤️ Feedback

We appreciate your feedback and energy helping us improve our services. If you've tried the service, please give us feedback through this survey.

Try It Out

Pre-requisites

These steps need to be completed before you can complete the whole experience. Reach out to your Teams administrator if you have questions about setting up the Teams Voice Applications.

• Visual Studio Code on one of the supported platforms.
• Node.js, Active LTS and Maintenance LTS versions Node 18 LTS is recommended. Use the node --version command to check your version.
• An Azure Communication Services resource. Create a Communications Resource
• Complete the Teams tenant setup in Teams Call Queues
• Working with Teams Call Queues and Azure Communication Services.
• Working with Teams Auto Attendants and Azure Communication Services.

To just run the completed code, In the project directory, run:

npm run setup

Swap placeholders for identifiers

Go to the server folder and find the appsettings.json file. replace all values here for you Azure communication Services resource and Teams voice apps.

    "ResourceConnectionString": "ENTER_CONNECTION_STRING_HERE",
    "EndpointUrl":"ENTER_ENDPOINTURL_HERE",
    "CallQueueId": "REPLACE_WITH_CALL_QUEUE_ID",
    "AutoAttendantId": "REPLACE_WITH_AUTO_ATTENDANT_ID"

You can get these values from Microsoft Graph and your Azure Communication Services resource

Run the application

In the project directory, run:

npm run start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

Your applications server will be running on http://localhost:8080

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

Deploying your Application

This repo supports our one click deployment tools. Interact with the button above to deploy our latest bundled release.

Actions after deployment

Since this application is meant to interact with Teams Calling Applications we will need to do a few things following the completion of the deployment regarding your Azure Communication Services resource the app will use.

You have two different actions you can take when it comes to your ResourceConnectionString:

• Federate the new Azure communication services resource with your teams tenant that is made as part of your deployment. Please see our documentation on how to do that. Work with your Teams admin if you have any questions about these docs.
• Replace the ResourceConnectionString value for the application in your Azure Portal with the connection string that is already federated with your desired Teams tenant. Next, you will need to replace in the Application settings the two Teams Calling Application placeholder values created by the deployment. These values are the Resource account ID's that can be retrieved using Microsoft graph:
• AutoAttendantId
• CallQueueId Once these two values are replaced, your application is ready to use!

Deploying with Azure tools

Pre-requisites

• An Azure Communication Services Resource federated with a Teams tenant
• An Azure Application service

This is a more involved process. First you will want to set up your appsettings.json in the server directory with your Azure Communication Services resource information, and your Teams Calling Application id's. Then you will need to run the following three commands:

• npm run setup
• npm run build
• npm run package

Then you will use the Azure tools extension to deploy the app/dist folder to your existing Application service.

Trademarks This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must follow Microsoft’s Trademark & Brand Guidelines. Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship. Any use of third-party trademarks or logos are subject to those third-party’s policies.