[Code] zChat 1.0

demo



Tác giả: Zero
Quyền lợi: Bạn được quyền sử dụng miễn phí mod nếu bạn coi trọng bản quyền
Phiên bản: 1.0

Chức năng:
- Hỗ trợ console
- Hỗ trợ nhiều commands chatbox mặc định của fm không
- Hỗ trợ nhiều giao diện (người dùng có thể tự cài)
- Hỗ trợ phpbb2, phpbb3, punbb, và invision
- Nhẹ, gửi và tải tin nhanh
- Tự động cập nhật tin, đăng nhập và refresh
- Hiện thông báo khi /cls, /kick, và /ban

Chức năng cho những phiên bản tiếp theo:
- Gửi tin riêng
- Hỗ trợ nhiều channels
- Hỗ trợ chức năng tạo subject cho từng channels
- Kích hoạt lại chức năng hiện menu khi right-click trên tên

Hướng dẫn:
[1.0] Tạo 1 trang html với nội dung bên dưới
Html:

Code:

<style type="text/css">
ol, ul {
    list-style: none outside none;
}
#ddchatbox {
  border-radius: 4px
}
#cbbcode {
  float: left;
  margin-right: 20px;
  text-shadow: 1px 1px 1px #000000;
}
#zchat {
  height: 300px;
  position: relative;
  width: 100%;
}
.zchat-popup {
  bottom: 50px;
  max-height: 150px;
  overflow: auto;
  padding: 5px;
  position: absolute;
  z-index: 100;
}
#zchat-color {
  width: auto
}
#zchat-smilies {
  width: 50%
}
#zchat-options > div,
#zchat-themes > div {
  border: 1px solid #CCCCCC;
  margin: 7px 0;
  padding: 2px;
  width: 125px;
}
#zchat-options input,
#zchat-themes input {
    float: right;
    margin: 0 !important;
    padding: 0 !important;
}
#zchat-smilies img {
  margin: 0 4px 4px 0;
  padding: 2px;
  background: transparent;
  border: 1px solid #e8e8e8;
}
#zchat-smilies img: hover {
  background: #ffffff;
  border: 1px solid #808080;
}
#ddcbcolors td {
  padding: 5px;
  cursor: pointer;
}
#ddcbcolors div: hover {
  border: 1px solid #ffffff;
}
#show_color {
    width: 14px;
  height: 14px;
    margin: 1px;
  background: #000000;
}
#zchat span.date-and-time {
  position: relative;
  top: -1px;
  float: right;
}
#zchat span.msg {
  padding: 0px;
}
#zchat a.mod {
  font-weight: bold;
}
#chatterlist {
  padding: 2px 5px;
  line-height: 15px;
  font-size: 12px;
}
#chatterlist img {
  vertical-align: baseline;
}
#cmdtable td {
  border: 1px #18405E solid
}
#cmdtable {
  width: 100%
}
.chatbox_row_1,
.chatbox_row_2 {
  margin: 0;
  line-height: 14px;
  text-indent: -90px;
  margin: 10px 50px;
  border-radius: 4px
}
#zchat-buttons {
float:left;
width: 18%;
}
#zchat-form {
        margin-left: 18%;
}
#zchat-message {
  width: 100%;
  margin: 0 !important;
  height: 20px !important;
  padding: 2px !important;
  border: none;
        display: block;
        border-radius: 4px
}
#c_users {
  bottom: 42px;
  left: 5px;
  overflow: auto;
  position: absolute;
  right: 5px;
  top: 5px;
  width: 164px;
}
#c_right {
  bottom: 42px;
  overflow: auto;
  position: absolute;
  right: 5px;
  top: 5px;
  display: none;
  width: 245px;
}
#c_box {
  right: 5px;
  bottom: 42px;
  left: 175px;
  overflow: auto;
  position: absolute;
  top: 5px;
}
span.date-and-time {
  font-size: 9px;
  font-family: Tahoma, Arial
}
span.user {
  font-size: 12px;
  font-family: Tahoma, Arial
}
.zchat-buttons {
        float: right;
        margin: 0 5px !important;
        padding: 4px !important;
        width: auto !important;
        height: auto !important;
  cursor: pointer;
  float: left;
  margin: -1px 10px 0 0;
  text-align: left
}
.zchat-buttons img {
        width: 16px;
        heigh: 16px;
}
#c_control {
  bottom: 20px;
  height: 22px;
  left: 0;
  padding: 10px;
  position: absolute;
  right: 0;
}
#c_report, #c_console {
padding: 2px 5px;
}
#c_console {
margin-bottom: 5px;
}
#c_report {
  text-align: center
}
#c_report input, #c_report img {
width: 80%;
background: #FFF;
border-radius: 4px;
border: none
}
#c_report p {
        margin: 5px 0;
}
</style><div id="zchat">
  <div id="c_users"></div>
  <div id="c_box"></div>
  <div id="c_right">
      <div id="c_console" style="display:none">[INFO] zChat v1.0 by Zero
        <br>[INFO] Type /help for commands
        <div id="c_console_inner"></div>
      </div>
      <div id="c_report" style="display:none">
        <form method="post" action="/contact?action=submit" name="report">
            <input style="display:none" type="text" value="Chatbox Report" class="report-abuse-textarea" maxlength="54" id="subject" name="subject">
            <textarea id="mess" name="message" rows="10" cols="25" style="display:none"></textarea>
            <p>
              <input id="suspect" type="text" placeholder="Suspect ?" onkeypress="zchat.report()" />
            </p>
            <p>
              <input id="reason" type="text" placeholder="Reason ?" onkeypress="zchat.report()" />
            </p>
            <p>
              <img alt="" src="/antirobot_pic.forum?a=1">
            </p>
            <p>
              <input type="hidden" value="" name="username">
              <input type="hidden" value="" name="time">
              <input type="text" dir="ltr" maxlength="5" id="reg_key" name="reg_key" placeholder="Captcha">
            </p>
            <p style="text-align:center">
              <input type="submit" value="Send" name="submit" class="button" onclick="zchat.submitReport(); return false">
              <input type="hidden" value="" name="time">
            </p>
        </form>
      </div>
  </div>
  <div id="c_popups">
      <div id="zchat-smilies" style="display:none" class="zchat-popup"></div>
      <div id="zchat-color" style="display:none" class="zchat-popup"></div>
      <div id="zchat-options" style="display:none" class="zchat-popup">
        <div><span>Bold</span>
            <input id="divbold" type="checkbox" onclick="zchat.do_style('bold')" />
        </div>
        <div><span>Italic</span>
            <input id="divitalic" type="checkbox" onclick="zchat.do_style('italic')" />
        </div>
        <div><span>Strike</span>
            <input id="divstrike" type="checkbox" onclick="zchat.do_style('strike')" />
        </div>
        <div><span>Underline</span>
            <input id="divunderline" type="checkbox" onclick="zchat.do_style('underline')" />
        </div>
      </div>
      <div id="zchat-upload" style="display:none" class="zchat-popup">
        <iframe scrolling="no" frameBorder="0" src="http://imageshack.us/syndicate/widget.php"></iframe>
      </div>
      <div id="zchat-themes" style="display:none" class="zchat-popup">
        <div>
<span>Black</span>
            <input type="radio" value="h13" id="h13" onchange="zchat.ctheme(this.value)">
        </div>
        <div>
<span>Thin Blue</span>
            <input type="radio" value="h14" id="h14" onchange="zchat.ctheme(this.value)">
        </div>
      </div>
  </div>
  <div id="c_control">
      <div style="display:none;cursor:pointer;position:absolute;left:200px" onclick="ajax_refresh_chatbox('?archives=1', 1)">Refresh</div>
      <div id="zchat-buttons">
        <ul>
            <li>
              <div id="divoption" class="zchat-buttons" title="Options" onclick="zchat.popup('zchat-options', event)">
                  <img src="http://i55.servimg.com/u/f55/17/60/28/76/cog10.png" />
              </div>
            </li>
            <li>
              <div id="divoption" class="zchat-buttons" title="Themes" onclick="zchat.popup('zchat-themes', event)">
                  <img src="http://i55.servimg.com/u/f55/17/60/28/76/page_l10.png" />
              </div>
            </li>
            <li>
              <div id="divcolor" class="zchat-buttons" onclick="zchat.popup('zchat-color', event)" title="Color">
                  <div id="show_color"></div>
              </div>
            </li>
            <li>
              <div id="divsmilies" class="zchat-buttons" onclick="zchat.loadsmilies(event)" title="Smileys">
                  <img src="http://i55.servimg.com/u/f55/17/60/28/76/emotio10.png" />
              </div>
            </li>
            <li>
              <div id="divupload" class="zchat-buttons" onclick="zchat.popup('zchat-upload', event)" title="Smileys">
                  <img src="http://i55.servimg.com/u/f55/17/60/28/76/pictur10.png" />
              </div>
            </li>
        </ul>
      </div>
        <div id="zchat-form">
      <form name="cpost" method="post" onsubmit="zchat.submitmsg();return false">
 
            <input type="text" id="zchat-message" name="message" autocomplete="off" />
            <input type="hidden" name="sbold" value="0" />
            <input type="hidden" name="sitalic" value="0" />
            <input type="hidden" name="sunderline" value="0" />
            <input type="hidden" name="sstrike" value="0" />
            <input type="hidden" name="scolor" id="scolor" value="0" />
            <input type="hidden" name="sent" value="" />
      </form>
        </div>
  </div>
</div>
<style type="text/css">
/* Black */
.h13 #c_users {
  background: none repeat scroll 0 0 #484848;
}
.h13 #c_control {
  background-color: #2A2A2A;
  color: #222
}
.h13 #c_box {
  background: #484848;
}
.h13 #c_console, .h13 #c_report {
  background: #484848;
}
.h13 .zchat-buttons {
  color: #000000;
  background-color: #fff;
    border-radius: 4px;
}
.h13 #zchat span.date-and-time,
.h13 #c_users,
.h13 #c_console,
.h13 .chatbox_row_1,
.h13 .chatbox_row_2 {
  color: #D4D4D4;
}
.h13 .chatbox_row_1 {
  background: #484848
}
.h13 .chatbox_row_2 {
  background: #565656
}
.h13 .chatbox_row_1,
.h13 .chatbox_row_2 {
  padding: 8px 8px 8px 94px;
  border: 1px solid #2A2A2A;
  font-size: 12px;
}
.h13 #zchat {
  background-color: #2A2A2A;
  border-radius: 4px;
  font-size: 12px;
}
.h13 #zchat-message {
  background: #ffffff;
}
.h13 .zchat-popup {
  background: #E8E8E8;
  border: 1px solid #D5D5D5;
}
.h13 #c_control {
  color: #FFFFFF;
  font-weight: bold;
  background: #2A2A2A
}
 
/* THIN BLUE */
.h14 #c_users {
  background: #FFF;
        border: 1px solid #359BED
}
.h14 #c_control {
  background-color: #FFF;
  color: #222
}
.h14 #c_box {
    background: #FFF;
        border: 1px solid #359BED
}
.h14 #c_console, .h13 #c_report {
  background: #FFF; 
}
.h14 .zchat-buttons {
  background-color: #fff;
    border-radius: 4px;
        border: 1px solid #359BED
}
.h14 #zchat span.date-and-time,
.h14 #c_users,
.h14 #c_console,
.h14 .chatbox_row_1,
.h14 .chatbox_row_2 {
  color: #000000;
}
.h14 .chatbox_row_1 {
  background: #FFF
}
.h14 .chatbox_row_2 {
  background: #FFF
}
.h14 .chatbox_row_1,
.h14 .chatbox_row_2 {
  padding: 8px 8px 8px 94px;
  border: 1px solid #CCC;
  font-size: 12px;
}
.h14 #zchat {
  background: #F4F4F4;
  font-size: 12px;
}
.h14 #zchat-message {
  background: #ffffff;
        border: 1px solid #359BED
}
.h14 .zchat-popup {
  background: #E8E8E8;
  border: 1px solid #D5D5D5;
}
.h14 #c_control {
  color: #000;
  font-weight: bold;
  background: #F4F4F4
}
.h14 #c_right {
        border: 1px solid #359BED
}
</style>

[2.0] Tạo 1 file js, đặt ở In the homepage

Code:

var connected = false;
var toflag = true;
var oldmsg = '';
var refreshtime = '8000';
var chatboxurl = '/h15-';
var permission = '-1';
var zchat = {
        lang: {
                permission_error: 'You don\'t have permission to use that command',
                user_error: 'This user does not exist',
                syntax_error: 'Wrong syntax',
                console_message: 'Console started',
                clear_message: 'You have cleared the chatbox messages',
                clear_notify: 'cleared the chatbox messages',
                ban_message: 'You have successfully banned',
                ban_notify: 'banned',
                ban_error: 'You cannot ban this user or this user is not online',
                kick_message: 'You have successfully kicked',
                kick_notify: 'kicked',
                kick_error: 'You cannot kick this user or this user is not online',
                changelog_message: 'None',
                help_message: '/cclear - Clear the console history<br>/help - List of known commands<br>/changelog -  List of new added features<br>/report - Report a member<br>/log - Show chatbox history<br>/friend <username> - Add a user as friends<br>/foe <username> - Add a user as foe<br>/avatar <username> - Get that user\'s avatar',
                report_open_message: 'Report opened',
                report_close_message: 'Report closed',
        },
        name: 0,
        tid: 0,
        prepare: function () {
                if (document.getElementById('logout')) {
                        var a = document.getElementById('logout');
                        zchat.tid = a.href.substring(a.href.indexOf('tid=') + 4, a.href.indexOf('&key'));
                        zchat.name = a.textContent.replace(/Logout |Thoát /, '').replace('[ ', '');
                        zchat.name = zchat.name.substring(0, zchat.name.lastIndexOf(' ]'));
                }
        },
        togglechatlogin: function () {
                if (connected) {
                        connected = false;
                        zchat.connect('disconnect');
                } else {
                        connected = true;
                        zchat.connect('connect');
                }
        },
        returnUser: function (name) {
                document.cpost.message.value += name;
                document.cpost.message.focus();
        },
        connect: function (type) {
                if (window.XMLHttpRequest) {
                        var http_request = new XMLHttpRequest();
                } else if (window.ActiveXObject) {
                        var http_request = new ActiveXObject("Microsoft.XMLHTTP");
                }
                http_request.onreadystatechange = function () {
                        if (http_request.readyState == 4 && http_request.status == 200) {
                                zchat.refresh_chatbox();
                                window.setTimeout("document.getElementById('c_box').scrollTop=999999", 1000);
                        }
                };
                http_request.open('GET', '/chatbox/chatbox_actions.forum?archives=1&mode=' + type + '&tid=' + zchat.tid, true);
                http_request.send(null);
        },
        ctheme: function (theme) {
                my_setcookie('ctheme', theme, true);
                document.getElementById(theme).checked = 'checked';
                document.getElementById('zchat').className = theme;
                document.getElementById('c_box').scrollTop = 999999;
                document.cpost.message.focus();
        },
        initchat: function () {
                zchat.init_pref();
                var theme = my_getcookie('ctheme');
                if (theme == null) {
                        theme = 'h13';
                }
                zchat.togglechatlogin();
                zchat.ctheme(theme);
        },
        init_pref: function () {
                if (my_getcookie('CB_bold') == 1) {
                        document.cpost.sbold.value = 1;
                        document.getElementById('divbold').setAttribute('checked', 'checked');
                        document.cpost.message.style.fontWeight = 'bold';
                }
                if (my_getcookie('CB_italic') == 1) {
                        document.cpost.sitalic.value = 1;
                        document.getElementById('divitalic').setAttribute('checked', 'checked');
                        document.cpost.message.style.fontStyle = 'italic';
                }
                if (my_getcookie('CB_under') == 1) {
                        document.cpost.sunderline.value = 1;
                        document.getElementById('divunderline').setAttribute('checked', 'checked');
                        document.cpost.message.style.textDecoration = 'underline';
                }
                if (my_getcookie('CB_strike') == 1) {
                        document.cpost.sstrike.value = 1;
                        document.getElementById('divstrike').setAttribute('checked', 'checked');
                        document.cpost.message.style.textDecoration = ' line-through'
                }
                if (pref = my_getcookie('CB_color')) {
                        document.cpost.scolor.value = pref;
                        document.getElementById('show_color').style.backgroundColor = '#' + pref;
                        document.cpost.message.style.color = '#' + pref;
                }
                zchat.initcolorbox();
        },
        submitmsg: function () {
                var x = document.cpost.message.value;
                var y = x.toLowerCase();
                //  if (y.indexOf('/exit') == 0) {x=x.replace(/\//,'/');}
                if (y.indexOf('/') == 0) {
                        x = x.replace(/\//, '/');
                }
                document.cpost.sent.value = x;
                document.cpost.message.value = '';
                document.cpost.message.focus();
                zchat.submit_chatbox();
                return false;
        },
        ddajax: function (flag, sent) {
                if (window.XMLHttpRequest) {
                        var http_request = new XMLHttpRequest()
                } else if (window.ActiveXObject) {
                        var http_request = new ActiveXObject("Microsoft.XMLHTTP")
                }
                http_request.onreadystatechange = function () {
                        if (http_request.readyState == 4 && http_request.status == 200) {
                                var response = http_request.responseText;
                                if (flag == 'refresh' && response.substring(0, 3) != 'var') {
                                        oldmsg = response;
                                        zchat.connect('connect');
                                } else if (response != oldmsg) {
                                        oldmsg = response;
                                        eval(response);
                                        doc = document.implementation.createHTMLDocument("example");
                                        doc.documentElement.innerHTML = chatbox_messages;
                                        loop = doc.getElementsByClassName('user-msg');
                                        for (i = 0; i < loop.length; i++) {
                                                if (loop[i].getElementsByClassName('user')[0].getElementsByTagName('a')[0]) {
                                                        loop[i].getElementsByClassName('user')[0].getElementsByTagName('a')[0].setAttribute('onclick', 'zchat.returnUser(this.textContent); return false');
                                                        loop[i].getElementsByClassName('user')[0].innerHTML = loop[i].getElementsByClassName('user')[0].innerHTML.replace(/@/, '[MOD]');
                                                        loop[i].getElementsByTagName('a')[0]
                                                } else {
                                                        loop[i].getElementsByClassName('msg')[0].innerHTML = loop[i].getElementsByClassName('msg')[0].innerHTML.replace('<strong>* ', '<strong>');
                                                }
                                        }
                                        document.getElementById('c_box').innerHTML = doc.documentElement.innerHTML;
                                        chatbox_memberlist = chatbox_memberlist.replace(/li\>\<li/g, 'li>, <li').replace(/<[^>]+>/g, '');
                                        chatbox_memberlist = chatbox_memberlist.replace(/Online/, '<b>Online: </b>').replace(/Away/, ', ');
                                        chatbox_memberlist = chatbox_memberlist.replace(/@ /g, '[MOD] ');
                                        document.getElementById('c_users').innerHTML = '<div id="chatterlist">' + chatbox_memberlist + '</div>';
                                        document.getElementById('c_box').scrollTop = 999999;
                                        //            document.cpost.message.focus();
                                        toflag = window.setTimeout('zchat.refresh_chatbox()', refreshtime);
                                }
                        }
                };
                if (flag == 'refresh') {
                        http_request.open('GET', '/chatbox/chatbox_actions.forum?archives=1&mode=refresh', true);
                        http_request.send(null);
                } else {
                        http_request.open('POST', '/chatbox/chatbox_actions.forum?archives=1', true);
                        http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;');
                        http_request.send(flag + '&sent=' + encodeURIComponent(sent));
                }
        },
        submit_chatbox: function () {
                var toflag = window.clearTimeout(toflag);
                var msg_sent = document.cpost.sent.value;
                var data = '&mode=send';
                // data += '&sent=' + msg_sent;
                data += '&sbold=' + document.cpost.sbold.value;
                data += '&sitalic=' + document.cpost.sitalic.value;
                data += '&sunderline=' + document.cpost.sunderline.value;
                data += '&sstrike=' + document.cpost.sstrike.value;
                data += '&scolor=' + document.cpost.scolor.value;
                zchat.command(msg_sent.replace(///g, '/'), data);
        },
        report: function () {
                var suspect = document.getElementById('suspect').value,
                        reason = document.getElementById('reason').value,
                        report = document.getElementById('c_box').innerHTML.replace(/<p.*?>(.*?)<\/p>/g, '\n$1').replace(/<[^>]*>/g, '').replace(/ /g, ' ');
                document.report.message.value = 'Hello {USERNAME}, ' + uname + ' has reported ' + suspect + ' for ' + reason + '. Here is the chat log\n' + report + '\nReported via zChat';
        },
        submitReport: function () {
                $.post('/contact?action=submit', $("#c_report form").serialize());
        },
        command: function (value, data) {
                if (value == '/cls' || value == '/clear') {
                        zchat.showCommand('<br><b>> /clear</b><br>');
                        if (zchat.checkUser('\\[MOD\\]\\s+' + zchat.name)) {
                                zchat.ddajax(data, '/cls');
                                zchat.ddajax(data, '/me ' + zchat.lang.clear_notify);
                                zchat.showCommand(zchat.clear_message);
                        } else {
                                zchat.showCommand(zchat.permission_error);
                        }
                } else if (value.indexOf('/ban ') === 0) {
                        var name = value.substring(value.indexOf(' ') + 1);
                        zchat.showCommand('<br><b>> /ban ' + name + '</b><br>');
                        if (zchat.checkUser('\\[MOD\\]\\s+' + zchat.name) && zchat.checkUser(name)) {
                                zchat.ddajax(data, '/ban ' + name);
                                zchat.ddajax(data, '/me ' + zchat.lang.ban_notify + ' ' + name);
                                zchat.showCommand(zchat.lang.ban_message + ' ' + name);
                        } else {
                                if (zchat.checkUser('\\[MOD\\]\\s+' + zchat.name)) {
                                        zchat.showCommand(zchat.lang.ban_error);
                                } else {
                                        zchat.showCommand(zchat.lang.permission_error);
                                }
                        }
                } else if (value.indexOf('/kick ') === 0) {
                        var name = value.substring(value.indexOf(' ') + 1);
                        zchat.showCommand('<br><b>> /kick ' + name + '</b><br>');
                        if (zchat.checkUser('\\[MOD\\]\\s+' + zchat.name) && zchat.checkUser(name)) {
                                zchat.ddajax(data, '/kick ' + name);
                                zchat.ddajax(data, '/me ' + zchat.lang.kick_notify + ' ' + name);
                                zchat.showCommand(zchat.lang.kick_message + ' ' + name);
                        } else {
                                if (zchat.checkUser('\\[MOD\\]\\s+' + zchat.name)) {
                                        zchat.showCommand(zchat.lang.permission_error);
                                } else {
                                        zchat.showCommand(zchat.lang.kick_error);
                                }
                        }
                } else if (value == '/console') {
                        var a = document.getElementById('c_console'),
                                b = document.getElementById('c_box'),
                                c = document.getElementById('c_right');
                        a.style.display == 'none' ? (a.style.display = 'block', $('#c_console_inner').append('<br><b>> /console</b><br>' + zchat.lang.console_message)) : a.style.display = 'none';
                        if (b.getAttribute('style') && document.getElementById('c_report').style.display == 'none') {
                                b.removeAttribute('style');
                                c.setAttribute('style', 'display: none');
                        } else {
                                b.setAttribute('style', 'right:255px');
                                c.setAttribute('style', 'display: block');
                        }
                        return false;
                } else if (value == '/changelog') {
                        zchat.showCommand('<br><b>> /changelog</b><br>' + zchat.lang.changelog_message);
                        return false;
                } else if (value == '/help') {
                        zchat.showCommand('<br><b>> /help</b><br>' + zchat.lang.help_message);
                        return false;
                } else if (value == '/cclear') {
                        $("#c_console_inner").html('');
                        return false;
                } else if (value == '/log') {
                        zchat.showCommand('<br><b>> /log</b><br><textarea style="width:100%;resize:none" onclick="this.select()" readonly="readonly">' + document.getElementById('c_box').innerHTML + '</textarea>');
                        return false;
                } else if (value == '/report') {
                        var a = document.getElementById('c_report'),
                                b = document.getElementById('c_box'),
                                c = document.getElementById('c_right');
                        a.style.display == 'none' ? (a.style.display = 'block', zchat.showCommand('<br><b>> /report</b><br>' + zchat.lang.report_open_message)) : (a.style.display = 'none', zchat.showCommand('<br><b>> /report</b><br>' + zchat.lang.report_close_message));
                        if (b.getAttribute('style') && document.getElementById('c_console').style.display == 'none') {
                                b.removeAttribute('style');
                                c.setAttribute('style', 'display: none');
                        } else {
                                b.setAttribute('style', 'right:255px');
                                c.setAttribute('style', 'display: block');
                        }
                        return false;
                } else if (value.indexOf('/friend ') === 0) {
                        $.post("/profile?mode=editprofile&page_profil=friendsfoes", {
                                'friend': value.substring(value.indexOf(' ') + 1);
                        }, function (data) {
                                var notice = $(data).find(".frm-set:first dd:last span").text();
                                notice = notice == '' ? zchat.lang.syntax_error : notice;
                                zchat.showCommand('<br><b>> /friend ' + value.substring(value.indexOf(' ') + 1) + '</b><br>' + notice);
                        });
                        return false;
                } else if (value.indexOf('/foe ') === 0) {
                        $.post("/profile?mode=editprofile&page_profil=friendsfoes", {
                                'foe': value.substring(value.indexOf(' ') + 1)
                        }, function (data) {
                                var notice = $(data).find(".frm-set:last dd:last span").text();
                                notice = notice == '' ? zchat.lang.syntax_error : notice;
                                zchat.showCommand('<br><b>> /foe ' + value.substring(value.indexOf(' ') + 1) + '</b><br>' + notice);
                        });
                        return false;
                } else if (value.indexOf('/avatar ') === 0) {
                        var avatar = value.substring(value.indexOf(' ') + 1);
                        $("<div />").load("/profile.forum?mode=viewprofile&u=" + avatar.replace(/ /g, '+') + " #profile-advanced-right .module:first .main-content img:first", function () {
                                if (this.getElementsByTagName('img').length != 1) {
                                        notice = zchat.lang.user_error;
                                } else {
                                        notice = '<img src="' + this.getElementsByTagName('img')[0].getAttribute('src') + '" />';
                                }
                                zchat.showCommand('<br><b>> /avatar ' + avatar + '</b><br>' + notice);
                        });
                        return false;
                } else {
                        zchat.ddajax(data, document.cpost.sent.value)
                }
        },
        showCommand: function (data) {
                if (document.getElementById('c_right').style.display == 'block' && document.getElementById('c_console').style.display == 'block') {
                        $("#c_console_inner").append(data)
                }
        },
        checkUser: function (user) {
                var regex = new RegExp('\\s+'+user);
                a = document.getElementById('c_users').textContent.replace('Online: ', '');
                return regex.test(a);
        },
        refresh_chatbox: function () {
                toflag = window.clearTimeout(toflag);
                if (connected) {
                        zchat.ddajax('refresh');
                }
        },
        do_style: function (dostyle, elem) {
                switch (dostyle) {
                case 'bold':
                        {
                                document.getElementById('divbold').style.fontWeight = (document.cpost.sbold.value == '0') ? 'bold' : '';
                                document.cpost.message.style.fontWeight = document.getElementById('divbold').style.fontWeight;
                                document.cpost.sbold.value = (document.cpost.sbold.value == '0') ? '1' : '0';
                                my_setcookie('CB_bold', document.cpost.sbold.value);
                                break;
                        }
                case 'italic':
                        {
                                document.getElementById('divitalic').style.fontStyle = (document.cpost.sitalic.value == '0') ? 'italic' : '';
                                document.cpost.message.style.fontStyle = document.getElementById('divitalic').style.fontStyle;
                                document.cpost.sitalic.value = (document.cpost.sitalic.value == '0') ? '1' : '0';
                                my_setcookie('CB_italic', document.cpost.sitalic.value);
                                break;
                        }
                case 'underline':
                        {
                                document.getElementById('divunderline').style.textDecoration = (document.cpost.sunderline.value == '0') ? document.cpost.message.style.textDecoration + ' underline' : document.cpost.message.style.textDecoration.replace('underline', '');
                                document.cpost.message.style.textDecoration = document.getElementById('divunderline').style.textDecoration;
                                document.cpost.sunderline.value = (document.cpost.sunderline.value == '0') ? '1' : '0';
                                my_setcookie('CB_under', document.cpost.sunderline.value);
                                break;
                        }
                case 'strike':
                        {
                                document.getElementById('divstrike').style.textDecoration = (document.cpost.sstrike.value == '0') ? document.cpost.message.style.textDecoration + ' line-through' : document.cpost.message.style.textDecoration.replace('line-through', '');
                                document.cpost.message.style.textDecoration = document.getElementById('divstrike').style.textDecoration;
                                document.cpost.sstrike.value = (document.cpost.sstrike.value == '0') ? '1' : '0';
                                my_setcookie('CB_strike', document.cpost.sstrike.value);
                                break;
                        }
                }
                document.cpost.message.focus();
        },
        setcbcol: function (color) {
                document.getElementById('show_color').style.backgroundColor = '#' + color;
                document.getElementById('scolor').value = color;
                document.getElementById('zchat-message').style.color = '#' + color;
                my_setcookie('CB_color', color);
                document.getElementById('zchat-color').style.display = 'none';
                document.cpost.message.focus();
        },
        popup: function (a, b) {
                document.cpost.message.focus();
                $('#' + a).siblings().hide();
                x = document.getElementById(a);
                if (x.style.display == 'none') {
                        position = b.offsetX === undefined ? b.layerX : b.offsetX;
                        x.setAttribute('style', 'display: block;left: ' + position + 'px');
                } else {
                        x.style.display = 'none';
                }
        },
        loadsmilies: function (a) {
                zchat.popup('zchat-smilies', a);
                var x = document.getElementById('zchat-smilies');
                if (x.innerHTML == '') {
                        $(x).load('/smilies.forum?mode=smilies_frame #smilies_categ, .smiley-element', function () {
                                this.innerHTML = this.innerHTML.replace(/alt=\"(.*?)\"/g, 'onclick="zchat.insertsmiley(\'$1\')"');
                        });
                }
        },
        insertsmiley: function (smiley) {
                document.cpost.message.value += ' ' + smiley + ' ';
                document.getElementById('zchat-smilies').style.display = 'none';
                document.cpost.message.focus();
        },
        initcolorbox: function () {
                var x = '<table cellspacing="0" id="ddcbcolors">';
                var colors = new Array('00', '33', '66', '99', 'CC', 'FF');
                for (i = 5; i >= 0; i--) {
                        x = x + '<tr>';
                        for (j = 5; j >= 0; j--) {
                                for (k = 5; k >= 0; k--) {
                                        var col = colors[j] + colors[i] + colors[k];
                                        x = x + '<td style="background: #' + col + '" onclick="zchat.setcolor(\'' + col + '\');"></td>';
                                }
                        }
                        x = x + '</tr>';
                }
                document.getElementById('zchat-color').innerHTML = x + '</table>';
        },
        setcolor: function (col) {
                var bbopen = '[color=#' + col + ']';
                var bbclose = '[/color]';
                zchat.setcbcol(col);
        },
        initchatbox: function () {
                var x = document.getElementById('main-content');
                $.get(chatboxurl, function (a) {
                        $(x).append('<div id="zchat">' + a + '</div>');
                        zchat.initchat()
                })
        },
};
$(function () {
        zchat.prepare();
        zchat.initchatbox();
});

[3.0] Vào lại js ở trên, thay /h15- bằng link trang html bạn vừa tạo
[4.0] Nếu chatbox không hiện ở dưới cuối trang, hoặc bạn dùng phiên bản khác với punbb. Thay document.getElementById('main-content'); trong js bằng chỗ bạn muốn hiện chatbox

nguồn: devs