Trò chuyện CHAT với khách hàng là điều tối cần thiết khi sử dụng thiết kế website bán hàng. Áp dụng cách nào giúp tiết kiệm chi phí nhưng hiệu quả cao, chắc chắn người kinh doanh bán hàng online nào cũng mong muốn. Với sự hỗ trợ tuyệt vời của mạng xã hội như Facebook, Zalo, v, v, chúng ta có thể hiểu khách hàng hơn với chi phí 0 đồng.

chat-facebook-ban-hang-online-buoc-12

Cùng DoveBay tìm hiểu cách nhúng hộp chat Facebook vào website

Có nhiều cách để tạo hộp chat Facebook cho website, dùng plugin hoặc chèn code. Trong đó, cách chèn code sẽ giúp cho website load nhanh hơn là dùng nhiều plugin sẽ khiến website giảm tốc độ.

Trong nhiều cách chèn code chat Facebook có hai dạng chính

Dạng 1: chèn hộp chat Facebook, người dùng click sẽ xuất hiện hộp chat Messenger nhưng không thể trò chuyện trên chính hộp chat này, và tự chuyển sang tab Chat khác. Cách này tiện cho người dùng sử dụng mobile hơn.

Dạng 2: Nhúng hộp chat Facbook vào để khách hang có thể trò chuyện với mình ngay tại hộp chat đó. Cách này tiện cho người dùng sử dụng máy tính hơn, người dùng mobile sẽ cần thêm một thao tác nữa để chuyển đến ứng dụng Chat Messenger.

DoveBay sẽ hướng dẫn bạn sử dụng hai cách nhúng trên.

Hướng dẫn nhúng hộp chat Facebook trực tiếp

Đây là hướng dẫn nhúng code tạo hộp chat Facebook có thể chat trực tiếp giữa người dùng và quản trị ngay trên website của bạn.

Các bước tạo hộp chat Facebook trực tiếp trên website

Bước 1: Truy cập Facebook for Developers

chat-facebook-ban-hang-online-buoc-1

Click Thêm ứng dụng mới

Một popup cửa sổ hiện lên bạn nhập thông tin theo hướng dẫn trong hình.

Tên hiển thị là tùy ý bạn chọn, mục đích phân biệt với các ứng dụng khác sau này bạn sẽ tạo thêm. Email cần sử dụng chính xác và đang hoạt động để nhận các thông báo của ứng dụng.

chat-facebook-ban-hang-online-buoc-2

 

Sau đó click nút Tạo ID ứng dụng và nhập mã Capcha hoặc xác nhận không phải người máy.

Bước 2: phần thiết lập ứng dụng

Sau bước trên, bạn sẽ bước vào phần thiết lập ứng dụng. Vào phần Cài đặt / Thông tin cơ bản.

chat-facebook-ban-hang-online-buoc-3

Thông tin quan trọng nhất bạn bắt buộc phải điền trong phần này là URL chính sách quyền riêng tư (Privacy Policy URL). Mục này bạn điề URL website của bạn vào. Các mục khác bạn có thể bỏ qua hoặc nhập thêm email tùy chọn. Sau đó, Lưu lại.

Click nút Bật ứng dụng theo hình hướng dẫn, để hiện thị và Xác nhận hiện thị.

chat-facebook-ban-hang-online-buoc-4

Bạn nhớ copy lại ID ứng dụng để dùng các bước sau nhé!

Bước 3: Truy cập vào Trang Fanpage của bạn: Cài đặt / Nền tảng Messenger

chat-facebook-ban-hang-online-buoc-5

Tìm đến mục Chia sẻ thuộc tính, nhập ID ứng dụng và lưu lại.

chat-facebook-ban-hang-online-6buoc-6

Tìm đến mục: Miền được đưa vào danh sách hợp lệ, bạn có thể nhập một hoặc nhiều URL website bạn muốn nhúng hộp chat.

chat-facebook-ban-hang-online-buoc-7

Tìm đến mục Plugin chat với khách hàng: Click và thiết lập các mục ngôn ngữ, lời chào… Thiết lập xong click Next.

Nếu muốn thay đổi màu sắc có thể tùy chỉnh tại đây.

chat-facebook-ban-hang-online-buoc-8

Sau đó Next – tiếp, bạn sẽ chuyển qua phần lấy mã nhúng.

chat-facebook-ban-hang-online-buoc-9

Bạn copy lại mã nhúng, hoàn tất phần này.

Bước 4: Sử dụng mã nhúng chat Facebook cung cấp

Bạn có thể chèn mã nhúng vào sau thẻ mở <body> trong foooter, hoặc header.

Sau khi cài xong, hộp chat Facebook sẽ xuất hiện và có thể trò chuyện trực tiếp tại đây, xóa cache trong website hoặc trình duyệt nếu chưa thấy kết quả.

chat-facebook-ban-hang-online

Lưu ý về hai cách chèn chat Facebook bạn sẽ phải lựa chọn

Lưu ý rằng, hộp chat này sẽ tiện lợi nhất cho người dùng sử dụng faceook trên trình duyệt, nếu không sẽ được yêu cầu đăng nhập vào Facebook để có thể chat được. Nếu người dùng muốn chat trên mobile trong ứng dụng Messenger, họ cần thêm một thao tác click vào cuối màn hình để chuyển đến ứng dụng Messenger.

chat-facebook-ban-hang-online-buoc-10

Hướng dẫn nhúng hộp chat Facebook tiện cho người dùng mobile

Ngày nay, với ứng dụng Messenger, người dùng có thể click vào là ra ngay ứng dụng chat này mà không cần thêm thao tác nữa. Nếu bạn muốn dùng cách này, có thể copy mã code sau nhúng vào dưới <body> trong header nhé.

Cách này sẽ giúp người dùng chuyển thẳng đến ứng dụng Messenger hoặc chuyển sang trang chat Messenger trên trình duyệt máy tính.

Các mục đánh dấu đỏ, bạn cần thay bằng Fanpage của bạn vào nhé!

<!–Start Chat messenger–>

<style>.fb-livechat, .fb-widget{display: none}.ctrlq.fb-button, .ctrlq.fb-close{position: fixed; right: 10px; cursor: pointer}.ctrlq.fb-button{z-index: 999; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEyOCAxMjgiIGhlaWdodD0iMTI4cHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjggMTI4IiB3aWR0aD0iMTI4cHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnPjxyZWN0IGZpbGw9IiMwMDg0RkYiIGhlaWdodD0iMTI4IiB3aWR0aD0iMTI4Ii8+PC9nPjxwYXRoIGQ9Ik02NCwxNy41MzFjLTI1LjQwNSwwLTQ2LDE5LjI1OS00Niw0My4wMTVjMCwxMy41MTUsNi42NjUsMjUuNTc0LDE3LjA4OSwzMy40NnYxNi40NjIgIGwxNS42OTgtOC43MDdjNC4xODYsMS4xNzEsOC42MjEsMS44LDEzLjIxMywxLjhjMjUuNDA1LDAsNDYtMTkuMjU4LDQ2LTQzLjAxNUMxMTAsMzYuNzksODkuNDA1LDE3LjUzMSw2NCwxNy41MzF6IE02OC44NDUsNzUuMjE0ICBMNTYuOTQ3LDYyLjg1NUwzNC4wMzUsNzUuNTI0bDI1LjEyLTI2LjY1N2wxMS44OTgsMTIuMzU5bDIyLjkxLTEyLjY3TDY4Ljg0NSw3NS4yMTR6IiBmaWxsPSIjRkZGRkZGIiBpZD0iQnViYmxlX1NoYXBlIi8+PC9zdmc+) center no-repeat #207fed; width: 55px; height: 55px; text-align: center; bottom: 80px; border: 0; outline: 0; border-radius: 60px; -webkit-border-radius: 60px; -moz-border-radius: 60px; -ms-border-radius: 60px; -o-border-radius: 60px; box-shadow: 0 1px 6px rgba(0, 0, 0, .06), 0 2px 32px rgba(0, 0, 0, .16); -webkit-transition: box-shadow .2s ease; background-size: 80%; transition: all .2s ease-in-out}.ctrlq.fb-button:focus, .ctrlq.fb-button:hover{transform: scale(1.1); box-shadow: 0 2px 8px rgba(0, 0, 0, .09), 0 4px 40px rgba(0, 0, 0, .24)}.fb-widget{background: #fff; z-index: 1000; position: fixed; width: 360px; height: 435px; overflow: hidden; opacity: 0; bottom: 0; right: 24px; border-radius: 6px; -o-border-radius: 6px; -webkit-border-radius: 6px; box-shadow: 0 5px 40px rgba(0, 0, 0, .16); -webkit-box-shadow: 0 5px 40px rgba(0, 0, 0, .16); -moz-box-shadow: 0 5px 40px rgba(0, 0, 0, .16); -o-box-shadow: 0 5px 40px rgba(0, 0, 0, .16)}.fb-credit{text-align: center; margin-top: 8px}.fb-credit a{transition: none; color: #bec2c9; font-family: Helvetica, Arial, sans-serif; font-size: 12px; text-decoration: none; border: 0; font-weight: 400}.ctrlq.fb-overlay{z-index: 0; position: fixed; height: 100vh; width: 100vw; -webkit-transition: opacity .4s, visibility .4s; transition: opacity .4s, visibility .4s; top: 0; left: 0; background: rgba(0, 0, 0, .05); display: none}.ctrlq.fb-close{z-index: 4; padding: 0 6px; background: #365899; font-weight: 700; font-size: 11px; color: #fff; margin: 8px; border-radius: 3px}.ctrlq.fb-close::after{content: “X”; font-family: sans-serif}.bubble{width: 20px; height: 20px; background: #c00; color: #fff; position: absolute; z-index: 999999999; text-align: center; vertical-align: middle; top: -2px; left: -5px; border-radius: 50%;}.bubble-msg{width: 80px; left: -90px; top: 5px; position: relative; background: rgba(83,154,237,0.82); color: #fff; padding: 5px 8px; border-radius: 8px; text-align: center; font-size: 13px;}</style><div class=”fb-livechat”> <div class=”ctrlq fb-overlay”></div><div class=”fb-widget”> <div class=”ctrlq fb-close”></div><div class=”fb-page” data-href=”https://www.facebook.com/DoveBay” data-tabs=”messages” data-width=”360″ data-height=”400″ data-small-header=”true” data-hide-cover=”true” data-show-facepile=”false”> </div><div class=”fb-credit”> <a href=”https://s.dovebay.com/lien-he” target=”_blank”>Chọn bộ phận CHAT</a> </div><div id=”fb-root”></div></div><a href=”https://m.me/DoveBay” title=”Truy cập Facebook để chat với DoveBay” class=”ctrlq fb-button”> <div class=”bubble”>1</div><div class=”bubble-msg”>Trợ giúp</div></a></div><script src=”https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9″></script><script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js”></script><script>$(document).ready(function(){function detectmob(){if( navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/Windows Phone/i) ){return true;}else{return false;}}var t={delay: 125, overlay: $(“.fb-overlay”), widget: $(“.fb-widget”), button: $(“.fb-button”)}; setTimeout(function(){$(“div.fb-livechat”).fadeIn()}, 8 * t.delay); if(!detectmob()){$(“.ctrlq”).on(“click”, function(e){e.preventDefault(), t.overlay.is(“:visible”) ? (t.overlay.fadeOut(t.delay), t.widget.stop().animate({bottom: 0, opacity: 0}, 2 * t.delay, function(){$(this).hide(“slow”), t.button.show()})) : t.button.fadeOut(“medium”, function(){t.widget.stop().show().animate({bottom: “30px”, opacity: 1}, 2 * t.delay), t.overlay.fadeIn(t.delay)})})}});</script>

<!-End Chat mesenger–>

Chat Facebook là điều tuyệt vời cho nhà bán hàng online

Trên đây là hai cách giúp bạn dễ dàng trò chuyện với khách hàng của mình mà không tốn thêm chi phí. Chẳng những vậy, lại là xu hướng của người dùng hiện nay vì người dùng nào cũng đang sử dụng chat Facebook hằng ngày. Dù bạn không biết hành vi người dùng trên website, nhưng bạn biết trang cá nhân của họ, biết họ là ai, sau này giới thiệu sản phẩm dịch vụ tiếp theo rất tuyệt vời.

Xem thêm: Hosting là gì và các nhà cung cấp hosting giá rẻ