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 :
Thêm ký tự vào trước và sau giá sản phẩm trong WooCommerce
Share kho phim HOT 4K Bluray Remux Full Vietsub link speed
Share plugin Yoast SEO premium bản mới nhất 10.0.1
20 Theme WordPress miễn phí tốt nhất 2017 để tạo trang web bán hàng hay trang web thương mại điện tử
Chia sẻ theme bán hàng Love Fashion đẹp cho wordpress trên themeforest
Giải pháp tăng doanh thu kinh doanh và phát triển thương hiệu tốt nhất 2018