Nhìn hình trên thì các bạn biết chúng ta chuẩn bị làm công việc gì rồi phải không? Hôm nay mình hướng dẫn các bạn làm thanh liên hệ nhanh bao gồm 4 nút: gọi điện, nhắn tin, chat Zalo và chat Messenger nhé!
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é!
Bước 2: Copy toàn bộ đoạn code dưới đây và paste vào Footer Scipt nhé!
</p> <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;}</p> <p>} </style><div class="bottom-contact"><ul><li><a id="goidien" href="tel:0972939830"><br><img decoding="async" src="//tintuc4.ninhbinhweb.net/wp-content/uploads/2019/02/icon-phone2.png"/><br><br><span>Gọi điện</span><br></a></li><li><a id="nhantin" href="sms:0972939830"><br><img decoding="async" src="//tintuc4.ninhbinhweb.net/wp-content/uploads/2019/02/icon-sms2.png"/><br><br><span>Nhắn tin</span><br></a></li><li><a id="chatzalo" href="//zaloapp.com/qr/p/3ur778onb9ak" target="_blank" rel="noopener"><br><img decoding="async" src="//tintuc4.ninhbinhweb.net/wp-content/uploads/2019/02/icon-zalo2.png"/><br><br><span>Chat zalo</span><br></a></li><li><a id="chatfb" href="//www.messenger.com/t/joseph.thien.75" target="_blank" rel="noopener"><br><img decoding="async" src="//tintuc4.ninhbinhweb.net/wp-content/uploads/2019/02/icon-mesenger2.png"/><br><br><span>Chat Facebook</span><br></a></li></ul></div><p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<div class=“bottom-contact”>
<ul>
<li>
<a id=“goidien” href=“tel:0972939830”>
<img src=“//tintuc4.ninhbinhweb.net/wp-content/uploads/2019/02/icon-phone2.png”/>
<br>
<span>Gọi điện</span>
</a>
</li>
<a id=“nhantin” href=“sms:0972939830”>
<img src=“//tintuc4.ninhbinhweb.net/wp-content/uploads/2019/02/icon-sms2.png”/>
<span>Nhắn tin</span>
<a id=“chatzalo” href=“//zaloapp.com/qr/p/3ur778onb9ak”>
<img src=“//tintuc4.ninhbinhweb.net/wp-content/uploads/2019/02/icon-zalo2.png”/>
<span>Chat zalo</span>
<a id=“chatfb” href=“//www.messenger.com/t/joseph.thien.75”>
<img src=“//tintuc4.ninhbinhweb.net/wp-content/uploads/2019/02/icon-mesenger2.png”/>
<span>Chat Facebook</span>
</ul>
</div>
Lưu ý:
Bước 3: Lưu lại và hưởng thành quả trên giao diện mobile.
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