Skip to content

Commit 820e6c1

Browse files
ddematheu2ddematheu2
committed
clicks 2 call tutorial
1 parent 8f3bcb0 commit 820e6c1

File tree

1 file changed

+170
-0
lines changed

1 file changed

+170
-0
lines changed

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

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
# Embed a Teams call widget into your web application
2+
3+
Enable your customers to talk with your support agent on Teams through a call interface directly embedded into your web application.
4+
5+
## Architecture overview
6+
7+
## Pre-requisites
8+
- Azure Subscription
9+
- Azure Communication Services resource
10+
11+
## Set up an Azure Function to provide access tokens
12+
13+
Follow instructions from our [trusted user access service tutorial](https://learn.microsoft.com/azure/communication-services/tutorials/trusted-service-tutorial) to deploy your Azure Function for access tokens. This service will return an access token which our widget will use to authenticate to Azure Communication Services and start the call to the Teams user we define.
14+
15+
## Set up boilerplate vanilla web application
16+
17+
1. Create an HTML file named `index.html` and add the following code to it:
18+
19+
``` html
20+
21+
<!DOCTYPE html>
22+
<html>
23+
<head>
24+
<meta charset="utf-8">
25+
<title>Call Widget App - Vanilla</title>
26+
<link rel="stylesheet" href="style.css">
27+
</head>
28+
<body>
29+
<div id="call-widget">
30+
<div id="call-widget-header">
31+
<div id="call-widget-header-title">Call Widget App</div>
32+
<button class='widget'> ? </button >
33+
<div class='callWidget'></div>
34+
</div>
35+
</div>
36+
</body>
37+
</html>
38+
39+
```
40+
41+
2. Create a CSS file named `style.css` and add the following code to it:
42+
43+
``` css
44+
45+
.widget {
46+
height: 75px;
47+
width: 75px;
48+
position: absolute;
49+
right: 0;
50+
bottom: 0;
51+
background-color: blue;
52+
margin-bottom: 35px;
53+
margin-right: 35px;
54+
border-radius: 50%;
55+
text-align: center;
56+
vertical-align: middle;
57+
line-height: 75px;
58+
color: white;
59+
font-size: 30px;
60+
}
61+
62+
.callWidget {
63+
height: 400px;
64+
width: 600px;
65+
background-color: blue;
66+
position: absolute;
67+
right: 35px;
68+
bottom: 120px;
69+
z-index: 10;
70+
display: none;
71+
border-radius: 5px;
72+
border-style: solid;
73+
border-width: 5px;
74+
}
75+
76+
```
77+
78+
3. Configure the call window to be hidden by default. We will show it when the user clicks the button.
79+
80+
``` html
81+
82+
<script src="https://github.com/Azure/communication-ui-library/releases/latest/download/callComposite.js"></script>
83+
<script>
84+
var open = false;
85+
const button = document.querySelector('.widget');
86+
const content = document.querySelector('.callWidget');
87+
button.addEventListener('click', async function() {
88+
if(!open){
89+
open = !open;
90+
content.style.display = 'block';
91+
button.innerHTML = 'X';
92+
//Add code to initialize call widget here
93+
} else if (open) {
94+
open = !open;
95+
content.style.display = 'none';
96+
button.innerHTML = '?';
97+
}
98+
});
99+
100+
async function getAccessToken(){
101+
//Add code to get access token here
102+
}
103+
</script>
104+
105+
```
106+
107+
At this point we have set up a static HTML page with a button that will open a call widget when clicked. We will next add the widget script code. It will make 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.
108+
109+
## Fetch an access token from your Azure Function
110+
111+
Add the following code to the `getAccessToken()` function:
112+
113+
``` javascript
114+
115+
async function getAccessToken(){
116+
const response = await fetch('https://<your-function-name>.azurewebsites.net/api/GetAccessToken?code=<your-function-key>');
117+
const data = await response.json();
118+
return data.token;
119+
}
120+
121+
```
122+
You will need to add the URL of your Azure Function. You can find these values in the Azure portal under your Azure Function resource.
123+
124+
125+
## Initialize the call widget
126+
127+
1. Add a script tag to load the call widget script:
128+
129+
``` html
130+
131+
<script src="https://github.com/Azure/communication-ui-library/releases/latest/download/callComposite.js"></script>
132+
133+
```
134+
135+
We provide a test script hosted on GitHub for you to use for testing. For production scenarios, we recommend to host 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).
136+
137+
2. Add the following code under the button event listener:
138+
139+
``` javascript
140+
141+
button.addEventListener('click', async function() {
142+
if(!open){
143+
open = !open;
144+
content.style.display = 'block';
145+
button.innerHTML = 'X';
146+
let response = await getChatContext();
147+
console.log(response);
148+
const callAdapter = await callComposite.loadCallComposite(
149+
{
150+
displayName: "Test User",
151+
locator: { participantIds: ['INSERT TEAMS USER ID']},
152+
userId: response.user,
153+
token: response.userToken
154+
},
155+
content,
156+
{
157+
formFactor: 'mobile',
158+
key: new Date()
159+
}
160+
);
161+
} else if (open) {
162+
open = !open;
163+
content.style.display = 'none';
164+
button.innerHTML = '?';
165+
}
166+
});
167+
168+
```
169+
170+
This code will initialize the call widget when the button is clicked. It will make 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.

0 commit comments

Comments
 (0)