Nội dung

Chèn nút gọi cho website

5 năm trước, Code website hay dùng, 4356 Lượt xem

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

 

 

Bài viết mới cập nhập

  • Hướng dẫn Plugin floating contact

    Hướng dẫn Plugin floating contact

    1 năm trước, 440 Lượt xem

    Netweb xin hướng dẫn cách quản lý Plugin floating contact các bạn nhớ làm theo kỹ tường bước để plugin hoạt động Tính năng: Hiển…

  • Backup Yandex Mail

    Backup Yandex Mail

    2 năm trước, 286 Lượt xem

    Khác với dịch vụ email theo tên của microsoft và google với chi phí đắt đỏ tầm 1tr/năm/1user, vì thế nên netweb khuyên dùng dịch…

Bình luận trên facebook netweb.vn

Gọi netweb Báo giá web Chát Zalo
Chủ đề liên quan theo Tag
, , ,

Đam mê thiết kế web, kinh nghiệm 9 năm trong nghề thiết kế website, đang thiết kế web dạo tại netweb.vn, Callme: 08.9898.2526 (Mr Hải)