Skip to content

Commit 1454bf4

Browse files
fix nits
1 parent 299acfc commit 1454bf4

File tree

1 file changed

+11
-11
lines changed

1 file changed

+11
-11
lines changed

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

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ If you wish to try it out, you can download the code from [GitHub](https://githu
2828
Following this tutorial will:
2929

3030
- 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.
3232

3333
## Prerequisites
3434

@@ -41,10 +41,10 @@ Following this tutorial will:
4141

4242
### Set up the project
4343

44-
Only use this step if you are creating a new application.
44+
Only use this step if you're creating a new application.
4545

4646
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.
4848

4949
```bash
5050
# Create an Azure Communication Services App powered by React.
@@ -56,7 +56,7 @@ cd ui-library-calling-widget-app
5656

5757
### Get your dependencies
5858

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:
6060

6161
```json
6262
"@azure/communication-calling": "1.22.1",
@@ -201,16 +201,16 @@ export default App;
201201

202202
```
203203

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.
205205

206206
### Create the widget
207207

208208
Now we need to make a widget that can show in three different modes:
209209
- Waiting: This widget state is how the component will be in before and after a call is made
210210
- 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.
212212

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:
214214

215215
`CallingWidgetComponent.tsx`
216216

@@ -497,9 +497,9 @@ export const CallingWidgetComponent = (
497497

498498
#### Style the widget
499499

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 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`.
501501

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:
503503

504504
```ts
505505
import {
@@ -642,13 +642,13 @@ Then when you action the widget button, you should see a little menu:
642642

643643
![Screenshot of calling widget sample app home page widget open.](../media/calling-widget/sample-app-splash-widget-open.png)
644644

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:
646646

647647
![Screenshot of click to call sample app home page with calling experience embedded in widget.](../media/calling-widget/calling-widget-embedded-start.png)
648648

649649
## Next steps
650650

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.
652652

653653
> [!div class="nextstepaction"]
654654

0 commit comments

Comments
 (0)