Thêm nút gọi điện trên mobile cho website

Hướng dẫn này sẽ giúp các bạn thêm nút gọi điện trên di động để tăng CR cũng như UX cho website.

Sau khi hoàn thành, khi khách hàng duyệt website của bạn trên di động, nút gọi điện sẽ xuất hiện khi người dùng cuộn lên trên. Tức là khi người dùng đang đọc bài viết trên website của bạn ( cuộn xuống ) nút gọi điện sẽ bị ẩn để không làm phiền họ. Khi khách hàng đọc xong và muốn cuộn lên trở về bài trước hoặc tìm số điện thoại, nút gọi sẽ xuất hiện.

Nếu các bạn cần nút gọi luôn hiển thị, bạn có thể dùng thay thế bằng một code khác được chúng tôi đăng tải ở cuối bài viết.

Đầu tiên các bạn thêm đoạn code sau vào VietMoz Theme Options > Header & Footer > Cài đặt Header > Chèn vào Mã code ở footer:

<script type="text/javascript">
 jQuery(function($) {
 $('body').append('<a style="display:none;" class="callus" href="tel:0988303068">0988.3030.68</a>');
 var lastScrollTop = 0;
 $(window).scroll(function(event){
 var st = $(this).scrollTop();
 if (st > lastScrollTop){
 // downscroll code
 $('a.callus').removeClass('display');
 } else {
 $('a.callus').addClass('display');
 }
 lastScrollTop = st;
 });
 });
</script>

<style type="text/css" media="screen and (max-width:767px)">
 a.callus {
 display: block !important;
 position: fixed;
 z-index: 9999;
 bottom: 20px;
 left: 20px;
 background: #0089d0 url(http://statics.vietmoz.info/img/ico/glyphicons/earphone-white.png) no-repeat;
 background-position: 10px center;
 background-size: 20px;
 border-radius: 1000px;
 padding: 5px 10px 5px 40px;
 font-weight: 700;
 font-size: 18px;
 line-height: 30px;
 color: #fff;
 -webkit-transition: all 0.3s ease-in-out;
 -moz-transition: all 0.3s ease-in-out;
 -ms-transition: all 0.3s ease-in-out;
 -o-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
 -moz-transform: scale(0);
 -webkit-transform: scale(0);
 -o-transform: scale(0);
 -ms-transform: scale(0);
 transform: scale(0);
 }
 a.display.callus {
 -webkit-transition: all 0.3s ease-in-out;
 -moz-transition: all 0.3s ease-in-out;
 -ms-transition: all 0.3s ease-in-out;
 -o-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
 -moz-transform: scale(1);
 -webkit-transform: scale(1);
 -o-transform: scale(1);
 -ms-transform: scale(1);
 transform: scale(1);
 }
</style>

Các bạn để ý chỉnh sửa dòng sau đây bằng thông tin của các bạn (dòng thứ 3 từ trên xuống trong đoạn mã trên)

$('body').append('<a class="callus" href="tel:0988303068">0988.3030.68</a>');

Cấu trúc như sau

$('body').append('<a class="callus" href="tel:số-điện-thoại">Số hiển thị</a>');

Trong đó:

  • số-điện-thoại: Điền số điện thoại của bạn muốn được gọi đến, viết liền không có khoảng trắng hay dấu gạch ngang
  • Số hiển thị: Bạn có thể điền số của điện thoại kèm dấu chấm/gạch ngang cho dễ nhìn hoặc điền text ( Ví dụ: Call us! )

 

Code luôn hiển thị nút gọi:

<script type="text/javascript">
 jQuery(function($) {
 $('body').append('<a style="display:none;" class="callus" href="tel:0988303068">0988.3030.68</a>');
 });
</script>

<style type="text/css" media="screen and (max-width:767px)">
 a.callus {
 display: block !important;
 position: fixed;
 z-index: 9999;
 bottom: 20px;
 left: 20px;
 background: #0089d0 url(http://statics.vietmoz.info/img/ico/glyphicons/earphone-white.png) no-repeat;
 background-position: 10px center;
 background-size: 20px;
 border-radius: 1000px;
 padding: 5px 10px 5px 40px;
 font-weight: 700;
 font-size: 18px;
 line-height: 30px;
 color: #fff;
 }
</style>

Trong trường hợp bạn không dùng giao diện của VietMoz, bạn có thể chèn đoạn này vào cuối của file functions.php trong theme. Lưu ý nếu file functions.php của bạn có dấu ?> ở cuối file, bạn cần xoá dấu này trước khi dán đoạn code bên dưới.

function vietmoz_call_button() { ?>
<script type="text/javascript">
 jQuery(function($) {
 $('body').append('<a style="display:none;" class="callus" href="tel:0988303068">0988.3030.68</a>');
 });
</script>

<style type="text/css" media="screen and (max-width:767px)">
 a.callus {
 display: block !important;
 position: fixed;
 z-index: 9999;
 bottom: 20px;
 left: 20px;
 background: #0089d0 url(http://statics.vietmoz.info/img/ico/glyphicons/earphone-white.png) no-repeat;
 background-position: 10px center;
 background-size: 20px;
 border-radius: 1000px;
 padding: 5px 10px 5px 40px;
 font-weight: 700;
 font-size: 18px;
 line-height: 30px;
 color: #fff;
 }
</style>
<?php }
add_action( 'wp_footer', 'vietmoz_call_button', 99 );