custom-chatbox.html

## custom-chatbox.html
<!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>