Code tích hợp Live Chat Facebook cho web trên máy tính và mobile


ITZ sẽ giúp bạn thêm Live Chat Facebook vào web đơn giản nhất, Facebook Messenger cho website hiển thị tốt trên Mobile, iPad và PC, tự động mở ứng dụng Facebook Messenger khi chat trên web vào bằng thiết bị di động
<style type="text/css">
.thing, .thing .circle, .magnet {
  border-radius: 50%;
  width: 62px;
  height: 62px;
}
 
.thing .circle, .magnet-zone {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-perspective: 1000;
          perspective: 1000;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
 
.explain {
  opacity: 0.5;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
 
.messenger {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.messenger:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: '';
  opacity: 0;
  background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0.8, transparent), to(rgba(0, 0, 0, 0.25)));
  background: -webkit-linear-gradient(transparent 80%, rgba(0, 0, 0, 0.25) 100%);
  background: linear-gradient(transparent 80%, rgba(0, 0, 0, 0.25) 100%);
  -webkit-transition: opacity 300ms ease-in-out;
          transition: opacity 300ms ease-in-out;
}
 
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: transparent;
  /* For some Androids */
}
 
.thing {
    position: absolute;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    margin: 0px;
    cursor: pointer;
    right: -65px;
    position: fixed;
    top: 130px;
    z-index: 998;
}
 
.fbmessenger:active .thing,.fbmessenger:active .thing .circle,.fbmessenger:active .magnet {
  border-radius: 50%;
  width: 55px;
  height: 55px;
}
 
.fbmessenger:active ._2pon {
    height: 15px;
    width: 15px;
}
 
.fbmessenger:active ._2poo {
    background: red;
    padding-left: 5px;
    color: #fff;
    font-weight: bold;
    font-size: 10px;
    border-radius: 50%;
}
 
#android, #ios, #computer{ display: none;}
 
.thing .circle {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #888;
  background-image: url(http://lamwebviet.com/upload/team/LuanCu.jpg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  -webkit-transition: -webkit-transform 50ms linear;
          transition: transform 50ms linear;
}
.thing.edge {
  -webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.345, 1.1);
          transition: all 400ms cubic-bezier(0.175, 0.885, 0.345, 1.1);
}
 
._1ht1 ._4ld_ {
    bottom: -1px;
    right: -1px;
}
 
._4ld_ {
    top: -2px;
    position: absolute;
    left: 0px;
}
._2pom {
    height: 18px;
    width: 18px;
}
 
._2poo {
    background: red;
    padding-left: 5px;
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    border-radius: 50%;
}
 
._2pon {
    height: 18px;
    width: 18px;
}
 
.magnet-zone {
  pointer-events: none;
  -webkit-transition: -webkit-transform 400ms cubic-bezier(0.175, 0.885, 0.145, 1.22);
          transition: transform 400ms cubic-bezier(0.175, 0.885, 0.145, 1.22);
}
 
.magnet-zone {
  position: absolute;
  text-align: center;
  bottom: 10px;
  padding: 10px 20px;
  left: 50%;
  -webkit-transform: translate(-50%, 100%) translateZ(0);
          transform: translate(-50%, 100%) translateZ(0);
}
.magnet-zone.overlap .magnet {
  -webkit-transform: scale(1.08) translateZ(0);
          transform: scale(1.08) translateZ(0);
}
 
.touching .circle {
  -webkit-transform: scale(0.9) translateZ(0);
          transform: scale(0.9) translateZ(0);
}
 
.moving .container:before {
  opacity: 1;
}
.moving .magnet-zone {
  -webkit-transform: translate(-50%, 0) translateZ(0);
          transform: translate(-50%, 0) translateZ(0);
}
 
.magnet-zone:after {
  pointer-events: none;
  content: '\00d7';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%) translateZ(0);
          transform: translateY(-50%) translateZ(0);
  text-align: center;
  font-size: 2em;
  font-weight: 100;
  color: #fff;
  z-index: 998;
}
 
.magnet {
  pointer-events: none;
  background: rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  position: relative;
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
  -webkit-transition: -webkit-transform 200ms cubic-bezier(0.175, 0.885, 0.145, 1.25);
          transition: transform 200ms cubic-bezier(0.175, 0.885, 0.145, 1.25);
  -webkit-transform: scale(0.7) translateZ(0);
          transform: scale(0.7) translateZ(0);
  border: 2px solid #fff;
}
 
.msgContent {
    position: absolute;
    right: 0px;
    top: 160px;
    background: #0084ff;
    width: 220px;
    opacity: 0;
    font-size: 15px;
    position: fixed;
    color: white;
    z-index: 998;
    text-transform: none;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: left;
    -webkit-border-radius: 5px;
    min-height: 45px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    
    
}
 
.msgContent:before {
    left: 100%;
    z-index: 999;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    border-left-color: #0084ff;
    border-width: 5px;
    margin-top: -5px;
}
</style>
<!-- Chat app -->
 
<script  type="text/javascript">
$(document).ready(function(){
 
        messenger('Chào bạn, nếu cần trợ giúp hãy chát với mình nhé!');
 
function hidemsg(){   
 
    $('.msgContent').animate({width: '0px', opacity: '0', height: '45px', color: 'transparent'}, 200);
    setTimeout(function() { hidetext() }, 500);
    
}
 
function hidetext(){
 
    $(".msgContent").html('');
}
 
function showmsg(text){
 
    $(".msgContent").html(text);
    $('.msgContent').animate({width: '220px', opacity: '1', top: '140px', right: '65px', color: '#fff'},  {duration: 180, complete: function(){ setTimeout(function() { hidemsg() }, 5500) }});
 
}
 
function messenger(text){
    
    $('.thing').delay(5000).animate({right: '13px', top: '100px'}, 150).animate({right: '-7px', top: '130px'}, {duration: 160, complete: function(){showmsg(text)}});
 
}
});
 
</script>
 
<div class="msgContent">
<p></p>
</div>
<a href="fb-messenger://user/100006669513148" class="fbmessenger" id="android">
    <div data-drag="data-drag" class="thing">
        <div class="circle"></div>
        <div class="_4ld_ _2pom"><div class="_2pon _2poo">1</div></div>
    </div>
 
  </a>
  <a href="fb-messenger://user-thread/100006669513148"  class="fbmessenger" id="ios">
    <div data-drag="data-drag" class="thing">
        <div class="circle"></div>
        <div class="_4ld_ _2pom"><div class="_2pon _2poo">1</div></div>
    </div>
 
  </a>
  <a href="https://www.facebook.com/messages/t/cuxuanluan" target="_blank" class="fbmessenger" id="computer">
    <div data-drag="data-drag" class="thing">
        <div class="circle"></div>
        <div class="_4ld_ _2pom"><div class="_2pon _2poo">1</div></div>
    </div>
 
  </a>
   
<script  type="text/javascript">
$(document).ready(function(){
/**
 * JavaScript Client Detection
 * (C) viazenetti GmbH (Christian Ludwig)
 */
window.onload = function() {
    {
        var unknown = '-';
 
        // screen
        var screenSize = '';
        if (screen.width) {
            width = (screen.width) ? screen.width : '';
            height = (screen.height) ? screen.height : '';
            screenSize += '' + width + " x " + height;
        }
 
        // browser
        var nVer = navigator.appVersion;
        var nAgt = navigator.userAgent;
        var browser = navigator.appName;
        var version = '' + parseFloat(navigator.appVersion);
        var majorVersion = parseInt(navigator.appVersion, 10);
        var nameOffset, verOffset, ix;
 
        // Opera
        if ((verOffset = nAgt.indexOf('Opera')) != -1) {
            browser = 'Opera';
            version = nAgt.substring(verOffset + 6);
            if ((verOffset = nAgt.indexOf('Version')) != -1) {
                version = nAgt.substring(verOffset + 8);
            }
        }
        // Opera Next
        if ((verOffset = nAgt.indexOf('OPR')) != -1) {
            browser = 'Opera';
            version = nAgt.substring(verOffset + 4);
        }
        // MSIE
        else if ((verOffset = nAgt.indexOf('MSIE')) != -1) {
            browser = 'Microsoft Internet Explorer';
            version = nAgt.substring(verOffset + 5);
        }
        // Chrome
        else if ((verOffset = nAgt.indexOf('Chrome')) != -1) {
            browser = 'Chrome';
            version = nAgt.substring(verOffset + 7);
        }
        // Safari
        else if ((verOffset = nAgt.indexOf('Safari')) != -1) {
            browser = 'Safari';
            version = nAgt.substring(verOffset + 7);
            if ((verOffset = nAgt.indexOf('Version')) != -1) {
                version = nAgt.substring(verOffset + 8);
            }
        }
        // Firefox
        else if ((verOffset = nAgt.indexOf('Firefox')) != -1) {
            browser = 'Firefox';
            version = nAgt.substring(verOffset + 8);
        }
        // MSIE 11+
        else if (nAgt.indexOf('Trident/') != -1) {
            browser = 'Microsoft Internet Explorer';
            version = nAgt.substring(nAgt.indexOf('rv:') + 3);
        }
        // Other browsers
        else if ((nameOffset = nAgt.lastIndexOf(' ') + 1) < (verOffset = nAgt.lastIndexOf('/'))) {
            browser = nAgt.substring(nameOffset, verOffset);
            version = nAgt.substring(verOffset + 1);
            if (browser.toLowerCase() == browser.toUpperCase()) {
                browser = navigator.appName;
            }
        }
        // trim the version string
        if ((ix = version.indexOf(';')) != -1) version = version.substring(0, ix);
        if ((ix = version.indexOf(' ')) != -1) version = version.substring(0, ix);
        if ((ix = version.indexOf(')')) != -1) version = version.substring(0, ix);
 
        majorVersion = parseInt('' + version, 10);
        if (isNaN(majorVersion)) {
            version = '' + parseFloat(navigator.appVersion);
            majorVersion = parseInt(navigator.appVersion, 10);
        }
 
        // mobile version
        var mobile = /Mobile|mini|Fennec|Android|iP(ad|od|hone)/.test(nVer);
 
        // cookie
        var cookieEnabled = (navigator.cookieEnabled) ? true : false;
 
        if (typeof navigator.cookieEnabled == 'undefined' && !cookieEnabled) {
            document.cookie = 'testcookie';
            cookieEnabled = (document.cookie.indexOf('testcookie') != -1) ? true : false;
        }
 
        // system
        var os = unknown;
        var clientStrings = [
            {s:'Windows 10', r:/(Windows 10.0|Windows NT 10.0)/},
            {s:'Windows 8.1', r:/(Windows 8.1|Windows NT 6.3)/},
            {s:'Windows 8', r:/(Windows 8|Windows NT 6.2)/},
            {s:'Windows 7', r:/(Windows 7|Windows NT 6.1)/},
            {s:'Windows Vista', r:/Windows NT 6.0/},
            {s:'Windows Server 2003', r:/Windows NT 5.2/},
            {s:'Windows XP', r:/(Windows NT 5.1|Windows XP)/},
            {s:'Windows 2000', r:/(Windows NT 5.0|Windows 2000)/},
            {s:'Windows ME', r:/(Win 9x 4.90|Windows ME)/},
            {s:'Windows 98', r:/(Windows 98|Win98)/},
            {s:'Windows 95', r:/(Windows 95|Win95|Windows_95)/},
            {s:'Windows NT 4.0', r:/(Windows NT 4.0|WinNT4.0|WinNT|Windows NT)/},
            {s:'Windows CE', r:/Windows CE/},
            {s:'Windows 3.11', r:/Win16/},
            {s:'Android', r:/Android/},
            {s:'Open BSD', r:/OpenBSD/},
            {s:'Sun OS', r:/SunOS/},
            {s:'Linux', r:/(Linux|X11)/},
            {s:'iOS', r:/(iPhone|iPad|iPod)/},
            {s:'Mac OS X', r:/Mac OS X/},
            {s:'Mac OS', r:/(MacPPC|MacIntel|Mac_PowerPC|Macintosh)/},
            {s:'QNX', r:/QNX/},
            {s:'UNIX', r:/UNIX/},
            {s:'BeOS', r:/BeOS/},
            {s:'OS/2', r:/OS\/2/},
            {s:'Search Bot', r:/(nuhk|Googlebot|Yammybot|Openbot|Slurp|MSNBot|Ask Jeeves\/Teoma|ia_archiver)/}
        ];
        for (var id in clientStrings) {
            var cs = clientStrings[id];
            if (cs.r.test(nAgt)) {
                os = cs.s;
                break;
            }
        }
 
        var osVersion = unknown;
 
        if (/Windows/.test(os)) {
            osVersion = /Windows (.*)/.exec(os)[1];
            os = 'Windows';
        }
 
        switch (os) {
            case 'Mac OS X':
                osVersion = /Mac OS X (10[\.\_\d]+)/.exec(nAgt)[1];
                break;
 
            case 'Android':
                osVersion = /Android ([\.\_\d]+)/.exec(nAgt)[1];
                break;
 
            case 'iOS':
                osVersion = /OS (\d+)_(\d+)_?(\d+)?/.exec(nVer);
                osVersion = osVersion[1] + '.' + osVersion[2] + '.' + (osVersion[3] | 0);
                break;
        }
       
        var flashVersion = 'no check';
        if (typeof swfobject != 'undefined') {
            var fv = swfobject.getFlashPlayerVersion();
            if (fv.major > 0) {
                flashVersion = fv.major + '.' + fv.minor + ' r' + fv.release;
            }
            else  {
                flashVersion = unknown;
            }
        }
    }
 
    window.jscd = {
        screen: screenSize,
        browser: browser,
        browserVersion: version,
        browserMajorVersion: majorVersion,
        mobile: mobile,
        os: os,
        osVersion: osVersion,
        cookies: cookieEnabled,
        flashVersion: flashVersion
    };
 
var text = '<div class="msgContent"> </div>';
 
if(jscd.os == 'iOS'){
    //alert ('IOS');
    document.getElementById('ios').style.display = 'block';
    document.getElementById('android').style.display = 'none';
    document.getElementById('computer').style.display = 'none';
    
}
else if(jscd.os == 'Android'){
    //alert ('ANDROID');
    document.getElementById('ios').style.display = 'none';
    document.getElementById('android').style.display = 'block';
    document.getElementById('computer').style.display = 'none';
}else{
    document.getElementById('ios').style.display = 'none';
    document.getElementById('android').style.display = 'none';
    document.getElementById('computer').style.display = 'block';
}
 
}
});
</script>

Có thể bạn quan tâm
21/04/2017
261