Hướng dẫn thêm nút Gọi điện thoại vào web Blog

Việc có thêm nút gọi điện thoại trên website sẽ giúp cho bạn tăng tỷ lệ chuyển đổi từ việc xem sản phẩm đến việc liên hệ để hỏi thông tin sản phẩm, cũng như tư vấn và cuối cùng là mua hàng. Chỉ cần nhấp vào nút gọi là khách hàng có thể liên hệ ngay với bạn qua số điện thoại, gọi trực tiếp bằng số điện thoại hoặc qua Zalo, Messenger hay 1 ứng dụng gọi điện miễn phí mà khách hàng đang cài đặt trên điện thoại của mình.

Trong bài viết này mình sẽ hướng dẫn cho các bạn thực hiện, chỉ cần thêm đoạn code bên dưới, thay số điện thoại bạn muốn là website của bạn đã có thể có tính năng này

Đầu tiên các bạn vào phần quản trị của Blog bằng cách vào Chủ đề > Chỉnh sửa HTML, sau đó các bạn nhấp Ctrl + F trên các đoạn COde để mở chức năng tìm kiếm và tìm đến thẻ </body> và thêm đoạn css sau trước thẻ </body> nhé

+ Hiển thị nút gọi trên máy tính và điện thoại

<!-- Start Quick Buttons By nguyenxuanngoc.com -->

   <div class='quick-call-button'></div>

   <div class='call-now-button'>

    <div><p class='call-text'><a href='tel:0916063032' title='Liên Hệ Chúng Tôi' > Liên Hệ Chúng Tôi </a></p>

     <a href='tel:0916063032' title='Liên Hệ Chúng Tôi' >

     <div class='quick-alo-ph-circle'></div>

                    <div class='quick-alo-ph-circle-fill'></div>

                    <div class='quick-alo-ph-btn-icon quick-alo-phone-img-circle'></div>

     </a>

    </div>

   </div>

     <style>

    @media screen and (max-width: 1920px) {

    .call-now-button { display: flex !important; background: #d818db; }

    .quick-call-button { display: block !important; }

    }

                @media screen and (min-width: px) {

    .call-now-button .call-text { display: none !important; }

    }

    @media screen and (max-width: 1024px) {

    .call-now-button .call-text { display: none !important; }

    }

    .call-now-button { top: 80%; }

    .call-now-button { left: 3%; }

    .call-now-button { background: #d818db; }

    .quick-alo-ph-btn-icon { background-color: #ffffff !important; }

    .call-now-button .call-text { color: #fff; }

   </style>

   <!-- /End Quick Buttons By nguyenxuanngoc.com -->

<link rel='stylesheet' id='lv_css-css'  href='https://cdn.jsdelivr.net/gh/hongblogger/2019@master/quick-call-button-hong.css' type='text/css' media='all' />

<!--nut goi nguyenxuanngoc.com-->   

 Lưu ý : Các bạn sau đó thay SỐ ĐIỆN THOẠI CỦA MÌNH vào số điện thoại mặc định ở trên nhé.