Skip to content

Commit 6e66a4a

Browse files
keerlukeerlu
authored
Merge pull request #415 from talkjs/feat/how-to-mute-a-conversation
Example code for "How to mute a conversation" tutorial
2 parents 75cfc92 + 71dd5bb commit 6e66a4a

File tree

4 files changed

+158
-0
lines changed

4 files changed

+158
-0
lines changed

‎howtos/how-to-mute-a-conversation/README.md

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
This is an example project for TalkJS's tutorial on [how to mute a conversation]().
2+
3+
The project uses TalkJS's [custom conversation actions](https://talkjs.com/docs/Features/Customizations/Conversation_Actions/) to add a new "Mute conversation" option to the chat UI. It then listens for this custom action and calls TalkJS's JavaScript SDK to mute notifications for the conversation.
4+
5+
## Prerequisites
6+
7+
To run this tutorial, you will need:
8+
9+
- A [TalkJS account](https://talkjs.com/dashboard/login)
10+
- [Node.js](https://nodejs.org/en)
11+
- [npm](https://www.npmjs.com/)
12+
13+
## How to run the tutorial
14+
15+
1. Clone or download the project.
16+
2. Go to the **Roles** tab of your TalkJS dashboard. In the **Custom conversation actions** section of the "default" role settings, add a new custom conversation action with a name of "mute" and a label of "Mute conversation".
17+
3. Replace `<APP_ID>` and `<SECRET_KEY>` in `index.html` and `script.js` with the values found in your [TalkJS dashboard](https://talkjs.com/dashboard/login).
18+
4. Run `npm install` to install dependencies.

‎howtos/how-to-mute-a-conversation/index.html

+102
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<!DOCTYPE html>
2+
3+
<html lang="en">
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
8+
<title>TalkJS tutorial</title>
9+
</head>
10+
11+
<!-- minified snippet to load TalkJS without delaying your page -->
12+
<script>
13+
(function (t, a, l, k, j, s) {
14+
s = a.createElement("script");
15+
s.async = 1;
16+
s.src = "https://cdn.talkjs.com/talk.js";
17+
a.head.appendChild(s);
18+
k = t.Promise;
19+
t.Talk = {
20+
v: 3,
21+
ready: {
22+
then: function (f) {
23+
if (k)
24+
return new k(function (r, e) {
25+
l.push([f, r, e]);
26+
});
27+
l.push([f]);
28+
},
29+
catch: function () {
30+
return k && new k();
31+
},
32+
c: l,
33+
},
34+
};
35+
})(window, document, []);
36+
</script>
37+
38+
<script>
39+
Talk.ready.then(function () {
40+
const me = new Talk.User({
41+
id: "muteConversationExampleSupportAgent",
42+
name: "Alice",
43+
email: "[email protected]",
44+
role: "default",
45+
photoUrl: "https://talkjs.com/images/avatar-1.jpg",
46+
welcomeMessage: "Hey there! How can I help?",
47+
});
48+
const talkSession = new Talk.Session({
49+
appId: "<APP_ID>", // replace with your app ID
50+
me: me,
51+
});
52+
53+
const other = new Talk.User({
54+
id: "muteConversationExampleUser",
55+
name: "Sebastian",
56+
email: "[email protected]",
57+
role: "default",
58+
photoUrl: "https://talkjs.com/images/avatar-5.jpg",
59+
welcomeMessage: "Hey, how can I help?",
60+
});
61+
62+
const bob = new Talk.User({
63+
id: "muteConversationExampleUser2",
64+
name: "Bob",
65+
email: "[email protected]",
66+
role: "default",
67+
photoUrl: "https://talkjs.com/images/avatar-4.jpg",
68+
welcomeMessage: "Hey, how can I help?",
69+
});
70+
71+
const conversation = talkSession.getOrCreateConversation(
72+
"muteConversationExample"
73+
);
74+
conversation.setParticipant(me);
75+
conversation.setParticipant(other);
76+
77+
const conversation2 = talkSession.getOrCreateConversation(
78+
"muteConversationExample2"
79+
);
80+
conversation2.setParticipant(me);
81+
conversation2.setParticipant(bob);
82+
83+
const inbox = talkSession.createInbox({ selected: conversation });
84+
inbox.mount(document.getElementById("talkjs-container"));
85+
inbox.onCustomConversationAction("mute", (event) => {
86+
console.log("Muted conversation with id:", event.conversation.id);
87+
let conversation = talkSession.getOrCreateConversation(
88+
event.conversation.id
89+
);
90+
conversation.setParticipant(me, { notify: false });
91+
inbox.select(conversation);
92+
});
93+
});
94+
</script>
95+
96+
<body>
97+
<!-- container element in which TalkJS will display a chat UI -->
98+
<div id="talkjs-container" style="width: 90%; margin: 30px; height: 500px">
99+
<i>Loading chat...</i>
100+
</div>
101+
</body>
102+
</html>

‎howtos/how-to-mute-a-conversation/package.json

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"name": "mute-a-conversation",
3+
"dependencies": {
4+
"express": "^4.18.2",
5+
"node-fetch": "^3.3.1"
6+
},
7+
"type": "module",
8+
"scripts": {
9+
"start": "node script.js"
10+
}
11+
}

‎howtos/how-to-mute-a-conversation/script.js

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import fetch from "node-fetch";
2+
3+
const appId = "<APP_ID>";
4+
const secretKey = "<SECRET_KEY>";
5+
6+
const basePath = "https://api.talkjs.com";
7+
const conversationId = "muteConversationExample";
8+
9+
// Add a new message from Sebastian
10+
11+
await fetch(
12+
`${basePath}/v1/${appId}/conversations/${conversationId}/messages`,
13+
{
14+
method: "post",
15+
headers: {
16+
"Content-Type": "application/json",
17+
Authorization: `Bearer ${secretKey}`,
18+
},
19+
body: JSON.stringify([
20+
{
21+
text: "There's a problem with my order",
22+
sender: "muteConversationExampleUser",
23+
type: "UserMessage",
24+
},
25+
]),
26+
}
27+
);

0 commit comments

Comments
 (0)