Skip to content

Commit 0df6ca4

Browse files
aswinrajeevofficialaswinrajeevofficial
committed
How to use custom data to style your TalkJS chat
1 parent 9a9a368 commit 0df6ca4

File tree

4 files changed

+166
-0
lines changed

4 files changed

+166
-0
lines changed

‎howtos/how-to-use-custom-data-to-style-your-talkjs-chat/README.md

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
This is an example project to go with our tutorial on how to use custom data to style your TalkJS chat.
2+
3+
<!-- Add link to tutorial once published -->
4+
5+
This project passes custom data to multiple TalkJS chatboxes. Then, we use the custom data to modify a newly created [TalkJS Theme](https://talkjs.com/docs/Features/Themes/).
6+
7+
## Prerequisites
8+
9+
To run this tutorial, you will need:
10+
11+
- A [TalkJS account](https://talkjs.com/dashboard/login)
12+
13+
## How to run the tutorial
14+
15+
1. Clone or download this project.
16+
2. Go to `index.js`, and replace <YOUR_APP_ID> with your app ID from the TalkJS dashboard.
17+
3. Go to your TalkJS dashboard and navigate to the **Themes** tab. Create a new theme called "customDataToTheme" based on the "default" theme. The project adds the default role to all users in the chat.
18+
4. Edit the theme as per the instructions in the article.
19+
5. Run the HTML file by opening it in your browser.

‎howtos/how-to-use-custom-data-to-style-your-talkjs-chat/index.html

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<title>How to use custom data to style your TalkJS Chat</title>
8+
<meta name="description" content="">
9+
<meta name="viewport" content="width=device-width, initial-scale=1">
10+
<link rel="stylesheet" href="styles.css">
11+
</head>
12+
13+
<body>
14+
<script>
15+
(function (t, a, l, k, j, s) {
16+
s = a.createElement("script");
17+
s.async = 1;
18+
s.src = "https://cdn.talkjs.com/talk.js";
19+
a.head.appendChild(s);
20+
k = t.Promise;
21+
t.Talk = {
22+
v: 3,
23+
ready: {
24+
then: function (f) {
25+
if (k)
26+
return new k(function (r, e) {
27+
l.push([f, r, e]);
28+
});
29+
l.push([f]);
30+
},
31+
catch: function () {
32+
return k && new k();
33+
},
34+
c: l,
35+
},
36+
};
37+
})(window, document, []);
38+
</script>
39+
<script src="index.js" async defer></script>
40+
<div class="container">
41+
<div id="talkjs-container-1" class="column">
42+
<i>Loading chat...</i>
43+
</div>
44+
<div id="talkjs-container-2" class="column">
45+
<i>Loading chat...</i>
46+
</div>
47+
<div id="talkjs-container-3" class="column">
48+
<i>Loading chat...</i>
49+
</div>
50+
</div>
51+
</div>
52+
53+
</body>
54+
55+
</html>

‎howtos/how-to-use-custom-data-to-style-your-talkjs-chat/index.js

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
Talk.ready.then(() => {
2+
const me = new Talk.User({
3+
id: "0001",
4+
name: "Mikaela Ross",
5+
email: "[email protected]",
6+
photoUrl: "https://talkjs.com/images/avatar-7.jpg",
7+
role: "default"
8+
});
9+
10+
const other1 = new Talk.User({
11+
id: "0002",
12+
name: "Thomas River",
13+
email: "[email protected]",
14+
photoUrl: "https://talkjs.com/images/avatar-5.jpg",
15+
role: "default"
16+
});
17+
18+
const other2 = new Talk.User({
19+
id: "0003",
20+
name: "Kirsten Doe",
21+
email: "[email protected]",
22+
photoUrl: "https://talkjs.com/images/avatar-1.jpg",
23+
role: "default"
24+
});
25+
26+
const other3 = new Talk.User({
27+
id: "0004",
28+
name: "James Fayland",
29+
email: "[email protected]",
30+
photoUrl: "https://talkjs.com/images/avatar-4.jpg",
31+
role: "default"
32+
});
33+
34+
window.talkSession = new Talk.Session({
35+
appId: "<YOUR_APP_ID>",
36+
me: me,
37+
});
38+
39+
let conversation1 = talkSession.getOrCreateConversation("customStyleChat1");
40+
let conversation2 = talkSession.getOrCreateConversation("customStyleChat2");
41+
let conversation3 = talkSession.getOrCreateConversation("customStyleChat3");
42+
43+
conversation1.setParticipant(me);
44+
conversation1.setParticipant(other1);
45+
46+
conversation2.setParticipant(me);
47+
conversation2.setParticipant(other2);
48+
49+
conversation3.setParticipant(me);
50+
conversation3.setParticipant(other3);
51+
52+
const chatbox1 = talkSession.createChatbox({
53+
theme: {
54+
custom: {
55+
accentColor: '#EE4B2B',
56+
},
57+
},
58+
});
59+
60+
const chatbox2 = talkSession.createChatbox({
61+
theme: {
62+
custom: {
63+
accentColor: '#E69597',
64+
},
65+
},
66+
});
67+
68+
const chatbox3 = talkSession.createChatbox({
69+
theme: {
70+
custom: {
71+
accentColor: '#56AE57',
72+
},
73+
},
74+
});
75+
76+
chatbox1.select(conversation1);
77+
chatbox2.select(conversation2);
78+
chatbox3.select(conversation3);
79+
80+
chatbox1.mount(document.getElementById("talkjs-container-1"));
81+
chatbox2.mount(document.getElementById("talkjs-container-2"));
82+
chatbox3.mount(document.getElementById("talkjs-container-3"));
83+
});

‎howtos/how-to-use-custom-data-to-style-your-talkjs-chat/styles.css

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.container {
2+
display: flex;
3+
justify-content: space-between;
4+
height: 500px;
5+
margin: 30px;
6+
}
7+
.column {
8+
flex: 1;
9+
}

0 commit comments

Comments
 (0)