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

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ợ.