Skip to content

Commit 962275b

Browse files
Stacyrch140Stacyrch140
authored
Merge pull request #230343 from ddematheu2/c2c-tutorial
clicks 2 call tutorial
2 parents 8f2d224 + 73467f8 commit 962275b

File tree

1 file changed

+189
-0
lines changed

1 file changed

+189
-0
lines changed

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

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
---
2+
title: Tutorial - Embed a Teams call widget into your web application
3+
titleSuffix: An Azure Communication Services tutorial
4+
description: Learn how to use Azure Communication Services to embed a calling widget into your web application.
5+
author: ddematheu2
6+
manager: shahen
7+
services: azure-communication-services
8+
9+
ms.author: dademath
10+
ms.date: 04/17/2023
11+
ms.topic: tutorial
12+
ms.service: azure-communication-services
13+
ms.subservice: calling
14+
---
15+
16+
# Embed a Teams call widget into your web application
17+
18+
Enable your customers to talk with your support agent on Teams through a call interface directly embedded into your web application.
19+
20+
## Architecture overview
21+
22+
## Prerequisites
23+
- An Azure account with an active subscription. For details, see [Create an account for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F).
24+
- [Visual Studio Code](https://code.visualstudio.com/) on one of the [supported platforms](https://code.visualstudio.com/docs/supporting/requirements#_platforms).
25+
- An active Communication Services resource and connection string. [Create a Communication Services resource](../../quickstarts/create-communication-resource.md).
26+
27+
## Set up an Azure Function to provide access tokens
28+
29+
Follow instructions from our [trusted user access service tutorial](../trusted-service-tutorial.md) to deploy your Azure Function for access tokens. This service returns an access token that our widget uses to authenticate to Azure Communication Services and start the call to the Teams user we define.
30+
31+
## Set up boilerplate vanilla web application
32+
33+
1. Create an HTML file named `index.html` and add the following code to it:
34+
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>
51+
</div>
52+
</body>
53+
</html>
54+
55+
```
56+
57+
2. Create a CSS file named `style.css` and add the following code to it:
58+
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 = '?';
112+
}
113+
});
114+
115+
async function getAccessToken(){
116+
//Add code to get access token here
117+
}
118+
</script>
119+
120+
```
121+
122+
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.
123+
124+
## Fetch an access token from your Azure Function
125+
126+
Add the following code to the `getAccessToken()` function:
127+
128+
``` javascript
129+
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+
}
135+
136+
```
137+
You need to add the URL of your Azure Function. You can find these values in the Azure portal under your Azure Function resource.
138+
139+
140+
## Initialize the call widget
141+
142+
1. Add a script tag to load the call widget script:
143+
144+
``` html
145+
146+
<script src="https://github.com/ddematheu2/ACS-UI-Library-Widget/releases/download/widget/callComposite.js"></script>
147+
148+
```
149+
150+
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).
151+
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+
});
182+
183+
```
184+
185+
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.
186+
187+
## Run code
188+
189+
Open the `index.html` in a browser. This code initializes the call widget when the button is clicked. 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.

0 commit comments

Comments
 (0)