Chèn nút gọi cho website

Sau đây netweb sẽ hướng dẫn các bạn chèn nút gọi đơn giản ngay trên mobile, mà bất cứ website nào cũng cài đặt được.

 

Tấ cả bạn có thể copy vào phần header của web dang dùng nhé, bạn có thể chèn chũng css và html vào chung 1 chỗ hoặc tách riêng ra

Đoạn mã html.

<a href="tel:0898982526" title="Gọi 0898982526" onclick="_gaq.push(['_trackEvent', 'Contact', 'Call Now Button', 'Phone']);" id="floating-phone">

<i class="uk-icon-phone"></i></a>

Đoạn mã css

<style>

#floating-phone { display: none; position: fixed; left: 10px; bottom: 10px; height: 50px; width: 50px; background: #46C11E url(https://callnowbutton.com/phone/callbutton01.png) center / 30px no-repeat; z-index: 99; color: #FFF; font-size: 35px; line-height: 55px; text- align: center; border-radius: 50%; -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.5); -moz-box-shadow: 0 2px 5px rgba(0,0,0,.5); box-shadow: 0 2px 5px rgba(0,0,0,.5); }

@media (max-width: 650px) { #floating-phone { display: block; } }

</style>

Trong đó bạn chỉ cần sửa số điện thoại 089898XXXXX thành số điện thoại của mình là được. Nguyên tắc hoạt động cũng khá dễ hiểu, nếu chiều ngang của trình duyệt lớn hơn 650px (ở đoạn code max-width:650px) thì nút Call sẽ ẩn đi, vì nó sẽ coi như là đang xem trên desktop. Còn nếu chiều ngang của trình duyệt nhỏ hơn 650px, website sẽ xem như bạn đang duyệt web bằng điện thoại và cho nút Call cho website sẽ hiện ra.

Hình ảnh sau khi setup xong

 

Code nút gọi: http://toyota-gialai.net/

<link rel=”stylesheet” href=”https://use.fontawesome.com/releases/v5.0.13/css/all.css” integrity=”sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp” crossorigin=”anonymous”>

<style>
.call-now {
    left: 0;
    bottom: 25px;
    height: 50px;
    min-width: 200px;
    position: fixed;
    background-color: #e31d1a;
    border-radius: 0 25px 25px 0;
    box-shadow: 0 1px 2px rgba(0,0,0,.8);
    z-index: 998;
}
	
.call-now .btn-call-now i {
    position: absolute;
    color: #e31d1a;
    background-color: #fff;
    font-size: 35px;
    right: 0;
    height: 50px;
    width: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 50%;
    border: 1px solid #e31d1a;
}
	
.call-now .btn-call-now p {
    color: #fff;
    font-size: 14px;
    min-width: 150px;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
}
	.call-now .btn-call-now strong {
    display: block;
    font-size: 18px;
}

.fa-phone:before {
    content: "\f095";
    font-size: 28px !important;
}	
</style>

<div class="call-now" data-toggle="popover" data-trigger="hover" data-html="true" data-placement="top" title="" data-content="<p>Chúng tôi luôn sẵn sàng Tư vấn - Giải đáp mọi thắc mắc của Quý khách.</p><p>Hoạt động 24/7 - Tất cả các ngày trong tuần, kể cả ngày lễ.</p>" data-original-title="Đường dây nóng">
    <a class="btn-call-now" href="tel:090 25 25 260" onclick="ga('send', 'event', 'Call tracking', 'Click to call', 'Phone in mobile');">
        <i class="fa fa-phone" aria-hidden="true"></i>
        <p>Tư vấn miễn phí (24/7) <strong>090 25 25 260</strong></p>
    </a>
</div>

 

Nút gọi cho ttclandsaigon.com

Html

<div class="phone-contact">               
          
              <img src=" http://ttclandsaigon.com/wp-content/uploads/2018/06/ico-phone.png" alt="Alternate Text" class="btnphone">
                                    <a href="tel:0908526727"><strong>0908 526 727</strong> </a>
                  
</div>

Css

@media only screen and (max-width: 480px){
.phone-contact strong {
    font-size: 26px !important;
    padding-left: 10px;
    color: #00aeef;
}
}



img.btnphone {}
.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto;
}

.phone-contact {
    display: inline-block;
    bottom: 30px;
    position: fixed;
    right: 60px;
    z-index: 9999 !important;
}

.phone-contact strong {
    font-size: 35px;
    padding-left: 10px;
    color: #00aeef;
}

 

 

Chèn nút gọi cho website
5 (100%) 8 votes

Bình luận của bạn

Hãy trở thành người đầu tiên bình luận!

avatar
wpDiscuz