Tạo nút liên hệ đẹp giống F88 trong Theme Flatsome

Tối ưu tỷ lệ chuyển đổi: Hướng dẫn tạo nút liên hệ nổi bật cho website Flatsome

Trong thương mại điện tử, việc rút ngắn khoảng cách giữa khách hàng và doanh nghiệp là yếu tố then chốt để tăng tỷ lệ chuyển đổi. Các nút liên hệ nhanh (Floating Action Buttons) – điển hình như cách F88 triển khai – là giải pháp hiệu quả giúp người dùng kết nối qua Zalo, Messenger hoặc Hotline chỉ với một thao tác chạm.

Tại STAR WAR Digital Solutions, chúng tôi ưu tiên các giải pháp kỹ thuật tinh gọn, đảm bảo tính thẩm mỹ và trải nghiệm người dùng (UX) mượt mà mà không gây ảnh hưởng đến tốc độ tải trang. Dưới đây là hướng dẫn triển khai nút liên hệ tùy chỉnh cho theme Flatsome.

Các bước triển khai kỹ thuật

Để tích hợp nút liên hệ vào website sử dụng theme Flatsome, cách tối ưu nhất là tận dụng mục Footer Scripts. Việc đặt mã tại đây giúp trình duyệt tải các thành phần này cuối cùng, tránh xung đột với các tài nguyên quan trọng khác của website.

• Truy cập trang quản trị WordPress: /wp-admin/admin.php?page=optionsframework
• Điều hướng đến mục Footer Scripts.
• Dán đoạn mã HTML và CSS dưới đây vào khung soạn thảo.
• Thay thế các đường dẫn ảnh, số điện thoại và liên kết chat cá nhân của doanh nghiệp.

<a class="social-icon social-icon--facebook" href="https://m.me/your-fanpage" target="_blank"> 
<img src="link-anh-messenger.png">
</a>
<a class="social-icon social-icon--zalo" href="https://zalo.me/your-phone" target="_blank">
 <img src="link-anh-zalo.png"> 
</a>

<div class="social-icon-mobile"> 
    <div> <a href="tel:your-phone"> <img src="link-anh-phone.png"> <p>Gọi ngay</p> </a> </div> 
    <div> <a href="https://m.me/your-fanpage" target="_blank"> <img src="link-anh-messenger.png"> <p>Facebook</p> </a> </div>
    <div> <a href="https://zalo.me/your-phone" target="_blank"> <img src="link-anh-zalo.png"> <p>Zalo</p> </a> </div> 
</div>

<style type="text/css">
.social-icon{z-index:1000}.social-icon img{width:50px}
.social-icon--zalo{position:fixed;right:15px;bottom:15px;display:block}
.social-icon--facebook{position:fixed;bottom:75px;right:15px;display:block}
.social-icon-mobile{display:none}
.social-icon-mobile img{width:25px}
.social-icon-mobile div{flex:1;display:flex;align-items:center;justify-content:center}
.social-icon-mobile p{margin:0;margin-top:5px;font-size:10px;color:#fff}
.social-icon-mobile a{display:flex;flex-direction:column;align-items:center;justify-content:center}
@media (max-width:768px){
    .social-icon--facebook,.social-icon--zalo{display:none}
    .social-icon-mobile{display:flex;background-color:#00a3ff;height:60px;position:fixed;bottom:0;width:100%;z-index:1000}
}
</style>

Lưu ý tối ưu hóa

Để đảm bảo hiệu năng và tính chuyên nghiệp, bạn cần lưu ý:

• Tối ưu tài nguyên: Sử dụng định dạng ảnh .png hoặc .svg với dung lượng nhỏ để tránh làm chậm tốc độ tải trang trên thiết bị di động.
• Kiểm tra hiển thị: Sau khi lưu, hãy kiểm tra trên cả Desktop và Mobile để đảm bảo nút bấm không che khuất các thành phần quan trọng (như nút "Thêm vào giỏ hàng" hoặc thông tin sản phẩm).
• Đồng bộ thương hiệu: Bạn có thể tùy chỉnh thuộc tính background-color trong CSS để phù hợp với bộ nhận diện thương hiệu của doanh nghiệp.

Việc triển khai nút liên hệ nhanh là bước khởi đầu đơn giản nhưng hiệu quả để nâng cao trải nghiệm khách hàng. Nếu doanh nghiệp của bạn cần các giải pháp tùy chỉnh chuyên sâu về UX/UI hoặc tối ưu hóa hiệu năng website toàn diện, đội ngũ kỹ thuật tại STAR WAR Digital Solutions luôn sẵn sàng đồng hành cùng bạn.

Liên hệ với chúng tôi để nhận tư vấn giải pháp chuyển đổi số chuyên nghiệp.