Hướng dẫn tích hợp bộ công cụ hỗ trợ trực tuyến trên website

Website của bạn không chỉ đơn giản là một trang báo điện tử cung cấp thông tin đơn thuần cho người đọc. Mà hơn thế nữa, website của bạn sẽ như một con người thực sự và tương tác qua lại với người dùng. 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.

Trong bài này mình xin hướng dẫn các bạn tích hợp công cụ hỗ trợ trực tuyến vào website sẽ giúp website của bạn trở nên chuyên nghiệp hơn rất nhiều.

Demo: https://codepen.io/manhphuc/pen/RjXQQw

Tạo bộ công cụ hỗ trợ trực tuyến lên website

bạn cần thêm những dòng code vào những file sau:

Bước 1: Thêm thư viện vào trong website.

Đầu tiên bạn cần tích hợp thư viện font-awesomeanimate 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">

Bước 2: 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:016.9966.2208" class="call-now" rel="nofollow">
         <i class="fa fa-whatsapp" aria-hidden="true"></i>
         <div class="animated infinite zoomIn manhphuc-alo-circle"></div>
         <div class="animated infinite pulse manhphuc-alo-circle-fill"></div>
         <span>Hotline: 016.9966.2208</span>
      </a>
      <a class="mes" href="https://m.me">
         <i class="fa fa-facebook-official" aria-hidden="true"></i>
         <span>Nhắn tin facebook</span>
      </a>
      <a class="zalo" href="http://zalo.me/016.9966.2208">
         <i class="fa fa-comments"></i>
         <span>Zalo: 016.9966.2208</span>
      </a>
      <a class="sms" href="">
         <i class="fa fa-weixin" aria-hidden="true"></i>
         <span>SMS: 016.9966.2208</span>
      </a>
   </div>
   <a class="btn-support">
      <div class="animated infinite zoomIn manhphuc-alo-circle"></div>
      <div class="animated infinite pulse manhphuc-alo-circle-fill"></div>
      <i class="fa fa-user-circle" aria-hidden="true"></i>
   </a>
</div>

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

Bước 3: Chèn đoạn js xử lý ẩn hiện khung chat vào website của bạn.

 $(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();
    });

});

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

Bước 4: Cuối cùng đi 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;
}

.manhphuc-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;
}

.manhphuc-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;
}

Đây là hình ảnh sau khi hoàn thành! Chúc các bạn thành công và tương tác với khách hàng tốt hơn khi tích hợp công cụ hỗ trợ trực tuyến này!

Bạn có thể tham khảo tại link này: https://codepen.io/manhphuc/pen/RjXQQw

Nếu gặp khó khăn trong khi làm, hãy comment dưới bài viết nếu bạn cần mình hỗ trợ.

  • Bạn viết luôn ra cái plugin luôn cho tiện, chứ Code nhi nhăng quá trời mình không biết rằnh về code nên đọc nhức hết mắt .

    Thích Reply
  • Mình chèn code ok nhưng phần chèn: font-awnsome vào header.php bị lỗi và chèn hiệu ứng ẩn hiện vào thẻ không đúng.Nên công cụ chat không có hiệu ứng chỉ là tĩnh. Mình xài wordpress vào add code đúng như hướng dẫn nhưng không bạn, bạn giúp mình với

    Thích Reply
  • Bạn có thể gửi plguin qua mail hai.goldenant@gmail.com được ko ? cám ơn

    Thích Reply
  • Bạn có thể gởi plugin cho mình được không ạ: dichvumaildn@gmail.com Cảm ơn bạn!

    Thích Reply
  • Đã duyệt

    Thích Reply
  • Bạn có thể cho mình xin plugin qua email vuongphamvan112@gmail.com được không ạ. Rất cảm ơ vì những thông tin bổ ích trong website của bạn mang tới

    Thích 2 Reply

Leave a Reply

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

arrow