|
| 1 | +--- |
| 2 | +title: Using ACS UI library JavaScript bundles with Teams Call Queues and Auto Attendants |
| 3 | +titleSuffix: An Azure Communication Services tutorial |
| 4 | +description: Learn how to create a Calling experience with the Azure Communication Services CallComposite JavaScript bundle to facilitate calling a Teams Call Queue or Auto Attendant. |
| 5 | +author: dmceachern |
| 6 | +manager: alkwa |
| 7 | +services: azure-communication-services |
| 8 | + |
| 9 | +ms.author: dmceachern |
| 10 | +ms.date: 05/13/2024 |
| 11 | +ms.topic: tutorial |
| 12 | +ms.service: azure-communication-services |
| 13 | +ms.subservice: calling |
| 14 | +--- |
| 15 | + |
| 16 | +# Get started with Azure Communication Services UI library JavaScript bundles calling to Teams Call Queue and Auto Attendant |
| 17 | + |
| 18 | +[!INCLUDE [Public Preview Notice](../../includes/public-preview-include.md)] |
| 19 | + |
| 20 | +To facilitate better business to customer communications the [Azure Communication Services UI Library](https://azure.github.io/communication-ui-library/?path=/docs/overview--page) provides JavaScript bundles to try out cross-platform solutions for using the UI Library. This tutorial is the fastest way from getting into a call using the UI library and Teams. |
| 21 | + |
| 22 | +Following this tutorial will: |
| 23 | + |
| 24 | +- Allow you to place a calling experience on any webpage connecting your customers to your business |
| 25 | +- Create a calling experience in platforms other than [React](https://react.dev/) |
| 26 | + |
| 27 | +## Prerequisites |
| 28 | + |
| 29 | +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 or Teams tenant federation. |
| 30 | + |
| 31 | +- [Visual Studio Code](https://code.visualstudio.com/) on one of the [supported platforms](https://code.visualstudio.com/docs/supporting/requirements#_platforms). |
| 32 | +- [Node.js](https://nodejs.org/), Active LTS, and Maintenance LTS versions [Node 20 LTS](https://nodejs.org/en) is recommended. Use the `node --version` command to check your version. |
| 33 | +- An Azure Communication Services resource. [Create a Communications Resource](../../quickstarts/create-communication-resource.md). |
| 34 | +- Complete the [Teams tenant setup](../../quickstarts/voice-video-calling/get-started-teams-auto-attendant.md) for interoping with your Azure Communication Services resource |
| 35 | +- Working with [Teams Call Queues](../../quickstarts/voice-video-calling/get-started-teams-call-queue.md) and Azure Communication Services. |
| 36 | +- Working with [Teams Auto Attendants](../../quickstarts/voice-video-calling/get-started-teams-auto-attendant.md) and Azure Communication Services. |
| 37 | + |
| 38 | +#### Checking for Node and VS Code |
| 39 | + |
| 40 | +You can check that [Node](https://nodejs.org/) was installed correctly with this command. |
| 41 | + |
| 42 | +```bash |
| 43 | +node -v |
| 44 | +``` |
| 45 | + |
| 46 | +The output tells you the version you have installed, it fails if Node isn't installed and added to your `PATH`. Just like with Node you can check to see if [Visual Studio Code](https://code.visualstudio.com/) is installed with this command. |
| 47 | + |
| 48 | +```bash |
| 49 | +code --version |
| 50 | +``` |
| 51 | + |
| 52 | +Like with Node this command fails if there's an issue installing VS Code on your machine. |
| 53 | + |
| 54 | +## Getting started |
| 55 | + |
| 56 | +We create this project through **4** easy steps. |
| 57 | +1. [Create the project](#1-creating-the-project) |
| 58 | +2. [Get the code](#2-getting-the-code) |
| 59 | +3. [Set up Azure Communication Services and Teams](#3-setting-up-azure-communication-services-and-your-teams-voice-application) |
| 60 | +4. [Run the Application](#4-running-the-application) |
| 61 | + |
| 62 | +#### 1. Creating the project |
| 63 | + |
| 64 | +To get started, we're going to make a new folder for the project run the following command in terminal or command prompt. |
| 65 | + |
| 66 | +For Windows using the command prompt, use this command: |
| 67 | + |
| 68 | +```bash |
| 69 | +mkdir ui-library-js-test-application; cd ui-library-js-test-application |
| 70 | +``` |
| 71 | + |
| 72 | +For macOS using terminal, use this command: |
| 73 | + |
| 74 | +```bash |
| 75 | +mkdir ui-library-js-test-application && cd ui-library-js-test-application |
| 76 | +``` |
| 77 | + |
| 78 | +These scripts create a new folder and move you into it. |
| 79 | + |
| 80 | +Next we want to make a new file called `index.html`. This is the webpage that we attach the calling experience to. |
| 81 | + |
| 82 | +#### 2. Getting the code |
| 83 | + |
| 84 | +First, download the **JavaScript bundle** from [Outbound Call Composite JavaScript file](https://github.com/Azure/communication-ui-library/releases/download/PublicPreview%2F1.16.0-beta.1/outboundCallComposite.js). Put this bundle in the same directory as your `index.html`. |
| 85 | + |
| 86 | +Next you want to open `index.html` in VS Code and add the following snippet. |
| 87 | + |
| 88 | +```html |
| 89 | +<!DOCTYPE html> |
| 90 | + |
| 91 | +<head> |
| 92 | + <meta charset="utf-8" /> |
| 93 | + <title>Embedded call composite basic example</title> |
| 94 | + <style> |
| 95 | + /* These styles are something we provide for the calling experience, please update for your needs */ |
| 96 | + /* these apply to the calling experience you will need to style your button how your desire */ |
| 97 | + #outbound-call-composite-container-ready { |
| 98 | + height: 22rem; |
| 99 | + width: 32rem; |
| 100 | + position: absolute; |
| 101 | + bottom: 1rem; |
| 102 | + right: 1rem; |
| 103 | + box-shadow: 0 0 0.5rem 0; |
| 104 | + border-radius: 1rem; |
| 105 | + padding: 0.5rem; |
| 106 | + z-index: 5; |
| 107 | + } |
| 108 | + </style> |
| 109 | +</head> |
| 110 | + |
| 111 | +<body> |
| 112 | + <div id="outbound-call-composite-container"></div> |
| 113 | + <button id="start-call-button">Your calling button</button> |
| 114 | + <!-- replace with https://github.com/Azure/communication-ui-library/releases/latest/download/outboundCallComposite.js for development and prototyping --> |
| 115 | + <script src="./outboundCallComposite.js"></script> |
| 116 | + <script type="module"> |
| 117 | + const createCallingExperience = async () => { |
| 118 | + const userId = { communicationUserId: "<Add your ACS ID here>" }; |
| 119 | + const token = "<Enter your ACS token>"; |
| 120 | + const displayName = "Enter the DisplayName for your user"; |
| 121 | +
|
| 122 | + const callAdapter = await outboundCallComposite.loadCallComposite( |
| 123 | + { |
| 124 | + userId: userId, |
| 125 | + token: token, |
| 126 | + displayName: displayName, |
| 127 | + targetCallees: [ |
| 128 | + { teamsAppId: "<Enter your Teams voice application Resource Account ID here>", cloud: "public" }, |
| 129 | + ], // Provide the identifier you want to call, can be flat as a string. |
| 130 | + }, |
| 131 | + document.getElementById("outbound-call-composite-container"), |
| 132 | + { |
| 133 | + options: { |
| 134 | + callControls: { |
| 135 | + cameraButton: true, |
| 136 | + screenShareButton: false, |
| 137 | + moreButton: true, |
| 138 | + peopleButton: false, |
| 139 | + raiseHandButton: false, |
| 140 | + displayType: "compact", |
| 141 | + }, |
| 142 | + localVideoTile: { position: "floating" }, |
| 143 | + }, |
| 144 | + } |
| 145 | + ); |
| 146 | +
|
| 147 | + window.onbeforeunload = () => { |
| 148 | + callAdapter.dispose(); |
| 149 | + }; |
| 150 | + // Update the container id to trigger the styles we set above |
| 151 | + const container = document.getElementById("outbound-call-composite-container"); |
| 152 | + container.setAttribute("id", "outbound-call-composite-container-ready"); |
| 153 | + }; |
| 154 | + const startCallButton = document.getElementById("start-call-button"); |
| 155 | + startCallButton.onclick = createCallingExperience; |
| 156 | + </script> |
| 157 | +</body> |
| 158 | +``` |
| 159 | + |
| 160 | +[!IMPORTANT] |
| 161 | +It's important here to note that this file `index.html` and the JavaScript bundle `outboundCallComposite.js` need to be in the same folder if you wish to not edit any of the importing in this file. |
| 162 | + |
| 163 | +#### 3. Setting up Azure Communication Services and your Teams Voice Application |
| 164 | + |
| 165 | +Next we want to create the local user's [identity](../../quickstarts/identity/access-tokens.md) so that we can use that to authenticate our local user and start the call. Once you have those values for the `id` and `token` for the user, we want to make some edits in the `index.html` file we made earlier. |
| 166 | + |
| 167 | +```JavaScript |
| 168 | +const userId = { communicationUserId: "<Add your ACS ID here>" }; |
| 169 | +const token = "<Enter your ACS token>"; |
| 170 | +const displayName = "Enter the DisplayName for your user"; |
| 171 | +``` |
| 172 | +We want to update this information with the `userId` and `token` you got from Azure portal or the Azure CLI. You should also as well set your `displayName`. |
| 173 | + |
| 174 | +Next we want to make an edit to set the Resource Account ID for your Teams Voice Application fetched earlier when you [federated your Azure Communication services resource](../../quickstarts/voice-video-calling/get-started-teams-call-queue.md#find-object-id-for-call-queue). **Contact your Teams administrator if this hasn't been done.** |
| 175 | + |
| 176 | +```JavaScript |
| 177 | +const callAdapter = await outboundCallComposite.loadCallComposite( |
| 178 | + { |
| 179 | + userId: userId, |
| 180 | + token: token, |
| 181 | + displayName: displayName, |
| 182 | + targetCallees: [ |
| 183 | + { teamsAppId: "<Enter your Teams voice application Resource Account ID here>", cloud: "public" }, // <- update this teamsAppId value. |
| 184 | + ], |
| 185 | + }, |
| 186 | + document.getElementById("outbound-call-composite-container") |
| 187 | +); |
| 188 | +``` |
| 189 | + |
| 190 | +#### 4. Running the application |
| 191 | +Now that we finished all the setup it's time to run the application. |
| 192 | + |
| 193 | +Open a terminal or command prompt window in that directory and run the following command. |
| 194 | +```bash |
| 195 | +npx http-server@latest -p 3000 |
| 196 | +``` |
| 197 | +This script using Node starts an HTTP server and hosts the `index.html` file and JavaScript bundle. In a browser open http://localhost:3000. You should see a white page with a button, and when you click it you should see the following screen. |
| 198 | + |
| 199 | +[!IMPORTANT] |
| 200 | +Note, if you try to go to the page not using local host, your calling experience won't work due to security reasons. |
| 201 | + |
| 202 | +[](../media/calling-widget/js-bundle-splash.png#lightbox) |
| 203 | + |
| 204 | +Click the `start call` button seen in the [UI Library `CallComposite`](https://azure.github.io/communication-ui-library/?path=/docs/composites-call-basicexample--basic-example) to initiate a call to your Teams voice app. |
| 205 | + |
| 206 | +## Taking to Production |
| 207 | +Currently this tutorial and the JS bundles are in public preview. If you are excited about Click to Call and wanting to see how you can use the `CallComposite` to create Click to Call experiences for your product today, we have a discussion post in our [GitHub repo](https://github.com/Azure/communication-ui-library) that will show you how to integrate the UI library on other Node Frameworks. The steps of the tutorial you just did directly translate to what is outlined in this show and tell on [loading the UI library composites in other frameworks than React](https://github.com/Azure/communication-ui-library/discussions/4723). |
| 208 | + |
| 209 | +## Next steps |
| 210 | + |
| 211 | +For more information about Teams voice applications, check out our documentation on Teams auto attendants and Teams call queues. Or also see our tutorial to build a more complete experience using [React](https://react.dev/). |
| 212 | + |
| 213 | +> [!div class="nextstepaction"] |
| 214 | +
|
| 215 | +> [Quickstart: Join your calling app to a Teams call queue](../../quickstarts/voice-video-calling/get-started-teams-call-queue.md) |
| 216 | +
|
| 217 | +> [Quickstart: Join your calling app to a Teams Auto Attendant](../../quickstarts/voice-video-calling/get-started-teams-auto-attendant.md) |
| 218 | +
|
| 219 | +> [Quickstart: Get started with Azure Communication Services UI library calling to Teams Call Queue and Auto Attendant](./calling-widget-tutorial.md) |
0 commit comments