Skip to content

Commit 0c95d96

Browse files
AnnaMHuffAnnaMHuff
authored
Merge pull request #234934 from ddematheu2/patch-7
Update click-to-call-widget.md
2 parents f29f872 + 3d26758 commit 0c95d96

File tree

1 file changed

+112
-111
lines changed

1 file changed

+112
-111
lines changed

‎articles/communication-services/tutorials/widgets/click-to-call-widget.md

Lines changed: 112 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ ms.subservice: calling
1717

1818
Enable your customers to talk with your support agent on Teams through a call interface directly embedded into your web application.
1919

20-
## Architecture overview
20+
[!INCLUDE [Private Preview Disclaimer](../../includes/private-preview-include-section.md)]
2121

2222
## Prerequisites
2323
- An Azure account with an active subscription. For details, see [Create an account for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F).
@@ -32,92 +32,92 @@ Follow instructions from our [trusted user access service tutorial](../trusted-s
3232

3333
1. Create an HTML file named `index.html` and add the following code to it:
3434

35-
``` html
36-
37-
<!DOCTYPE html>
38-
<html>
39-
<head>
40-
<meta charset="utf-8">
41-
<title>Call Widget App - Vanilla</title>
42-
<link rel="stylesheet" href="style.css">
43-
</head>
44-
<body>
45-
<div id="call-widget">
46-
<div id="call-widget-header">
47-
<div id="call-widget-header-title">Call Widget App</div>
48-
<button class='widget'> ? </button >
49-
<div class='callWidget'></div>
35+
``` html
36+
37+
<!DOCTYPE html>
38+
<html>
39+
<head>
40+
<meta charset="utf-8">
41+
<title>Call Widget App - Vanilla</title>
42+
<link rel="stylesheet" href="style.css">
43+
</head>
44+
<body>
45+
<div id="call-widget">
46+
<div id="call-widget-header">
47+
<div id="call-widget-header-title">Call Widget App</div>
48+
<button class='widget'> ? </button >
49+
<div class='callWidget'></div>
50+
</div>
5051
</div>
51-
</div>
52-
</body>
53-
</html>
52+
</body>
53+
</html>
5454

55-
```
55+
```
5656

5757
2. Create a CSS file named `style.css` and add the following code to it:
5858

59-
``` css
60-
61-
.widget {
62-
height: 75px;
63-
width: 75px;
64-
position: absolute;
65-
right: 0;
66-
bottom: 0;
67-
background-color: blue;
68-
margin-bottom: 35px;
69-
margin-right: 35px;
70-
border-radius: 50%;
71-
text-align: center;
72-
vertical-align: middle;
73-
line-height: 75px;
74-
color: white;
75-
font-size: 30px;
76-
}
77-
78-
.callWidget {
79-
height: 400px;
80-
width: 600px;
81-
background-color: blue;
82-
position: absolute;
83-
right: 35px;
84-
bottom: 120px;
85-
z-index: 10;
86-
display: none;
87-
border-radius: 5px;
88-
border-style: solid;
89-
border-width: 5px;
90-
}
91-
92-
```
93-
94-
1. Configure the call window to be hidden by default. We show it when the user clicks the button.
95-
96-
``` html
59+
``` css
60+
61+
.widget {
62+
height: 75px;
63+
width: 75px;
64+
position: absolute;
65+
right: 0;
66+
bottom: 0;
67+
background-color: blue;
68+
margin-bottom: 35px;
69+
margin-right: 35px;
70+
border-radius: 50%;
71+
text-align: center;
72+
vertical-align: middle;
73+
line-height: 75px;
74+
color: white;
75+
font-size: 30px;
76+
}
77+
78+
.callWidget {
79+
height: 400px;
80+
width: 600px;
81+
background-color: blue;
82+
position: absolute;
83+
right: 35px;
84+
bottom: 120px;
85+
z-index: 10;
86+
display: none;
87+
border-radius: 5px;
88+
border-style: solid;
89+
border-width: 5px;
90+
}
91+
92+
```
93+
94+
3. Configure the call window to be hidden by default. We show it when the user clicks the button.
95+
96+
``` html
97+
98+
<script>
99+
var open = false;
100+
const button = document.querySelector('.widget');
101+
const content = document.querySelector('.callWidget');
102+
button.addEventListener('click', async function() {
103+
if(!open){
104+
open = !open;
105+
content.style.display = 'block';
106+
button.innerHTML = 'X';
107+
//Add code to initialize call widget here
108+
} else if (open) {
109+
open = !open;
110+
content.style.display = 'none';
111+
button.innerHTML = '?';
112+
}
113+
});
97114
98-
<script>
99-
var open = false;
100-
const button = document.querySelector('.widget');
101-
const content = document.querySelector('.callWidget');
102-
button.addEventListener('click', async function() {
103-
if(!open){
104-
open = !open;
105-
content.style.display = 'block';
106-
button.innerHTML = 'X';
107-
//Add code to initialize call widget here
108-
} else if (open) {
109-
open = !open;
110-
content.style.display = 'none';
111-
button.innerHTML = '?';
115+
async function getAccessToken(){
116+
//Add code to get access token here
112117
}
113-
});
114-
115-
async function getAccessToken(){
116-
//Add code to get access token here
117-
}
118-
</script>
118+
</script>
119119

120-
```
120+
```
121121

122122
At this point, we have set up a static HTML page with a button that opens a call widget when clicked. Next, we add the widget script code. It makes a call to our Azure Function to get the access token and then use it to initialize our call client for Azure Communication Services and start the call to the Teams user we define.
123123

@@ -134,53 +134,54 @@ Add the following code to the `getAccessToken()` function:
134134
}
135135

136136
```
137+
137138
You need to add the URL of your Azure Function. You can find these values in the Azure portal under your Azure Function resource.
138139

139140

140141
## Initialize the call widget
141142

142143
1. Add a script tag to load the call widget script:
143144

144-
``` html
145+
``` html
145146

146-
<script src="https://github.com/ddematheu2/ACS-UI-Library-Widget/releases/download/widget/callComposite.js"></script>
147+
<script src="https://github.com/ddematheu2/ACS-UI-Library-Widget/releases/download/widget/callComposite.js"></script>
147148

148-
```
149+
```
149150

150151
We provide a test script hosted on GitHub for you to use for testing. For production scenarios, we recommend hosting the script on your own CDN. For more information on how to build your own bundle, see [this article](https://azure.github.io/communication-ui-library/?path=/docs/use-composite-in-non-react-environment--page#build-your-own-composite-js-bundle-files).
151152

152-
1. Add the following code under the button event listener:
153+
2. Add the following code under the button event listener:
153154

154-
``` javascript
155+
``` javascript
155156

156-
button.addEventListener('click', async function() {
157-
if(!open){
158-
open = !open;
159-
content.style.display = 'block';
160-
button.innerHTML = 'X';
161-
let response = await getChatContext();
162-
console.log(response);
163-
const callAdapter = await callComposite.loadCallComposite(
164-
{
165-
displayName: "Test User",
166-
locator: { participantIds: ['INSERT USER UNIQUE IDENTIFIER FROM MICROSOFT GRAPH']},
167-
userId: response.user,
168-
token: response.userToken
169-
},
170-
content,
171-
{
172-
formFactor: 'mobile',
173-
key: new Date()
174-
}
175-
);
176-
} else if (open) {
177-
open = !open;
178-
content.style.display = 'none';
179-
button.innerHTML = '?';
180-
}
181-
});
157+
button.addEventListener('click', async function() {
158+
if(!open){
159+
open = !open;
160+
content.style.display = 'block';
161+
button.innerHTML = 'X';
162+
let response = await getChatContext();
163+
console.log(response);
164+
const callAdapter = await callComposite.loadCallComposite(
165+
{
166+
displayName: "Test User",
167+
locator: { participantIds: ['INSERT USER UNIQUE IDENTIFIER FROM MICROSOFT GRAPH']},
168+
userId: response.user,
169+
token: response.userToken
170+
},
171+
content,
172+
{
173+
formFactor: 'mobile',
174+
key: new Date()
175+
}
176+
);
177+
} else if (open) {
178+
open = !open;
179+
content.style.display = 'none';
180+
button.innerHTML = '?';
181+
}
182+
});
182183

183-
```
184+
```
184185

185186
Add a Microsoft Graph [User](https://learn.microsoft.com/graph/api/resources/user?view=graph-rest-1.0) ID to the `participantIds` array. You can find this value through [Microsoft Graph](https://learn.microsoft.com/graph/api/user-get?view=graph-rest-1.0&tabs=http) or through [Microsoft Graph explorer](https://developer.microsoft.com/graph/graph-explorer) for testing purposes. There you can grab the `id` value from the response.
186187

0 commit comments

Comments
 (0)