Hướng dẫn tạo nút gọi, chat Zalo và chat Facebook cho website


Hướng dẫn tạo nút gọi, chat Zalo và chat Facebook cho website

6 Likes Comment

Hiện nay nhu cầu tích hợp nút chát và gọi điện trên website là rất cần thiết để tương tác với khách hàng tốt hơn. Vậy nên mình xin hướng dẫn các bạn tích hợp các tiện ích chát và gọi điện cho website như sau:
Đầu tiên tìm file footer.php copy đoạn mã này vào

<div class="hotline-home-left">
<ul>
<a href="http://zaloapp.com/qr/p/afdsti8lst2f" rel="noopener">
<i class="fa fa-comments" aria-hidden="true"></i>Zalo<p></p>
</a>
<a href="https://m.me/letuhtdotcom" rel="noopener">
<i class="fa fa-facebook-square" aria-hidden="true"></i>Facebook<p></p>
</a>
<a href="tel:0329447471" rel="noopener">
<i class="fa fa-phone-square" aria-hidden="true"></i>0329 447 471<p></p>
</a></ul>
</div>

Sau đó tìm đến file style.css rồi thêm đoạn mã css này vào

.hotline-home-left {
    position: fixed;
    left: 6px;
    bottom: 0px;
    z-index: 999999;
}
.hotline-home-left ul a:nth-child(1) {
    background-color: #0099f8;
    width: 100px;
}
.hotline-home-left ul a {
    list-style: disc;
    background: #d33;
    margin-left: 0px;
    margin-right: 5px;
    padding: 0px 0px;
    color: #fff;
    font-size: 1em;
    font-weight: bold;
    border-radius: 20px;
    width: 155px;
    display: block;
    margin-top: 3px;
    border: 0px solid #fff;
}
.hotline-home-left ul i {
    margin-right: 5px;
    font-size: 20px;
    background: #ffffff;
    padding: 7px;
    width: 34px;
    border-radius: 20px;
    margin-bottom: 2px;
    margin-top: 2px;
    margin-left: 2px;
    color: #d33;
}
.hotline-home-left ul a:nth-child(2) {
    background-color: #486ba3;
    width: 130px;
}

Như vậy là xong giờ lưu lại và tận hưởng kết quả thôi.
Link demo cho các bạn tham khảo trước: thucphamchucnang.hatinhweb.com
Nếu bạn không làm được thì có thể comment nếu hỗ trợ được mình sẽ hỗ trợ.

 

 

Bài viết liên quan

Chủ bút: Lê Tú

Blog mình lập ra nhằm mục đích viết lại những gì mình đã tìm hiểu, đã đọc được trên mạng, qua bạn bè để mai mốt cần tìm khỏi quên, cũng như chia sẻ những thứ mà mình đã sưu tầm được. Vì mình không phải chuyên lập trình website nên một số bài viết còn sai sót mong mọi người góp ý.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *