Tích hợp chat Zalo vào website theo 2 cách đơn giản

Hướng dẫn bạn 2 cách tích hợp chat Zalo vào website một cách nhanh chóng và đẹp mắt giúp bạn bán được nhiều hàng hơn (+chat Facebook, cuộc gọi).

Khi muốn mua một thứ gì đó mình hay lên Google tìm kiếm. Và thường nhấp vào một vài kết quả đầu tiên. Sau khi tìm được sản phẩm ưng ý và muốn gọi điện để tìm hiểu thêm cũng như đặt hàng. Chỉ có điều kéo từ trên xuống dưới tìm mỏi cả mắt mà không thấy số điện thoại đâu. Cũng không có Zalo hay Facebook gì cả.

Có phải như vậy là chủ nhân website đó đã đánh mất rất nhiều khách hàng tiềm năng rồi phải không?

Nếu bạn cũng đang như vậy thì hãy tìm cách tích hợp số điện thoại, Zalo hay Facebook để biến khách hàng tiềm năng thành khách hàng của bạn nhé. Trong bài viết này mình xin hướng dẫn 2 cách đơn giản để tích hợp chat Zalo vào website WordPress.

Note: Ở bài viết này mình KHÔNG đề cập đến cách nhúng Zalo vào website nhé. Nó giống như một widget to bên phải màn hình để bạn chat trực tiếp với khách trên website. Nếu đó là điều bạn đang tìm kiếm thì có thể tham khảo cách làm từ trang chính thức của Zalo tại đây.

Tuy tiêu đề bài viết là tích hợp chat Zalo vào website tuy nhiên ở đây bạn có thể tích hợp bao nhiêu nền tảng bạn thích như chat Facebook Messenger hay cuộc gọi. Vì vậy yêu cầu của mình ở đây là:

• Hỗ trợ nhiều nền tảng: Cuộc gọi, Zalo, Facebook, Viber, Skype…
• Phải đẹp, bắt mắt mới thu hút khách hàng click vào được
• Dễ tùy biến theo ý thích

Và mình sẽ làm điều đó theo 1 trong 2 cách sau: bằng code chèn vào footer và bằng plugin.

Tích hợp chat Zalo vào website bằng code.

Nghe nói code thì có bạn thấy hơi ngán. Tuy nhiên đây chỉ là việc copy – paste thôi nên không có gì phải lo cả. Tất nhiên là chèn 1 đoạn code ngắn thì tốt hơn rất nhiều so với việc làm bằng plugin. Tất cả những gì bạn cần làm là dán đoạn mã sau vào file footer.php trong folder theme của bạn trước thẻ đóng </body>:

<div class="call-mobile2">
<a data-animate="fadeInDown" href="https://zalo.me/0903999690" target="_blank" class="button success1" style="border-radius:99px;" data-animated="true">
<span>Chat Zalo </span></a>
</div>

<div class="call-mobile1">
<a data-animate="fadeInDown" href="https://www.facebook.com/stanleydang88" target="_blank" class="button success2" style="border-radius:99px;" data-animated="true">
<span>Chat Facebook</span></a>
</div>

<div class="call-mobile">
<a id="callnowbutton" href="https://mosmmo.com/chat-zalo-website/tel:0903999690">Gọi 0903 999 690</a>
</div>

<style>
.success1.is-underline:hover, .success1.is-outline:hover, .success1 {
background-color: #1E73BE;
padding: 0 5px;
color: white !important;
}
.success2.is-underline:hover, .success2.is-outline:hover, .success2 {
background-color: #ff4800;
padding: 0 5px;
color: white !important;
}
.call-mobile {
background: #00a63f;
position: fixed;
bottom: 10px;
height: 40px;
line-height 40px;
padding: 7px 0px 0 0px;
border-radius: 40px;
color: #fff;
left: 20px;
z-index: 99999;
}
.call-mobile1 {
position: fixed;
bottom: 55px;
height: 40px;
line-height: 40px;
padding: 0 0px 0 0px;
border-radius: 40px;
color: #fff;
left: 20px;
z-index: 99999;
}
.call-mobile2 {
position: fixed;
bottom: 100px;
height: 40px;
line-height: 40px;
padding: 0 0px 0 0px;
border-radius: 40px;
color: #fff;
left: 20px;
z-index: 99999;
}
.call-mobile i {
font-size: 20px;
line-height: 40px;
background: #B52026;
border-radius: 100%;
width: 40px;
height: 40px;
text-align: center; 
float: right;
}
.call-mobile a {
color: #fff;
font-size: 15px;
font-weight: bold; 
text-decoration: none;
margin-right: 10px; 
padding-left: 10px;}
.button span {
text-transform: initial;
font-weight: 400;
font-family: poppins;
}
a#callnowbutton {
font-family: poppins;
font-weight: 400;
}
</style>

Đoạn code trên sẽ hiểu thị nút gọi, chat Zalo và Facebook. Nhớ thay số điện thoại nhận cuộc gọi, số điện thoại Zalo và URL Facebook bằng giá trị của bạn. Và đây là kết quả:

Bạn cũng có thể thay đổi màu nền cho các nút. Hay thêm bớt các thành phần khác theo ý thích của mình.

Tích hợp chat Zalo vào website WordPress bằng plugin.

Nếu bạn muốn tích hợp nhiều nền tảng hơn nữa nhưng lại không rành về code. Hay bạn muốn có các hiệu ứng gợn sóng chẳng hạn thì plugin sau sẽ giúp bạn. Plugin này có tên là All in One Support Button + được bán với giá $19 trên codecanyon.net. Nếu chưa có tiền mua thì bạn có thể tải về dùng thử tại đây.

Sau khi cài đặt và kích hoạt plugin bạn vào Dashboard > Callbacks > Menu items > nhấn vào nút Add để thêm các nút. Sau đó nhấn Edit để sửa. Nếu đã hài lòng bạn nhấn vào chữ No màu xám trong cột Active để nó chuyển thành Yes màu xanh.

Và đây là kết quả:

Còn 1 cách nữa là tích hợp công cụ của 1 bên thứ 3 mình sẽ giới thiệu ở 1 bài viết khác.

Như vậy là mình vừa hướng dẫn 2 cách tích hợp chat Zalo vào website WordPress một cách nhanh chóng và đẹp mắt.

Chúc bạn thành công!