Ngày nay thì người sử dụng điện thoại truy cập vào website chiếm 2/3 tổng lượng người dùng do vậy để giúp cho khách hàng nhanh chóng liên hệ mà không cần phải ghi nhớ số điện thoại ,zalo, facebook, sms thì chúng ta nên tích hợp các nút này ngay dưới chân trang cho tiện sử dụng
Ngoài việc tiện lợi và nhanh chóng thì các nút này còn là cách đo lường được hành động của khách hàng khi vào website hay còn gọi là chuyển đổi khách hàng tiềm năng thành khách hàng khi chúng ta chạy quảng cáo, biết được bao nhiêu người đã truy cập vào website, tỉ lệ click vào các nút là bao nhiêu từ đó tối ưu hoá được quảng cáo, từ đó tăng giảm chi phí quảng cáo cho mỗi khách hàng
Với nền tảng wordpress thì chúng ta có thể dễ dàng chèn các đoạn code có sẵn -chỉ việc thay đổi các số điện thoại, zalo, facebook sao cho phù hợp với doanh nghiệp của mình, có thể chèn vào footer của trang hoặc cài plugin insert header and footer rồi vào phần setting (cài đặt) để chèn đoạn mã code này vào và sửa
Xem video hướng dẫn:
Các bạn có thể lấy đoạn code đó ở đây:
<style>
.bottom-contact{display:none}
@media (max-width: 767px) {
.bottom-contact{display: block;
position: fixed;
bottom: 0;
background: white;
width: 100%;
z-index: 99;
box-shadow: 2px 1px 9px #dedede;
border-top: 1px solid #eaeaea;}
.bottom-contact ul li{width: 25%;
float: left;
list-style: none;
text-align: center; font-size:13.5px;}
.bottom-contact ul li span{color:black}
.bottom-contact ul li img{ width: 35px;
margin-top: 10px;
margin-bottom: 0px;}
}
</style>
<div class=”bottom-contact”>
<ul>
<li>
<a id=”goidien” href=”tel:0819233333″>
<img src=”https://dangquyduong.com/wp-content/uploads/2021/07/icon-phone2.png”/>
<br>
<span>Gọi điện</span>
</a>
</li>
<li>
<a id=”nhantin” href=”sms:0819233333″>
<img src=”https://dangquyduong.com/wp-content/uploads/2021/07/icon-sms2.png”/>
<br>
<span>Nhắn tin</span>
</a>
</li>
<li>
<a id=”chatzalo” href=”http://zaloapp.com/qr/p/3ur778onb9ak”>
<img src=”https://dangquyduong.com/wp-content/uploads/2021/07/icon-zalo2.png”/>
<br>
<span>Chat zalo</span>
</a>
</li>
<li>
<a id=”chatfb” href=”https://www.messenger.com/duongmarketingonline”>
<img src=”https://dangquyduong.com/wp-content/uploads/2021/07/icon-mesenger2.png”/>
<br>
<span>Chat Facebook</span>
</a>
</li>
</ul>
</div>
<style>.float-contact {
position: fixed;
bottom: 20px;
left: 20px;
z-index: 99999;
}
.chat-zalo {
background: #8eb22b;
border-radius: 20px;
padding: 0 18px;
color: white;
display: block;
margin-bottom: 6px;
}
.chat-face {
background: #125c9e;
border-radius: 20px;
padding: 0 18px;
color: white;
display: block;
margin-bottom: 6px;
}
.float-contact .hotline {
background: #d11a59!important;
border-radius: 20px;
padding: 0 18px;
color: white;
display: block;
margin-bottom: 6px;
}
.chat-zalo a, .chat-face a, .hotline a {
font-size: 15px;
color: white;
font-weight: 400;
text-transform: none;
line-height: 0;
}
@media (max-width: 549px){
.float-contact{
display:none
}
}</style>
<div class=”float-contact”>
<button class=”chat-zalo”>
<a href=”http://zalo.me/0819233333″>Chat Zalo</a>
</button>
<button class=”chat-face”>
<a href=”http://m.me/duongmarketingonline”>Chat Facebook</a>
</button>
<button class=”hotline”>
<a href=”tel:0819233333″>Hotline: 08192.33333</a>
</button>
</div>
