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

05/02/2021
Plugin Zalo WordPress

Bạn muốn kiếm tiền online nhưng chưa nên biết bắt đầu từ đâu? Hãy cho mình biết nghề nghiệp và mong ước hiện tại của bạn. Bạn sẽ nhận được tư vấn miễn phí gửi qua email sau 30 giây.

Note: Kéo xuống dưới để đọc nội dung bài viết nha!

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.

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 tạo nút gọi trên website WordPress.

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 quanh nút gọi 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.

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!

309201cookie-checkBán nhiều hàng hơn với nút chat Zalo, Facebook và cuộc gọi.

Hi! Mình tên là Quân, mình viết blog này khi rảnh rỗi. Là người khá hài hước và ham học hỏi, mình muốn ghi chép lại những gì đã học được. Bạn có muốn biết mình đang học những gì tại KTcity, nhấn vào đây nhé! Muốn mời mình ly cafe? Nhấn vào đây nhé!

Có thể bạn quan tâm

Bình luận

Your email address will not be published. Required fields are marked

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}