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

Đối với một số người dùng thì thanh liên hệ nhanh này nhìn có vẻ khá nhàm chán. Tuy nhiên, đối với góc nhìn của mình thì mình đánh giá thanh liên hệ này hiển thị đơn giản, trực quan và thân thiện trên mobile.

Copy Code thanh liên hệ nhanh trên giao diện mobile

Trên theme Flatsome

Bước 1: Tại thanh Admin Bar màu đen trên cùng, đưa chuột tới chữ Flatsome – Advanced – Chọn Global Setting – Footer Script

Bước 2: Copy toàn bộ đoạn code dưới đây và paste vào Footer Scipt 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:0822422282">
        <img src="https://nguyencongnam.id.vn/wp-content/uploads/2024/06/1.png"/>
    <br>
    <span>Gọi điện</span>
        </a>
    </li>
    <li>
        <a id="nhantin" href="sms:0822422282">
        <img src="https://nguyencongnam.id.vn/wp-content/uploads/2024/06/2.png"/>
    <br>
    <span>Nhắn tin</span>
        </a>
    </li>
    <li>
        <a id="chatzalo" href="https://zalo.me/0822422282">
        <img src="https://nguyencongnam.id.vn/wp-content/uploads/2024/06/3.png"/>
    <br>
    <span>Chat zalo</span>
        </a>
    </li>
    <li>
        <a id="chatfb" href="https://www.facebook.com/messages/t/100036412428479">
        <img src="https://nguyencongnam.id.vn/wp-content/uploads/2024/06/4.png"/>
    <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:0822422282
  • Sửa số điện thoại của bạn để khách nhắn tin đến trong sms:0822422282
  • Sửa link trang zalo cá nhân của bạn để khách nhắn tin tới trong href=”https://zalo.me/0822422282“
  • Sửa tên user Facebook của bạn để khách nhắn tin tới trong href=”https://www.facebook.com/messages/t/100036412428479“
  • Các bạn có thể tải các icon khác 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à kiểm tra 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à kiểm tra trên mobile nhé!

Lời kết

Vậy là chúng ta có thể tự tạo một thanh liên hệ nhanh trên giao diện mobile của website rất đơn giản và đẹp mắt. Nếu bạn không làm được hay gặp sự cố hãy comment để mọi người trợ giúp nhé!

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *