Sử dụng HTML và CSS để tạo thanh liên hệ nhanh trên giao diện điện thoại

Xin chào các bạn, mình đang đi chơi trong group Flatsome Vietnam thì tình cờ đọc được một câu hỏi về thanh liên hệ rất nhanh (mình gọi là Contact Bar) trên giao diện điện thoại từ một người bạn. Nhận thấy nhiều bạn chưa biết cách làm nên mình tìm được cách chia sẻ với các bạn, hi vọng sẽ hữu ích, mời các bạn chú ý theo dõi.

Nhìn hình trên, bạn có biết chúng ta sẽ làm gì không? Hôm nay mình hướng dẫn các bạn cách làm thanh liên lạc nhanh với 4 nút: gọi điện, nhắn tin SMS, chat Zalo và chat Messenger nhé!

Tầm quan trọng của các nút Call to Action

Thực ra cái tôi muốn hướng dẫn các bạn ở đây đại khái là cái gọi là nút “Call to Action”, tức là kêu gọi người xem website click vào mục tiêu mà chúng ta đặt ra.

Trong trường hợp này, nút kêu gọi hành động có thể giúp khách hàng nhanh chóng liên hệ với chúng tôi qua 4 kênh liên hệ chính, bao gồm: gọi điện, nhắn tin, chat Zalo và chat Messenger.

Đối với các website bán hàng hay dịch vụ, các nút liên hệ nhanh này có một vai trò quan trọng và gần như không thể thiếu. Chúng giúp khách hàng tương tác với chúng tôi một cách trực tiếp và nhanh chóng.

Đối với một số bạn, thanh liên hệ nhanh này trông thật nhàm chán. Tuy nhiên, đối với tôi, tôi đánh giá cao màn hình đơn giản và trực quan như vậy.

Còn bạn thì sao? Nếu bạn cũng thích nó, hãy làm điều đó!

Code chèn thanh liên hệ nhanh vào giao diện mobile

Đối với theme Flatsome

Bước 1: Tại thanh Admin Bar đen đen trên cùng, truy cập chữ Flatsome – Advanced – Global Setting– Footer Script

Bước 2: Copy toàn bộ đoạn code dưới đây và paste vào Footer Scripts nhé!

 <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:0971646866"> <img src=""/> <br> <span>Gọi điện</span> </a> </li> <li> <a id="nhantin" href="sms:0971646866"> <img src=""/> <br> <span>Nhắn tin</span> </a> </li> <li> <a id="chatzalo" href=""> <img src=""/> <br> <span>Chat zalo</span> </a> </li> <li> <a id="chatfb" href="https://www.messenger.com/t3tcode"> <img src=""/> <br> <span>Chat Facebook</span> </a> </li> </ul> </div>

100

101

102

103

104

105

106

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

<ul>

<li>

<br>

</a>

</li>

<li>

<br>

</a>

</li>

<li>

<br>

</a>

</li>

<li>

<br>

<span>Chat Facebook</span>

</a>

</li>

</ul>

</div>

Lưu ý:

Sửa số điện thoại của bạn để khách gọi tới trong tel:0971646866
Sửa số điện thoại của bạn để khách nhắn tin đến trong sms:0971646866
Sửa link trang zalo cá nhân của bạn để khách nhắn tin tới trong href=””
Sửa tên user Facebook của bạn để khách nhắn tin tới trong href=””
Các bạn có thể tải các icon trên server của t3tcode.com về, upload lên web của các bạn rồi thay các link ảnh vào đoạn code trên nhé!

Bước 3: Lưu lại và hưởng thành quả trên giao diện mobile.

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

Bước 1: Truy cập Giao diện – Sửa – chọn theme đang dùng để sửa – Footer.php

Bước 2: Copy toàn bộ đoạn code ở bên trên vào giữa thẻ đóng </body> và </html>

Bước 3: Lưu lại và tận hưởng thành quả trên mobile nhé!

Lời kết

Do đó, bạn có thể tạo thanh liên hệ nhanh của riêng mình trên giao diện di động của trang web WordPress rồi phải không? Nếu không làm được hoặc có bất kỳ thắc mắc nào, hãy để lại bình luận để chúng tôi có thể giúp bạn!

Xem thêm:

Chia Sẻ - Hướng Dẫn, Tin tức Tổng Hợp

Tầm quan trọng của các nút Call to Action