Blog
Code tích hợp Live Chat Facebook cho web trên máy tính và mobile
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(Link_Ảnh);
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: ‘ 0d7’;
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>
<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>
