/custom-chatbox.html
Last active Nov 5, 2018
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