Hướng dẫn tích hợp facebook chat vào website 7-2018 đẹp đơn giản : demo xem thử : http://noithatnthome.com/
Việc tích hợp các nút bên trên không hề khó, bài viết này mình sẽ chỉ …. Các nút mình sắp xếp đó là: Nút gọi điện, nút tin nhắn SMS, nút chat Facebook và nút nhắn tin Zalo. ….. Chỉ vàothao tác thôi là chúng ta có hiệu ứng đẹp mắt và tiện lợi
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.11";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
(function($) {
"use strict";
$(document).ready(function() {
var mobileDetect = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
if (mobileDetect && $(".cresta-facebook-messenger-box").hasClass("onApp")) {
$('.cresta-facebook-messenger-container').css('display','none');
$('.cresta-facebook-messenger-box').on('click', function(){
window.location = 'fb-messenger://user-thread/211379062320104';
});
} else {
$('.cresta-facebook-messenger-box').on('click', function(){
$('.cresta-facebook-messenger-box, .cresta-facebook-messenger-container').toggleClass('open');
});
}
});
})(jQuery);
</script>
<div class="cresta-facebook-messenger-box onApp onBoth">
<svg id="fb-msng-icon" data-name="messenger icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30.47 30.66"><path d="M29.56,14.34c-8.41,0-15.23,6.35-15.23,14.19A13.83,13.83,0,0,0,20,39.59V45l5.19-2.86a16.27,16.27,0,0,0,4.37.59c8.41,0,15.23-6.35,15.23-14.19S38,14.34,29.56,14.34Zm1.51,19.11-3.88-4.16-7.57,4.16,8.33-8.89,4,4.16,7.48-4.16Z" transform="translate(-14.32 -14.34)" style="fill:#ffffff"/></svg>
<svg id="close-icon" data-name="close icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 39.98 39.99"><path d="M48.88,11.14a3.87,3.87,0,0,0-5.44,0L30,24.58,16.58,11.14a3.84,3.84,0,1,0-5.44,5.44L24.58,30,11.14,43.45a3.87,3.87,0,0,0,0,5.44,3.84,3.84,0,0,0,5.44,0L30,35.45,43.45,48.88a3.84,3.84,0,0,0,5.44,0,3.87,3.87,0,0,0,0-5.44L35.45,30,48.88,16.58A3.87,3.87,0,0,0,48.88,11.14Z" transform="translate(-10.02 -10.02)" style="fill:#ffffff"/></svg>
</div>
<div class="cresta-facebook-messenger-container">
<div class="cresta-facebook-messenger-top-header"><span>Chat với chúng tôi</span></div>
<div class="fb-page" data-href="https://www.facebook.com/Noithatnthome-190910444937009/" data-tabs="messages" data-width="300" data-height="350" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"></div>
</div>
<script type="text/javascript">
jQuery(document).foundation();
</script>
<style type='text/css'>
.cresta-facebook-messenger-box, .cresta-facebook-messenger-button {z-index:1000}.cresta-facebook-messenger-container, .cresta-facebook-messenger-container-button {z-index:999}
.cresta-facebook-messenger-box {
width: 60px;
height: 60px;
display: block;
position: fixed;
bottom: 15px;
right: 15px;
cursor: pointer;
text-align: center;
line-height: 60px;
background: #1182FC;
border-radius: 100%;
-webkit-box-shadow: 1px 1px 4px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 1px 1px 4px 0px rgba(0,0,0,0.3);
box-shadow: 1px 1px 4px 0px rgba(0,0,0,0.3);
}
.cresta-facebook-messenger-box svg#fb-msng-icon {
width: 30px;
height: 30px;
position: absolute;
top: 15px;
left: 15px;
opacity: 1;
overflow: hidden;
-webkit-transition: opacity 160ms ease-in-out;
-moz-transition: opacity 160ms ease-in-out;
-o-transition: opacity 160ms ease-in-out;
transition: opacity 160ms ease-in-out;
}
.cresta-facebook-messenger-box svg#close-icon {
opacity: 0;
width: 20px;
height: 20px;
position: absolute;
top: 20px;
left: 20px;
-webkit-transition: opacity 160ms ease-in-out;
-moz-transition: opacity 160ms ease-in-out;
-o-transition: opacity 160ms ease-in-out;
transition: opacity 160ms ease-in-out;
}
.cresta-facebook-messenger-box.open svg#fb-msng-icon {
opacity: 0;
}
.cresta-facebook-messenger-box.open svg#close-icon {
opacity: 1;
}
.cresta-facebook-messenger-container {
position: fixed;
bottom: 90px;
right: 15px;
transform: translateY(50px);
opacity: 0;
border-radius: 10px;
pointer-events: none;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06), 0 2px 32px rgba(0, 0, 0, 0.16);
-webkit-transition: transform 160ms ease-in-out, opacity 160ms ease-in-out;
-moz-transition: transform 160ms ease-in-out, opacity 160ms ease-in-out;
-o-transition: transform 160ms ease-in-out, opacity 160ms ease-in-out;
transition: transform 160ms ease-in-out, opacity 160ms ease-in-out;
}
.cresta-facebook-messenger-container iframe,
.cresta-facebook-messenger-container-button iframe {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.cresta-facebook-messenger-container.open {
opacity: 1;
transform: translateY(0px);
pointer-events: all;
}
.cresta-facebook-messenger-top-header {
display: block;
position: relative;
width: 300px;
background: #1182FC;
color: #ffffff;
text-align: center;
padding: 10px;
font-size: 14px;
line-height: 1;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.cresta-facebook-messenger-button {
position: relative;
display: inline-block;
padding: 10px 15px;
background: #1182FC;
color: #ffffff;
border-radius: 10px;
font-size: 14px;
cursor: pointer;
line-height: 1;
margin-bottom: 10px;
-webkit-box-shadow: 1px 1px 4px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 1px 1px 4px 0px rgba(0,0,0,0.3);
box-shadow: 1px 1px 4px 0px rgba(0,0,0,0.3);
}
.cresta-facebook-messenger-button span {
vertical-align: baseline;
}
.cresta-facebook-messenger-button svg#fb-msng-icon-button {
width: 10px;
height: 10px;
width: 18px;
height: 18px;
vertical-align: text-bottom;
margin-right: 6px;
}
body.rtl .cresta-facebook-messenger-button svg#fb-msng-icon-button {
margin-right: inherit;
margin-left: 6px;
}
.cresta-facebook-messenger-container-button {
border-radius: 10px;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06), 0 2px 32px rgba(0, 0, 0, 0.16);
position: absolute;
opacity: 0;
pointer-events: none;
-webkit-transition: opacity 160ms ease-in-out;
-moz-transition: opacity 160ms ease-in-out;
-o-transition: opacity 160ms ease-in-out;
transition: opacity 160ms ease-in-out;
}
.cresta-facebook-messenger-container-button.open {
opacity: 1;
pointer-events: all;
}
.cresta-facebook-messenger-container-button.top {
top: -20px;
left: 50%;
transform: translate(-50%, -100%);
}
.cresta-facebook-messenger-container-button.bottom {
bottom: -20px;
left: 50%;
transform: translate(-50%, 100%);
}
.cresta-facebook-messenger-container-button.left {
bottom: 0;
left: -20px;
transform: translate(-100%, 50%);
}
.cresta-facebook-messenger-container-button.right {
bottom: 0;
right: -20px;
transform: translate(100%, 50%);
}
@media all and (max-width: 769px) {
.cresta-facebook-messenger-box.onDesktop {
display: none !important;
}
}
@media all and (min-width: 769px) {
.cresta-facebook-messenger-box.onMobile {
display: none !important;
}
}
@media all and (max-width: 600px) {
.cresta-facebook-messenger-box {
width: 45px;
height: 45px;
line-height: 45px;
}
.cresta-facebook-messenger-box svg#fb-msng-icon {
width: 20px;
height: 20px;
}
.cresta-facebook-messenger-box svg#fb-msng-icon,
.cresta-facebook-messenger-box svg#close-icon {
top: 13px;
left: 12px;
}
}
</style>
Bài viết liên quan :
Chia sẻ 3 theme WordPress về tin tức Presso, Newspaper và NewsCore
Tự động đính kèm ảnh khi Copy bài viết trong WordPress
Chia sẽ trọn bộ 15 Themes wordpress Premium từ premiumpress.com $249
Hướng dẫn tạo thêm wiget sidebar trong WordPress - chỉ hiện mục cố đinh
Share 48 Theme WordPress Genesis and Review
Top 5 Theme WordPress miễn phí làm website chia sẻ video tốt nhất 2017
