Để đáp ứng nhu cầu tương tác giữa người dùng với website của bạn. Một cách để thể hiện sự quan tâm của bạn đối với khách hàng chính là có thể trả lời những vướng mắc thông qua hình thức hỗ trợ trực tuyến.

Hôm nay Zota xin giới thiệu công cụ hỗ trợ trực tuyến sẽ giúp website của bạn trở nên chuyên nghiệp hơn rất nhiều.

Để tích hợp bộ công cụ lên website bạn cần thêm những dòng code vào những file sau:

Chèn đoạn mã chat vào file footer.php trên hàm <?php wp_footer(); ?>

<div class=”support-online”>
<div class=”support-content”>
<a href=”tel:0988428211” class=”call-now” rel=”nofollow”>
<i class=”fa fa-whatsapp” aria-hidden=”true”></i>
<div class=”animated infinite zoomIn kenit-alo-circle”></div>
<div class=”animated infinite pulse kenit-alo-circle-fill”></div>
<span>Hotline:0988428211</span>
</a>
<a class=”mes” href=”https://m.me/truyenthongthienvan“>
<i class=”fa fa-facebook-official” aria-hidden=”true”></i>
<span>Nhắn tin facebook</span>
</a>
<a class=”zalo” href=”http://zalo.me/0988428211“>
<i class=”fa fa-comments”></i>
<span>Zalo: 0988428211</span>
</a>
<a class=”sms” href=”sms:0988428211“>
<i class=”fa fa-weixin” aria-hidden=”true”></i>
<span>SMS:0988428211</span>
</a>
</div>
<a class=”btn-support”>
<div class=”animated infinite zoomIn kenit-alo-circle”></div>
<div class=”animated infinite pulse kenit-alo-circle-fill”></div>
<i class=”fa fa-user-circle” aria-hidden=”true”></i>
</a>
</div>

Lưu ý: thay đoạn màu đỏ, thành thông tin của các bạn!

Tiếp theo bạn chèn đoạn js xử lý ẩn hiện khung chat, nếu bạn đang dùng theme do Zota phát triển thì bạn add đoạn trên vào file custom.js trong thư mục assets/js

$(document).ready(function(){
$(‘.support-content’).hide();
$(‘a.btn-support’).click(function(e){
e.stopPropagation();
$(‘.support-content’).slideToggle();
});
$(‘.support-content’).click(function(e){
e.stopPropagation();
});
$(document).click(function(){
$(‘.support-content’).slideUp();
});
});

Còn nếu bạn đang sử dụng theme khác, các bạn có thể chèn đoạn trên trong cặp thẻ <script></script> sau đó chèn vào cuối file footer.php

Và cuối cùng trang trí khung cho nó đẹp xíu, các bạn chèn đoạn sau vào file style.css

.support-online { position: fixed; z-index: 999; left: 0; bottom: 0px; }
.support-online a { position: relative; margin: 20px 10px; text-align: left; width: 40px; height: 40px; }
.support-online i { width: 40px; height: 40px; background: #43a1f3; color: #fff; border-radius: 100%; font-size: 20px; text-align: center; line-height: 1.9; position: relative; z-index: 999; }
.support-online a span { border-radius: 2px; text-align: center; background: rgb(103, 182, 52); padding: 9px; display: none; width: 180px; margin-left: 10px; position: absolute; color: #ffffff; z-index: 999; top: 0px; left: 40px; transition: all 0.2s ease-in-out 0s; -moz-animation: headerAnimation 0.7s 1; -webkit-animation: headerAnimation 0.7s 1; -o-animation: headerAnimation 0.7s 1; animation: headerAnimation 0.7s 1; }
.support-online a:hover span { display: block; }
.support-online a { display: block; }
.support-online a span:before { content: “”; width: 0; height: 0; border-style: solid; border-width: 10px 10px 10px 0; border-color: transparent rgb(103, 182, 52) transparent transparent; position: absolute; left: -10px; top: 10px; }
.kenit-alo-circle-fill { width: 60px; height: 60px; top: -10px; position: absolute; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; border: 2px solid transparent; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s; background-color: rgba(0, 175, 242, 0.5); opacity: .75; right: -10px; }
.kenit-alo-circle { width: 50px; height: 50px; top: -5px; right: -5px; position: absolute; background-color: transparent; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; border: 2px solid rgba(30, 30, 30, 0.4); opacity: .1; border-color: #0089B9; opacity: .5; }
.support-online .btn-support { cursor: pointer; }

Ngoài ra nếu theme của bạn chưa tích hợp thư viện font-awesome và animate thì các bạn có thể nhúng 2 dòng code sau vào file header.php

<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css”>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css”>

Đây là hình ảnh sau khi các bạn đã add xong! Chúc các bạn thành công, và tương tác với khách hàng tốt!