Skip to content

Commit 85b2e8a

Browse files
ddematheu2ddematheu2
authored
Update click-to-call-widget.md
1 parent b3caafd commit 85b2e8a

File tree

1 file changed

+121
-120
lines changed

1 file changed

+121
-120
lines changed

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

Lines changed: 121 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -32,155 +32,156 @@ 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
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 = '?';
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+
});
114+
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

124124
## Fetch an access token from your Azure Function
125125

126126
Add the following code to the `getAccessToken()` function:
127127

128-
``` javascript
128+
``` javascript
129129

130-
async function getAccessToken(){
131-
const response = await fetch('https://<your-function-name>.azurewebsites.net/api/GetAccessToken?code=<your-function-key>');
132-
const data = await response.json();
133-
return data.token;
134-
}
130+
async function getAccessToken(){
131+
const response = await fetch('https://<your-function-name>.azurewebsites.net/api/GetAccessToken?code=<your-function-key>');
132+
const data = await response.json();
133+
return data.token;
134+
}
135135

136-
```
136+
```
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-
154-
``` javascript
155-
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-
});
153+
2. Add the following code under the button event listener:
154+
155+
``` javascript
156+
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)