Skip to content

Commit 2e32675

Browse files
keerlukeerlu
authored
Merge pull request #414 from aswinrajeevofficial/master
talkjs zoom integration base project
2 parents 57ad9cf + 60463d5 commit 2e32675

File tree

8 files changed

+892
-0
lines changed

8 files changed

+892
-0
lines changed

‎rest-api/talkjs-zoom-integration/README.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
This is an example project for integrating Zoom with TalkJS.
2+
3+
The project uses TalkJS's [custom headers](https://talkjs.com/docs/Features/Customizations/Creating_Custom_Headers/) to add a new header with a button to start Zoom meetings from the chat. The button is hooked to a backend server that calls the Zoom API to create a meeting and also sends a message to the chat with the details of the meeting.
4+
5+
## Prerequisites
6+
7+
To run this tutorial, you will need:
8+
9+
- A [TalkJS account](https://talkjs.com/dashboard/login)
10+
- A [Zoom account](https://zoom.us/signup)
11+
- [Node.js](https://nodejs.org/en)
12+
13+
## How to run the tutorial
14+
15+
1. Clone or download this project.
16+
2. Go to the `server` folder and run `npm start`. This starts the NodeJS server.
17+
3. Open `index.html` from a browser, or through an extension like Live Server from your favorite IDE or text editor.

‎rest-api/talkjs-zoom-integration/index.html

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>TalkJS Zoom Integration</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
10+
<body>
11+
<script>
12+
(function (t, a, l, k, j, s) {
13+
s = a.createElement('script');
14+
s.async = 1;
15+
s.src = "https://cdn.talkjs.com/talk.js";
16+
a.head.appendChild(s);
17+
k = t.Promise;
18+
t.Talk = {
19+
v: 3,
20+
ready: {
21+
then: function (f) {
22+
if (k) return new k(function (r, e) {
23+
l.push([f, r, e])
24+
});
25+
l
26+
.push([f])
27+
},
28+
catch: function () {
29+
return k && new k()
30+
},
31+
c: l
32+
}
33+
};
34+
})(window, document, []);
35+
</script>
36+
<script src="script.js"></script>
37+
<div class="chatbox-container">
38+
<div class="chatbox-header">
39+
<div id="avatar"></div>
40+
<p id="header-alt"><span id="header-username">Username</span></p>
41+
<a class="chatbox-header-button" onclick="createZoomMeeting()">
42+
<svg class="chatbox-header-button-icon" xmlns="http://www.w3.org/2000/svg" width="36" height="36"
43+
viewBox="0 0 24 24" fill="currentColor" stroke-width="2" class="ai ai-ZoomFill">
44+
<g clip-path="url(#clip0_822_311)">
45+
<path fill-rule="evenodd" clip-rule="evenodd"
46+
d="M24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0s12 5.373 12 12zM6 16.2h9V9.6a1.8 1.8 0 0 0-1.8-1.8h-9v6.6A1.8 1.8 0 0 0 6 16.2zm10.2-2.4l3.6 2.4V7.8l-3.6 2.4v3.6z" />
47+
</g>
48+
<defs>
49+
<clipPath id="clip0_822_311">
50+
<rect width="24" height="24" />
51+
</clipPath>
52+
</defs>
53+
</svg>
54+
</a>
55+
</div>
56+
<div id="talkjs-container" style="height: 400px"><i>Loading chat...</i></div>
57+
</div>
58+
</body>
59+
60+
</html>

‎rest-api/talkjs-zoom-integration/package.json

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"name": "talkjs-zoom-integration",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "script.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1"
8+
},
9+
"keywords": [],
10+
"author": "",
11+
"license": "ISC"
12+
}

‎rest-api/talkjs-zoom-integration/script.js

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
const APP_ID = "YOUR_APP_ID";
2+
const conversationObject = createTalkJSConversation();
3+
4+
async function createTalkJSConversation() {
5+
await Talk.ready;
6+
const me = new Talk.User({
7+
id: "00002",
8+
name: "Kirsten Doe",
9+
email: "[email protected]",
10+
photoUrl: "https://talkjs.com/images/avatar-1.jpg",
11+
role: "user",
12+
});
13+
14+
window.talkSession = new Talk.Session({
15+
appId: APP_ID,
16+
me: me,
17+
});
18+
const other = new Talk.User({
19+
id: "00001",
20+
name: "Mikaela Ross",
21+
email: "[email protected]",
22+
photoUrl: "https://talkjs.com/images/avatar-7.jpg",
23+
});
24+
25+
const conversation = talkSession.getOrCreateConversation(
26+
Talk.oneOnOneId(me, other)
27+
);
28+
29+
conversation.setParticipant(me);
30+
conversation.setParticipant(other);
31+
const chatbox = talkSession.createChatbox();
32+
chatbox.select(conversation);
33+
chatbox.mount(document.getElementById("talkjs-container"));
34+
return conversation;
35+
}
36+
37+
async function createZoomMeeting() {
38+
const conversation = await conversationObject;
39+
const serverURL = `http://127.0.0.1:3000/meeting`;
40+
try {
41+
const response = await fetch(serverURL, {
42+
method: "GET",
43+
});
44+
const data = await response.json();
45+
conversation.sendMessage("Please join the Zoom meeting " + data.join_url)
46+
} catch (error) {
47+
console.log(error);
48+
}
49+
}
50+

0 commit comments

Comments
 (0)