Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Example of a custom created chatbox header using TalkJS (
<!doctype html>
<html class="no-js" lang="">
<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">
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;
-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);
<!-- minified snippet to load TalkJS without delaying your page -->
;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,[]);
<!-- 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>
<!-- container element in which TalkJS will display a chat UI -->
<div id="talkjs-container" style="height: 500px"><i>Loading chat...</i></div>
Talk.ready.then(function() {
var me = new Talk.User({
id: "123456",
name: "Alice",
email: "",
photoUrl: "",
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: "",
photoUrl: "",
welcomeMessage: "Hey, how can I help?"
var conversation = talkSession.getOrCreateConversation(Talk.oneOnOneId(me, other))
// Set a custom image to use in the the header
photoUrl: '',
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 =;
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;
// If they are enabled, disable them when the checkbox is clicked
} else {
localStorage.setItem('desktopNotifications', 'false');
checkbox.checked = false;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.