Cấp bậc tác giả:

HTML

Tạo bộ công cụ hỗ trợ trực tuyến đẹp mắt

Được viết bởi webmaster ngày 17/12/2017 lúc 11:08 PM
Để đá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.
  • 0
  • 1062
loading...

Tạo bộ công cụ hỗ trợ trực tuyến đẹp mắt

Loading...

Giao diện trang Web sẽ trông như thế này

tao-bo-cong-cu-ho-tro-truc-tuyen-da-dang-dep-mat.png

Để đá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 Tôi 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ã này vào cuối trang Web:

<div class="support-online">
    <div class="support-content">
        <a href="tel:0868917786" 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: 08689.17786</span> </a><a class="mes" href="https://m.me/chodua.vn"><i
                class="fa fa-facebook-official" aria-hidden="true"></i><span>Nhắn tin facebook</span>
            </a><a class="zalo" href="http://zalo.me/0905042112"><i class="fa fa-comments"></i>
                <span>Zalo: 0905.042.112</span> </a><a class="sms" href="sms:0868917786"><i class="fa fa-weixin"
                    aria-hidden="true"></i><span>SMS: 08689.17786</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>

Sau đó chèn đoạn Script này vào để kích hoạt các sự kiện
<script>
    $(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();
        });
    });
</script>

Giờ thì làm giao diện trở nên lung linh hơn:
<style>
    .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; }
</style>   

Nếu thiếu icon thì thêm css font này vào để đẹp
<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">

Nguồn bài viết: Sưu tầm

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

Loading...

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML