You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: articles/communication-services/tutorials/calling-widget/calling-widget-tutorial.md
+11-11Lines changed: 11 additions & 11 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -28,7 +28,7 @@ If you wish to try it out, you can download the code from [GitHub](https://githu
28
28
Following this tutorial will:
29
29
30
30
- Allow you to control your customers audio and video experience depending on your customer scenario
31
-
- Teach you how to build a simple widget for starting calls on your webapp using the UI library.
31
+
- Teach you how to build a widget for starting calls on your webapp using the UI library.
32
32
33
33
## Prerequisites
34
34
@@ -41,10 +41,10 @@ Following this tutorial will:
41
41
42
42
### Set up the project
43
43
44
-
Only use this step if you are creating a new application.
44
+
Only use this step if you're creating a new application.
45
45
46
46
To set up the react App, we use the `create-react-app` command line tool. This tool
47
-
creates an easy to run TypeScript application powered by React. This command creates a simple react application using TypeScript.
47
+
creates an easy to run TypeScript application powered by React. This command creates a react application using TypeScript.
48
48
49
49
```bash
50
50
# Create an Azure Communication Services App powered by React.
@@ -56,7 +56,7 @@ cd ui-library-calling-widget-app
56
56
57
57
### Get your dependencies
58
58
59
-
Then you need to update the dependency array in the `package.json` to include some packages from Azure Communication Services for the widget experience we are going to build to work:
59
+
Then you need to update the dependency array in the `package.json` to include some packages from Azure Communication Services for the widget experience we're going to build to work:
60
60
61
61
```json
62
62
"@azure/communication-calling": "1.22.1",
@@ -201,16 +201,16 @@ export default App;
201
201
202
202
```
203
203
204
-
In this snippet we register two new icons `<Dismiss20Regular/>` and `<CallAdd20Regular>`. These new icons are used inside the widget component that we are creating in the next section.
204
+
In this snippet, we register two new icons `<Dismiss20Regular/>` and `<CallAdd20Regular>`. These new icons are used inside the widget component that we're creating in the next section.
205
205
206
206
### Create the widget
207
207
208
208
Now we need to make a widget that can show in three different modes:
209
209
- Waiting: This widget state is how the component will be in before and after a call is made
210
210
- Setup: This state is when the widget asks for information from the user like their name.
211
-
- In a call: The widget is replaced here with the UI library Call Composite. This is the mode when the user is calling the Voice app or talking with an agent.
211
+
- In a call: The widget is replaced here with the UI library Call Composite. This widget mode is when the user is calling the Voice app or talking with an agent.
212
212
213
-
Lets create a folder called `src/components`. In this folder make a new file called `CallingWidgetComponent.tsx`. This file should look like the following snippet:
213
+
Lets create a folder called `src/components`. In this folder, make a new file called `CallingWidgetComponent.tsx`. This file should look like the following snippet:
We need to write some styles to make sure the widget looks appropriate and can hold our call composite. These styles should already be used in the widget if copying the snippet above.
500
+
We need to write some styles to make sure the widget looks appropriate and can hold our call composite. These styles should already be used in the widget if copying the snippet we added to the file `CallingWidgetComponent.tsx`.
501
501
502
-
lets make a new folder called `src/styles` in this folder create a file called `CallingWidgetComponent.styles.ts`. The file should look like the following snippet:
502
+
Lets make a new folder called `src/styles` in this folder, create a file called `CallingWidgetComponent.styles.ts`. The file should look like the following snippet:
503
503
504
504
```ts
505
505
import {
@@ -642,13 +642,13 @@ Then when you action the widget button, you should see a little menu:
642
642
643
643

644
644
645
-
after you fill out your name click start call and the call should begin. The widget should look like so after starting a call:
645
+
After you fill out your name click start call and the call should begin. The widget should look like so after starting a call:
646
646
647
647

648
648
649
649
## Next steps
650
650
651
-
If you haven't had the chance, check out our documentation on Teams auto attendants and Teams call queues.
651
+
For more information about Teams voice applications, check out our documentation on Teams auto attendants and Teams call queues.
0 commit comments