Chia sẻ, Tin Tức

Hướng dẫn tích hợp facebook chat vào website 7-2018 đẹp đơn giản

Posted on by admin

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 :

Chuyển 0đ thành chữ “Liên hệ” trong woocommerce
Cách thiết lập PayPal trên WooCommerce bằng PayPal Identity Token
FLATSOME – THEME WORDPRESS BÁN HÀNG TIẾNG VIỆT TỐT NHẤT
CHÈN NÚT GỌI ĐIỆN THOẠI VÀO WEBSITE KHI XEM TRÊN DI ĐỘNG
Hơn 100 wordpress theme premium trên themeforest.net trị giá trên 5000$
Thay đổi vị trí của giá bán và giá khuyến mãi trong WooCommerce của wordpress
admin

CÔNG TY CỔ PHẦN BECABIZ - đội ngũ chuyên nghiệp, sáng tạo nội dung, quản trị nội dung, tạo nên giá trị tốt nhất cho khách hàng.

Trả lời

Email của bạn sẽ không được hiển thị công khai.