Vinadomain.vn – Lướt qua các diễn đàn trang mạng, Admin đọc được nhiều câu hỏi của các thành viên về cách  tạo thanh liên hệ nhanh như: gọi điện, chát zalo, gửi thư liên hệ.

Nhận thấy có nhiều bạn cũng chưa biết cách làm nên mình tìm cách làm để chia sẻ cho các bạn, hy vọng nó sẽ hữu ích, mời các bạn theo dõi.

Code tạo thanh liên hệ nhanh trên giao diện mobile bằng HTML và CSS – Giống Vinadomain. vn hiện tại đang sử dụng khi lướt trên mobile.

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

Thực chất cái mình chuẩn bị hướng dẫn các bạn làm đây được gọi nôm na là các nút “Call to Action”, nghĩa là kêu gọi hành vi người lướt website click (bấm) vào mục tiêu chúng ta đặt sẵn.

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

Đối với những website bán hàng hoặc 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 trực tiếp và nhanh nhất với chúng ta.

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

Còn bạn thì sao? Nếu bạn cũng thích, bắt tay làm luôn nhé!

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

A – Đố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 Scipt nhé!

Code:

<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:0964891898″>
<img src=”https://vinadomain.vn/wp-content/uploads/2019/04/icon-phone2.png”/>
<br>
<span>Gọi điện</span>
</a>
</li>
<li>
<a id=”nhantin” href=”sms:0964891898″>
<img src=”https://vinadomain.vn/wp-content/uploads/2019/04/icon-sms2.png”/>
<br>
<span>Nhắn tin</span>
</a>
</li>
<li>
<a id=”chatzalo” href=”http://zaloapp.com/qr/p/gohy24xh4w5a”>
<img src=”https://vinadomain.vn/wp-content/uploads/2019/04/icon-zalo2.png”/>
<br>
<span>Chat zalo</span>
</a>
</li>
<li>
<a id=”chatfb” href=”https://www.messenger.com/t/Humitsu”>
<img src=”https://vinadomain.vn/wp-content/uploads/2019/04/icon-mesenger2.png”/>
<br>
<span>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: 0964891898
  • Sửa số điện thoại của bạn để khách nhắn tin đến trong sms: 0964891898
  • Sửa link trang zalo cá nhân của bạn để khách nhắn tin tới trong href=”http://zaloapp.com/qr/p/gohy24xh4w5a“
  • Sửa tên user Facebook của bạn để khách nhắn tin tới trong href=”https://messenger.com/t/humitsu“
  • Các bạn có thể tải các icon trên server của Vinadomain.vn 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.

B – Đối với theme bất kỳ

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


Hướng dẫn tạo các nút gọi, chat Zalo và chat Facebook cho website WordPress bằng HTML và CSS

Tạo nút gọi điện, chat Zalo và chat Facebook cho website

Và chính xác thì chúng ta sẽ thực hiện việc tạo và chèn các nút gọi điện, chat Zalo và chat Facebook nổi ở góc trái cho website WordPress như hình mô tả dưới đây:

Giuseart.com-Tạo-các-nút-gọi-điện,-chat-zalo-và-chat-facebook-cho-website-wordpress
Tạo các nút gọi điện, chat zalo và chat Facebook cho website WordPress

Đối với theme Flatsome

Bài viết hướng dẫn được thực hiện trên theme Flatsome. Do đó, các bạn nào sử dụng theme Flatsome thì hoàn toàn có thể làm theo y nguyên nhé!

Bước 1: Copy code HTML và CSS

Trên thanh đen đen trên cùng (Admin Bar) có chữ Flatsome, các bạn rê chuột vào Advanced – Global Setting và tìm đến Footer Script.

Sau đó, bạn copy toàn bộ đoạn code sau vào Footer Script nhé!

<style>.float-contact {position: fixed;bottom: 20px;left: 20px;z-index: 99999;}

.chat-zalo {background: #8eb22b;border-radius: 20px;padding: 0 18px;color: white;display: block;margin-bottom: 6px;}

.chat-face {background: #125c9e;border-radius: 20px;padding: 0 18px;color: white;display: block;margin-bottom: 6px;}

.float-contact .hotline {background: #d11a59!important;border-radius: 20px;padding: 0 18px;color: white;display: block;margin-bottom: 6px;}

.chat-zalo a, .chat-face a, .hotline a {font-size: 15px;color: white;font-weight: 400;text-transform: none;line-height: 0;}@media (max-width: 549px){.float-contact{display:none}}

</style>

<div class=”float-contact”><button class=”chat-zalo”><a href=”http://zalo.me/0905889188″>Chat Zalo</a></button><button class=”chat-face”><a href=”http://m.me/moosun.vn”>Chat Facebook</a></button><button class=”hotline”><a href=”tel:0905889188″>Hotline: 0905 88 91 88</a></button></div>

Bước 2: Thay thông tin cần thiết

Thông tin ở đoạn code trên là thông tin demo của mình, khi copy sang website của các bạn thì các bạn phải đổi thông tin thành của các bạn.

Các bạn có thể đổi thông tin trong các mục sau:

Chỉnh sửa thông tin bao gồm 1. Chỉnh sửa link và 2. Chỉnh sửa text
Chỉnh sửa thông tin bao gồm 1. Chỉnh sửa link và 2. Chỉnh sửa text
  • Màu xanh da trời: Sửa link chat Zalo. Link đúng có dạng: http://zalo.me/09xxxxxxxx (09xxxxxxxx là số điện thoại đăng ký zalo)
  • Màu xanh lá cây: Sửa link chat Messenger. Link đúng có dạng: http://messenger.com/t/abc (abc là tên trang cá nhân của bạn, sau phần gạch chéo của facebook.com)
  • Màu đỏ: Sửa số điện thoại. Link đúng có dạng: tel:09xxxxxxxx (09xxxxxxxx là số điện thoại của bạn)
  • Màu xám: Sửa chữ hiển thị ra ngoài trang chủ

Bước 3: Lưu lại và hưởng thành quả

Sau khi bạn copy code và sửa thông tin trong footer script, bạn lưu lại và ra trang chủ hưởng thành quả nhé!

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

Bước 1: Copy code HTML và CSS

Các bạn vào Quản trị – Giao diện – Sửa – Chọn theme đang sử dụng – Footer.php

Sau đó, các bạn copy toàn bộ đoạn code ở bước 1 (dành cho theme Flatsome) ở trên và paste vào giữa thẻ đóng </body> và </html>

Bước 2: Chỉnh sửa thông tin

Các bạn thực hiện các thao tác chỉnh sửa thông tin như ở trên mình hướng dẫn (cho theme Flatsome)

Bước 3: Lưu lại và hưởng thành quả

Cuối cùng, các bạn lưu lại và ra trang chủ xem sự thay đổi nha!


Code thêm các nút Call to action hữu ích cho website WordPress

Thêm nút Call to Action cho website

Về cơ bản thì sau khi cài WordPress bạn có thể cần thêm các plugin hoặc các đoạn code tạo nút Call to Action (kêu gọi hành động) để điều hướng khách hàng click vào các nút dẫn đi tới link mà mình mong muốn. Các nút Call to Action có thể hiểu như nút “Mua ngay“, “Gọi ngay cho chúng tôi” hoặc “Liên hệ tư vấn miễn phí“,… được bố trí ở một số vị trí trong website, ví dụ.

Có nhiều plugin làm được việc này. Tuy nhiên, sử dụng plugin luôn mang lại mối lo ngại về bảo mật và tốc độ. Do đó, các bạn hoàn toàn có thể sử dụng HTML và CSS để tạo các nút Call to Action đẹp mà đơn giản nhé!

Đối với theme Flatsome

Các bạn chỉ cần tuần tự làm theo các bước của mình sẽ Ok nhé!

Bước 1: Copy đoạn code tạo nút Call to Action

Trên thanh Admin Bar đen đen trên cùng có chữ Flatsome, chọn Advanced – Global Setting.Sau đó, copy toàn bộ đoạn code dưới đây bỏ vào Footer Script.

Code: 

<div class=”bottom-contact”>
<div class=”container”>
<div class=”left”>
<a href=”https://messenger.com/t/joseph.thien.75″ target=”blank”><img src=”http://robot.ninhbinhweb.net/wp-content/uploads/2018/09/icon.png”/>Tư vấn qua Facebook</a>
</div>
<div class=”center”>
<a href=”https://giuseart.com” target=”blank”><img src=”http://robot.ninhbinhweb.net/wp-content/uploads/2018/12/icon-gift.png”/>Quà tặng</a>
</div>
<div class=”right”>
<a href=”tel:0972939830″ target=”blank”><img src=”http://robot.ninhbinhweb.net/wp-content/uploads/2018/09/phone-icon.png”/>Gọi: 0972.939.830</a>
</div>
<div class=”clearboth”></div>
</div>
</div>

Trong đoạn code trên, các bạn có thể thay link và text của các nút, ví dụ:

Màu đỏ: sửa link; màu xanh: sửa text
Màu đỏ: sửa link; màu xanh: sửa text
  • Màu đỏ: sửa liên kết của nút.
  • Màu xanh: Sửa text
  • Các bạn cũng có thể tải các icon trên host của ninhbinhweb.net xuống rồi upload lên website của các bạn, sau đó lấy link ảnh thay vào link trong thẻ <img/> nhé!

Bước 2: Thêm CSS  cho giao diện PC

Vào Giao diện – Tùy biến – Style – Tùy chỉnh CSS (Custom CSS) – Custom CSS, sau đó copy toàn bộ đoạn code CSS này vào:

.bottom-contact{z-index:999; position: fixed;
bottom: 0;
margin: 0 auto;
text-align: center;
width: 100%;}
.bottom-contact .container{display:inline-block; max-width:600px}
.bottom-contact .left, .bottom-contact .center{
float: left;
padding: 0 5px;}
.bottom-contact .left a{background: #3a589d;
padding: 14px 15px;
color: white;
font-size: 15px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;}
.bottom-contact .clearboth{clear:both}
.bottom-contact .right{float:left; padding: 0 5px}
.bottom-contact img{width:25px; padding-right:5px}
.bottom-contact .center a{background: #fd7518;
padding: 14px 15px;
color: white;
font-size: 15px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;}
.bottom-contact .right a{background: #3fb801;
padding: 14px 15px;
color: white;
font-size: 15px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;}
.bottom-contact .right a:hover{background:#38a700}
.bottom-contact .center a:hover{background:#ef680b}
.bottom-contact .left a:hover{background:#29468a}

Bước 3: Thêm CSS để ẩn trên giao diện mobile

Các nút Call to Action dùng cho giao diện mobile không đẹp, nên chúng ta có thể ẩn nó đi bằng cách:

Vào Giao diện – Tùy biến – Style – Tùy chỉnh CSS (Custom CSS) – Custom Mobile CSS, sau đó copy đoạn code CSS này vào:

Code:

.bottom-contact{display:none}

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

Đối với theme bất kỳ không phải Flatsome, chúng ta có cách thêm hơi khác một xíu. Cụ thể như sau:

Bước 1: Vào Quản trị – Giao diện – Sửa – Footer.php. Sau đó, copy toàn bộ đoạn code này vào ngay giữa thẻ đóng </body> và </html>.

<style>
.bottom-contact{z-index:999; position: fixed;
bottom: 0;
margin: 0 auto;
text-align: center;
width: 100%;}
.bottom-contact .container{display:inline-block; max-width:600px}
.bottom-contact .left, .bottom-contact .center{
float: left;
padding: 0 5px;}
.bottom-contact .left a{background: #3a589d;
padding: 14px 15px;
color: white;
font-size: 15px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;}
.bottom-contact .clearboth{clear:both}
.bottom-contact .right{float:left; padding: 0 5px}
.bottom-contact img{width:25px; padding-right:5px}
.bottom-contact .center a{background: #fd7518;
padding: 14px 15px;
color: white;
font-size: 15px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;}
.bottom-contact .right a{background: #3fb801;
padding: 14px 15px;
color: white;
font-size: 15px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;}
.bottom-contact .right a:hover{background:#38a700}
.bottom-contact .center a:hover{background:#ef680b}
.bottom-contact .left a:hover{background:#29468a}
@media  (max-width: 767px) {.bottom-contact{display :none;}}
</style>
<div class=”bottom-contact”>
<div class=”container”>
<div class=”left”>
<a href=”https://messenger.com/t/joseph.thien.75″ target=”blank”><img src=”http://robot.ninhbinhweb.net/wp-content/uploads/2018/09/icon.png”/>Tư vấn qua Facebook</a>
</div>
<div class=”center”>
<a href=”https://giuseart.com” target=”blank”><img src=”http://robot.ninhbinhweb.net/wp-content/uploads/2018/12/icon-gift.png”/>Quà tặng</a>
</div>
<div class=”right”>
<a href=”tel:0972939830″ target=”blank”><img src=”http://robot.ninhbinhweb.net/wp-content/uploads/2018/09/phone-icon.png”/>Gọi: 0972.939.830</a>
</div>
<div class=”clearboth”></div>
</div>
</div>
Bước 2: Lưu lại và hưởng thành quả

Nếu bạn nào không làm được hoặc gặp sự cố gì, vui lòng comment để anh em trợ giúp nhé!

Bonus: Lấy link Zalo cá nhân – Lấy link Zalo Page

Nếu website của bạn có tích hợp nút zalo để từ đó người dùng có thể click vào đó, để dẫn tới chỗ chat trên zalo luôn thì thật là tiện. Chỉ với một click chuột và bạn đã kết nối, từ đó kết bạn và triển khai công việc thì thật tiện phải không nào.

Để làm được điều đó ta cần lấy một đường dẫn (link) để dẫn vào cái biểu tưởng zalo kia.

Các bạn làm theo các bước sau sẽ lấy link zalo thành công:

Bước 1: Vào Zalo trên điện thoại và nhấp vào núi ba chấm (…) ở góc trên bên trái
lay link zalo

Bước 2: Chọn Mã QR của tôi

lấy link zalo chat

Bước 3: Mã QR xuất hiện > Lưu vào thư viện (Ảnh chứa mã sẽ lưu vào folder zalo chỗ lưu ảnh điện thoại)

lấy link zalo chat

Bước 4: Truy cập vô link https://webqr.com/ và upload ảnh chứa mã QR lên.

Bước 5: Lấy link xuất ra và chèn vào nơi nào bạn muốn click vô:

lấy link zalo page

Như vậy là xong, chúc bạn thành công nhé. Hãy chia sẻ nếu thấy kiến thức này có ích cho bạn bè của các bạn nhé.

[Code] tạo các nút gọi, chat Zalo và chat Facebook cho website WordPress bằng HTML và CSS
5 (100%) 1 vote[s]

Bình luận

avatar
  Subscribe  
Notify of