Hãy đơn giản hóa và làm tốt trải nghiệm mua hàng đối với khách hàng khi họ duyệt website trên mobile bằng cách bổ sung vào website một nút bấm cho phép khách hàng có thể gọi điện cho bạn nếu họ đang duyệt web bằng mobile. Việc này thực hiện khá đơn giản và dễ dàng chỉ bằng vài dòng code. Hãy trải nghiệm.
Nếu bạn cũng như tôi: thường có thói quen gọi điện tìm hiểu sản phẩm hoặc đặt hàng qua điện thoại thay vì phải điền form loằng ngoằng thì đây là một giải pháp có thể giúp trải nghiệm của khách hàng đối với website tốt hơn.
Trước tiên, giới thiệu 2 website đang sử dụng nút gọi điện như mô tả của tôi ở phiên bản mobile:
Phiên bản Mobile SieuThiTaiGia.VN với nút gọi điện. Phiên bản Mobile AoThunNhanh.COM với nút gọi điện.Cách làm nút gọi điện trên phiên bản di động
Để làm nút “Gọi điện” trên phiên bản di động đơn giản hơn bạn nghĩ nhiều.
Đầu tiên, chúng ta cần một đoạn mã HTML cho phép khách hàng có thể nhấn vào để gọi điện. Ở đây tôi sử dụng thẻ HTML như sau:
[code] <a href="tel:08123456789" id="callnowbutton"> </a>[/code]
Để định dạng hình dạng cho thẻ này, tôi gắn thêm thuộc tính id vào để có thể tùy chỉnh giao diện trong Cascading Style Sheets. Đoạn mã này tốt nhất chúng ta nên đặt ở phần footer – nghĩa là cuối trang web để không ảnh hưởng đến tốc độ trang và được tải sau cùng.
Tiếp theo chúng ta thêm đoạn mã sau vào phần CSS để quản lý việc hiển thị – không hiển thị nút này tùy theo phiên bản và kích thước.
Đoạn mã CSS tôi dùng như sau:
[code language=”css”] #callnowbutton {display:none;}@media screen and (max-width:650px){
#callnowbutton {
display:block;
height:80px;
position:fixed;
width:100%;
left:0;
bottom:-20px;
border-top:2px solid rgba(51,187,51,1);
background:url(http://callnowbutton.com/phone/callbutton01.png) center 10px no-repeat #009900;
text-decoration:none;
box-shadow:0 0 5px #888;
-webkit-box-shadow:0 0 5px #888;
-moz-box-shadow:0 0 5px #888;
z-index:9999;}
}
[/code]
Chuyện này tùy theo sở thích và style mà các bạn tùy chỉnh theo sở thích của mình. Hãy xem thêm bài viết này nếu bạn cần tìm hiểu về responsive.
