Skip to content

Commit d974604

Browse files
bugfix updates
1 parent 33d583b commit d974604

File tree

4 files changed

+29
-2
lines changed

4 files changed

+29
-2
lines changed

articles/communication-services/tutorials/calling-widget/calling-widget-tutorial.md

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,6 @@ ms.subservice: calling
1515

1616
# Get started with Azure Communication Services UI library calling to Teams Voice Apps
1717

18-
![Home page of Calling Widget sample app](../media/calling-widget/sample-app-splash-widget-open.png=220x)
19-
2018
This project aims to guide developers to initiate a call from the Azure Communication Services Calling Web SDK to Teams Call Queue and Auto Attendant using the Azure Communication UI Library.
2119

2220
As per your requirements, you might need to offer your customers an easy way to reach out to you without any complex setup.
@@ -30,6 +28,8 @@ Following this tutorial will:
3028
- Allow you to control your customers audio and video experience depending on your customer scenario
3129
- Teach you how to build a widget for starting calls on your webapp using the UI library.
3230

31+
![Home page of Calling Widget sample app](../media/calling-widget/sample-app-splash-widget-open.png)
32+
3333
## Prerequisites
3434
These are **needed** in order to follow this tutorial. Please contact your Teams admin for the last two items to make sure you are set up appropriately.
3535

@@ -635,6 +635,33 @@ export const callingWidgetInCallContainerStyles = (
635635
};
636636
```
637637

638+
### Swap placeholders for identifiers
639+
640+
Before we run the app go to `App.tsx` and replace the placeholder values there with your Azure Communication Services Identities and the identifier for your Teams Voice application. Here are input values for the `token`, `userId` and `teamsAppIdentifier`.
641+
642+
`./src/App.tsx`
643+
```typescript
644+
/**
645+
* Token for local user.
646+
*/
647+
const token = "<Enter your ACS Token here>";
648+
649+
/**
650+
* User identifier for local user.
651+
*/
652+
const userId: CommunicationIdentifier = {
653+
communicationUserId: "Enter your ACS Id here",
654+
};
655+
656+
/**
657+
* Enter your Teams voice app identifier from the Teams admin center here
658+
*/
659+
const teamsAppIdentifier: MicrosoftTeamsAppIdentifier = {
660+
teamsAppId: "<Enter your Teams Voice app id here>",
661+
cloud: "public",
662+
};
663+
```
664+
638665
### Run the app
639666

640667
Finally we can run the application to make our calls! Run the following commands to install our dependencies and run our app.
11.2 KB
Loading
8.22 KB
Loading
12.5 KB
Loading

0 commit comments

Comments
 (0)