Bạn đã bao giờ lướt web trên điện thoại và thấy những nút liên hệ như “Gọi điện”, “Chat Zalo” hay “Chỉ đường” luôn hiện ở dưới cùng màn hình chưa? Đó chính là Contact Bar hay Action button – một công cụ cực kỳ hữu ích giúp khách hàng kết nối với bạn chỉ trong 1 giây.

Trong bài viết này, mình sẽ hướng dẫn các bạn cách tự tay tạo các nút liên hệ nhanh cho website bằng HTML và CSS – Style 2 “xịn xò” này cho website mà không cần phải là chuyên gia lập trình. Cùng bắt đầu nhé!

>> Tham khảo: Code nút liên hệ nhanh bằng HTML và CSS – Style 1

Tại sao website của bạn cần có các nút liên hệ nhanh ?

Khi khách truy cập website, đặc biệt là trên điện thoại, họ thường muốn:

Gọi điện ngay
Nhắn tin nhanh
Xem chỉ đường đến cửa hàng

Nếu phải tìm thông tin liên hệ quá lâu, rất nhiều người sẽ thoát trang ngay lập tức.

Đó là lý do các nút liên hệ nhanh nổi trên màn hình ngày càng được sử dụng nhiều. Chúng giúp khách chỉ cần một chạm là có thể liên hệ với bạn.

Hình minh họa bên dưới để hình dung rõ hơn cách hoạt động của Code các nút liên hệ nhanh cho website bằng HTML và CSS – Style 2

các nút liên hệ nhanh cho website

Code các nút liên hệ nhanh cho website bằng HTML và CSS

Cách tạo các nút liên hệ nhanh cho website cực dễ

Chúng ta sẽ sử dụng phương pháp chèn code đơn giản. Đừng lo, bạn chỉ cần “Copy và Paste” theo đúng hướng dẫn là sẽ thành công 100%.

Đối với theme Flatsome

Bước 1: Truy cập vị trí cần dán code

Bạn đăng nhập vào website, vào Quản trị ==> Flatsome ==> Advanced ==> Global Setting ==> Footer Script copy và paste toàn bộ đoạn code dưới đây vào Footer Script nhé:

<style>
.phone-mobile {display: none;}
.webchuyennghiep247-nav {
position: fixed;
left: 13px;
background: #fff;
border-radius: 5px;
width: auto;
z-index: 150;
bottom: 50px;
padding: 10px 0;
border: 1px solid #f2f2f2;
}
.webchuyennghiep247-nav ul {list-style: none;padding: 0;margin: 0;}
.webchuyennghiep247-nav ul li {list-style: none!important;}
.webchuyennghiep247-nav ul>li a {
border:none;
padding: 3px;
display: block;
border-radius: 5px;
text-align: center;
font-size: 10px;
line-height: 15px;
color: #515151;
font-weight: 700;
max-width: 72.19px;
max-height: 54px;
text-decoration: none;
}
.webchuyennghiep247-nav ul>li .chat_animation{display:none}
.webchuyennghiep247-nav ul>li a i.icon-heart {
background: url(https://cdn.wiki.webchuyennghiep247.com/wp-content/uploads/2025/12/icon-map.png) no-repeat;
background-size: contain;
width: 36px;
height: 36px;
display: block;
}
.webchuyennghiep247-nav ul>li a i.icon-zalo-circle2 {
background: url(https://cdn.wiki.webchuyennghiep247.com/wp-content/uploads/2025/12/icon-zalo.png) no-repeat;
background-size: contain;
width: 36px;
height: 36px;
display: block;
}.webchuyennghiep247-nav li .button {
background: transparent;
}.webchuyennghiep247-nav ul>li a i.icon-angle-up {
background: url(https://cdn.wiki.webchuyennghiep247.com/wp-content/uploads/2025/12/icon-ve-dau-trang.png) no-repeat;
background-size: contain;
width: 36px;
height: 36px;
display: block;
}.webchuyennghiep247-nav ul>li a i {
width: 33px;
height: 33px;
display: block;
margin: auto;
}.webchuyennghiep247-nav ul li .button .btn_phone_txt {
position: relative; top:35px;
font-size: 10px;
font-weight: bold;
text-transform: none;
}
.webchuyennghiep247-nav ul li .button .phone_animation i {
display: inline-block;
width: 27px;
font-size: 26px;
margin-top: 12px;
}.webchuyennghiep247-nav ul>li a.chat_animation svg {
margin: -13px 0 -20px;
}
.webchuyennghiep247-nav ul>li a i.icon-messenger {
background: url(https://cdn.wiki.webchuyennghiep247.com/wp-content/uploads/2025/12/icon-messenger.png) no-repeat;
background-size: contain;
width: 36px;
height: 36px;
display: block;
}.webchuyennghiep247-nav ul li .button .phone_animation i {
display: inline-block;
width: 27px;
font-size: 26px;
margin-top: 12px;
}
.webchuyennghiep247-nav ul>li a i.icon-chat-sms {
background: url(https://cdn.wiki.webchuyennghiep247.com/wp-content/uploads/2025/12/icon-sms.jpg) no-repeat;
background-size: contain;
width: 38px;
height: 36px;
display: block;
}
.webchuyennghiep247-nav ul>li a i.icon-phone-w {
background: url(https://cdn.wiki.webchuyennghiep247.com/wp-content/uploads/2025/12/icon-phone.png) no-repeat;
background-size: contain;}
.webchuyennghiep247-nav ul li .button .btn_phone_txt {
position: relative;
}
@media only screen and (max-width: 600px){
.webchuyennghiep247-nav li .chat_animation{display:block !Important}

.webchuyennghiep247-nav li .button .phone_animation {box-shadow: none;
position: absolute;
top: -16px;
left: 50%;
transform: translate(-50%,0);
width: 50px;
height: 50px;
border-radius: 100%;
background: #6cb917;
line-height: 15px;
border: 2px solid white;
}
.webchuyennghiep247-nav ul>li a{padding:0; margin:0 auto}
.webchuyennghiep247-nav {
background: white;
width: 100%; border-radius:0;
color: #fff;
height: 60px;
line-height: 50px;
position: fixed;
bottom: 0;
left: 0;
z-index: 999;
padding: 5px;
margin: 0;
box-shadow: 0 4px 10px 0 #000;
}
.webchuyennghiep247-nav li {
float: left;
width: 20%;
list-style: none;
height: 50px;
}
.phone-mobile{display:block !important}}
</style>
<div class="webchuyennghiep247-nav">
<ul>
<li><a href="https://maps.app.goo.gl/tdz1jCUESFUz4KzB7" rel="nofollow" target="_blank"><i class="icon-heart"></i>Tìm đường</a></li>
<li><a href="https://zalo.me/0977246679" rel="nofollow" target="_blank"><i class="icon-zalo-circle2"></i>Chat Zalo</a></li>
<li class="phone-mobile">
<a href="tel:0977246679" rel="nofollow" class="button">
<span class="phone_animation animation-shadow">
<i class="icon-phone-w" aria-hidden="true"></i>
</span>
<span class="btn_phone_txt">Gọi điện</span>
</a>
</li>
<li><a href="messenger.com/t/webchuyennghiep247" rel="nofollow" target="_blank"><i class="icon-messenger"></i>Messenger</a></li>
<li><a href="sms:0977246679" class="chat_animation">
<i class="icon-chat-sms" aria-hidden="true" title="Nhắn tin sms"></i>
Nhắn tin SMS</a>
</li>
<li class="to-top-pc">
<a href="#" rel="nofollow">
<i class="icon-angle-up" aria-hidden="true" title="Quay lên trên"></i>
</a>
</li>
</ul>
</div>

Bước 2: Thay thế, chỉnh sửa thông tin cần thiết

Bạn tải các ảnh icon về máy tính rồi upload lên host, lấy url link ảnh để thay thế vào các link ảnh của wiki.webchuyennghiep247.com nha

link ảnh các vị trí cần thay

Lưu ý:

Thay https://maps.app.goo.gl/... bằng link map cửa hàng của bạn
Thay 0977246679 bằng số điện thoại của bạn.
Thay www.messenger.com/t/webchuyennghiep247 bằng link chat messenger của bạn

Vị trí thay thông tin liên hệ của bạn

Bước 4: Lưu lại và tận hưởng thành quả

Xoá cache trước khi xem nhé bạn

Đối với theme bất kỳ không phải Flatsome

Nếu bạn không dùng Flatsome, bạn coppy tất cả code desktop và mobile vào giữa hai thẻ đóng </body> và </html> của file Footer.php nhé!

Còn bạn nào mà không biết file Footer.php ở chỗ nào thì vào Quản trị ==> Giao diện ==> Sửa giao diện tìm file Footer.php ở cột bên phải nhé!

Note: Sửa file nên sử dụng Child theme để khi update theme các thay đổi không bị mất nhé

Lời kết:

Việc tạo các nút liên hệ nhanh cho website không hề khó như chúng ta tưởng. Chỉ với vài phút thao tác, bạn đã giúp khách hàng tiếp cận mình dễ dàng hơn rất nhiều. Chúc các bạn thực hiện thành công và có thật nhiều đơn hàng!

Đánh giá của bạn