Bán nhiều hàng hơn với nút chat Zalo, Facebook và cuộc gọi

Nói là làm website / viết blog bằng WordPress không cần biết code chứ nếu bạn muốn như ý không phải là dễ. Nhất là mấy bạn cầu toàn.

Cách đây 3 năm, mình đã từng nằm dưới nền nhà cả đêm để mày mò trong bóng tối. Nhớ mãi! Mà cái quan trọng là không biết hỏi ai. Lên mạng viết mail hỏi thì họ không thèm trả lời.

Giờ thì có nhiều khóa học WordPress lắm. Hơn nữa còn được support nhiệt tình trong group. Chỉ lo không có ý tưởng thôi chứ không sợ không biết làm nữa.

Giờ thay vì mày mò về kỹ thuật thì nên dành thời gian cho content thì mới nhanh kiếm tiền được. Chứ người ta chạy cả cây số rồi giờ mình mới mặc quần áo thì chừng nào mới tới. Đó là những gì mà mình đã từng trải qua!

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.

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="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ả:

tích hợp chat zalo vào website code kq

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.

tích hợp chat zalo vào website plugin

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

tích hợp chat zalo vào website plugin kq

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!

guest
0 Comments
Inline Feedbacks
View all comments
Scroll to Top