Example of a custom created chatbox header using TalkJS (https://talkjs.com)
<!doctype html> | |
<html class="no-js" lang=""> | |
<head> | |
<meta charset="utf-8"> | |
<meta http-equiv="x-ua-compatible" content="ie=edge"> | |
<title>TalkJS Custom Chatbox header</title> | |
<meta name="description" content=""> | |
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
<style> | |
body { | |
font-size: 12px; | |
} | |
* { | |
box-sizing: border-box; | |
} | |
/* Container for everything TalkJS*/ | |
.chatbox-container { | |
width: 420px; | |
max-width: 100%; | |
margin: auto; | |
} | |
/* Custom header for the chatbox*/ | |
#chatbox-header { | |
width: 100%; | |
height: 110px; | |
position: relative; | |
background-color: #000; | |
display: flex; | |
flex-direction: row; | |
justify-content: flex-start; | |
/* Slightly curve the top of the header */ | |
border-radius: 10px 10px 0 0; | |
margin-bottom: -3px; | |
padding: 10px; | |
position: relative; | |
} | |
#header-bg { | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
background-size: cover; | |
background-repeat: no-repeat; | |
background-position: center; | |
border-radius: inherit; | |
opacity: 0.6; | |
} | |
#user-avatar { | |
position: absolute; | |
height: 50px; | |
width: 50px; | |
background-size: cover; | |
background-repeat: no-repeat; | |
background-position: center; | |
border-radius: 50%; | |
border: 2px solid #eee; | |
} | |
#chatbox-header p { | |
font-family: "Helvetica", sans-serif; | |
color: #eee; | |
margin: 0; | |
} | |
#header-subject { | |
position: absolute; | |
font-size: 32px; | |
left: 70px; | |
top: 7px; | |
} | |
#header-alt { | |
position: absolute; | |
left: 70px; | |
top: 42px; | |
font-size: 18px; | |
} | |
/* Notification toggle */ | |
.toggle-container { | |
text-align: right; | |
position: absolute; | |
bottom: 15px; | |
right: 10px; | |
} | |
.toggle-container p { | |
display: inline; | |
font-size: 10px; | |
padding-right: 10px; | |
vertical-align: middle; | |
} | |
.toggle { | |
vertical-align: middle; | |
display: inline-block; | |
position: relative; | |
width: 51px; | |
-webkit-user-select:none; | |
-moz-user-select:none; | |
-ms-user-select: none; | |
user-select: none; | |
height: 18px; | |
} | |
.toggle-checkbox { | |
display: none; | |
} | |
.toggle-label { | |
display: block; | |
overflow: hidden; | |
height: 17px; | |
padding: 0; | |
line-height: 17px; | |
border: 0px solid #eee; | |
border-radius: 28px; | |
background-color: rgba(135,135,135,0.75); | |
} | |
.toggle-label:before { | |
content: ""; | |
display: block; | |
width: 28px; | |
margin: -5.5px; | |
background: #FFFFFF; | |
position: absolute; | |
top: 0; | |
bottom: 0; | |
right: 30px; | |
border-radius: 28px; | |
box-shadow: 0 6px 5px 0px #000; | |
} | |
.toggle-checkbox:checked + .toggle-label { | |
background-color: #0CCC26; | |
} | |
.toggle-checkbox:checked + .toggle-label, .toggle-checkbox:checked + .toggle-label:before { | |
border-color: #0CCC26; | |
} | |
.toggle-checkbox:checked + .toggle-label { | |
margin-left: 0; | |
} | |
.toggle-checkbox:checked + .toggle-label:before { | |
right: 0px; | |
background-color: #FFFFFF; | |
box-shadow: 3px 6px 18px 0px rgba(0, 0, 0, 0.2); | |
} | |
</style> | |
</head> | |
<body> | |
<!-- minified snippet to load TalkJS without delaying your page --> | |
<script> | |
(function(t,a,l,k,j,s){ | |
s=a.createElement('script');s.async=1;s.src="https://cdn.talkjs.com/talk.js";a.head.appendChild(s) | |
;k=t.Promise;t.Talk={v:1,ready:{then:function(f){if(k)return new k(function(r,e){l.push([f,r,e])});l | |
.push([f])},catch:function(){return k&&new k()},c:l}};})(window,document,[]); | |
</script> | |
<!-- Container element for all TalkJS UI elements --> | |
<div class="chatbox-container"> | |
<!-- Custom TalkJS chat header --> | |
<div id="chatbox-header"> | |
<div id="header-bg"></div> | |
<div id="user-avatar"></div> | |
<p id="header-subject">Subject</p> | |
<p id="header-alt">Offered by <span id="header-username">Username</span></p> | |
<div class="toggle-container"> | |
<p>Enable browser notifications</p> | |
<div class="toggle"> | |
<input type="checkbox" name="notificationToggle" class="toggle-checkbox" id="toggle"> | |
<label class="toggle-label" for="toggle"></label> | |
</div> | |
</div> | |
</div> | |
<!-- container element in which TalkJS will display a chat UI --> | |
<div id="talkjs-container" style="height: 500px"><i>Loading chat...</i></div> | |
</div> | |
<script> | |
Talk.ready.then(function() { | |
var me = new Talk.User({ | |
id: "123456", | |
name: "Alice", | |
email: "alice@example.com", | |
photoUrl: "https://demo.talkjs.com/img/alice.jpg", | |
welcomeMessage: "Hey there! How are you? :-)" | |
}); | |
window.talkSession = new Talk.Session({ | |
// Replace this with your own appId | |
appId: "Hku1c4Pt", | |
me: me | |
}); | |
var other = new Talk.User({ | |
id: "654321", | |
name: "Sebastian", | |
email: "Sebastian@example.com", | |
photoUrl: "https://demo.talkjs.com/img/sebastian.jpg", | |
welcomeMessage: "Hey, how can I help?" | |
}); | |
var conversation = talkSession.getOrCreateConversation(Talk.oneOnOneId(me, other)) | |
conversation.setParticipant(me); | |
conversation.setParticipant(other); | |
// Set a custom image to use in the the header | |
conversation.setAttributes({ | |
photoUrl: 'https://firebasestorage.googleapis.com/v0/b/klets-3642/o/user_files%2FHku1c4Pt%2F47edad6a000a40d19f369fc6cc683b57%2Fin-arlington-virginia-a-drafty-house-was-made-more-than-twice-as-efficient-with-the-addition-of-metal-both-inside-and-out-roof-panels-topping-the-brick-envelope-echo-its-original-geometry.jpg?alt=media&token=bea34579-566c-4cfb-8186-05b2c45273e2', | |
subject: "Steel Preserve" | |
}) | |
var chatbox = talkSession.createChatbox(conversation, { | |
// Don't use the default header provided by TalkJS | |
showChatHeader: false, | |
}); | |
// Add the participant user's name to the custom header | |
var headerUsername = document.getElementById('header-username'); | |
headerUsername.textContent = other.name; | |
var headerSubject = document.getElementById('header-subject'); | |
headerSubject.textContent = conversation.subject; | |
document.getElementById('header-bg').style.backgroundImage = "url(" + conversation.photoUrl + ")"; | |
document.getElementById('user-avatar').style.backgroundImage = "url(" + other.photoUrl + ")"; | |
// Custom Desktop Notifications checkbox | |
var checkbox = document.getElementById('toggle'); | |
// See if the notification preference has been previously set, otherwise set them as disabled | |
var notificationsEnabled = localStorage.getItem('desktopNotifications') || 'false'; | |
// Set the checkbox's state to the value stored in the storage, or false if notifications have not been eneabled previously | |
notificationsEnabled === 'true' ? checkbox.checked = true : checkbox.checked = false; | |
checkbox.addEventListener('click', function() { | |
// When the checkbox is clicked, get the current notification state | |
var currentlyEnabled = localStorage.getItem('desktopNotifications') || 'false'; | |
// If they aren't enabled, enable them when the checkbox is clicked | |
if (currentlyEnabled === "false") { | |
localStorage.setItem('desktopNotifications', 'true'); | |
checkbox.checked = true; | |
chatbox.toggleDesktopNotifications(true); | |
// If they are enabled, disable them when the checkbox is clicked | |
} else { | |
localStorage.setItem('desktopNotifications', 'false'); | |
checkbox.checked = false; | |
chatbox.toggleDesktopNotifications(false); | |
} | |
}); | |
chatbox.mount(document.getElementById("talkjs-container")); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment