[TT] Chèn nút liên hệ và chat facebook, zalo vào website

Khi bạn thiết kế và phát triển một trang website, việc chèn các nút liên hệ và chat trực tiếp như Messenger và Zalo có thể giúp tương tác với khách hàng dễ dàng hơn. Việc này không chỉ tạo ra một trải nghiệm người dùng tốt hơn, mà còn giúp tăng cơ hội chuyển đổi khách hàng.

Dưới đây là hướng dẫn đơn giản để chèn nút liên hệ và chat Facebook, Zalo vào trang web của bạn do Topmeovat đã thực hiện và chia sẽ.

Bước 1: Chèn đoạn mã HTML này trong phần footer

<div class="fix_tel">
 <div class="ring-alo-phone ring-alo-green ring-alo-show" id="ring-alo-phoneIcon">
 <div class="ring-alo-ph-circle"></div>
<div class="ring-alo-ph-circle-fill">
</div>
 <div class="ring-alo-ph-img-circle">
<a href="tel:0836122268"><img class="lazy" src="link-hinh"/></a>
</div>
</div>
<div class="tel">
<p class="fone">Số điện thoại</p>
</div>
</div>
<div class="social-button">
<div class="social-button-content">
<a href="link-zalo" target="_blank" class="zalo"><img src="link-hình icon" alt="Chat Zalo"></a>
<a href="link-mess" target="blank"><img src="link-hình icon" alt="Chat Mess"></a>
</div>
</div>

Lưu ý: các chữ in đậm màu đỏ các bạn thay nội dung hoặc link hình cho phù hợp

Bước 2: Hãy CSS một chút cho nó bắt mắt nhé

<style>
.mes img, .zalo img {
width:44px;
}
.social-button{
display:inline-flex;
position:fixed;
background-color:rgba(255,255,255,0) !important;
bottom:125px;
right:0px;
min-width:70px;
text-align:center;
z-index:99999;
align-content:center;
justify-content:center;
align-items:center;
justify-items:center;
}
.social-button-content{
display: inline-flex;
flex-direction: column;
flex-wrap: nowrap;
align-content: center;
justify-content: center;
align-items: center;
}
.social-button a {
padding:5px 0;
cursor: pointer;
position: relative;
}
.social-button i{
width: 40px;
height: 40px;
background: #F05A5E;
color: #fff;
border-radius: 100%;
font-size: 20px;
text-align: center;
line-height: 1.9;
position: relative;
z-index: 999;
}
.social-button span{
display: none;
}
.mes:hover > span, .zalo:hover > span{
display: block
}
.social-button a span {
border-radius: 2px;
text-align: center;
background: #ffffff;
padding: 9px;
display: none;
width: 180px;
margin-right: 10px;
position: absolute;
color: #ffffff;
z-index: 999;
top: 9px;
right: 20px;
}
</style>

Các bạn hoàn toàn có thể tùy biến code theo mẫu để thêm hoặc bớt các nút bấm theo nhu cầu sử dụng. Không quá phức tạp phải không nào? Chúc các bạn thành công!