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

Day
Night

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. Vì vậy nếu bạn mới mày mò viết blog kiếm tiền thì nên tranh thủ học về WordPress càng nhanh càng tốt. Và một trong những khóa học như vậy là của Duy trên KTcity. Thay vì mày mò kỹ thuật thì bạn nên dành thời gian đó để sáng tạo content thì mới nhanh kiếm tiền được. Chúc bạn thành công!

khoa hoc crypto 101

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="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.

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!

Bình luận

Email của bạn sẽ được bảo mật. Mục có dấu * là bắt buộc.

Scroll to Top