Bạn muốn thêm Chát nút vào Wordpess của bạn để giúp việc liên lạc của khách hàng tới bạn một cách tiện lợi hơn, thì hôm nay trong bài viết này mình sẽ hướng dẫn các bạn cách Cách thêm nút Chat cho Wordpees.
Cách thêm nút chat vào website của bạn
Đối với theme Flatsome
bước 1: Coppy đoạn code mã sau :
<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/0378180567">Chat Zalo</a>
</button>
<button class="chat-face">
<a href="http://m.me/nguyentonggiang1999">Chat Facebook</a>
</button>
<button class="hotline">
<a href="tel:0867592210">Hotline: 0378180567</a>
</button>
</div>
Trên thanh trên cùng có chữ Flatsome, các bạn rê chuột vào Advanced – Global Setting
bước 2: và tìm đến Footer Script. dán đoạn code vừa copy ở trên vào Footer Script
Bước 3: sửa lại để nó hiện thị như sau:
- 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ủ.
Còn đối với them bất kỳ ta làm như sau:
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ả nhé
Lời Kết
với bài viết trên mình đã hướng dẫn các bạn Cách thêm nút Chat Zalo, facebook, gọi điện cho Wordpees bằng HTML và CSS, hi vọng bài viết sẽ giúp ích được cho bạn về công việc, chúc các bạn thành công xin chào và hẹn gặp lại.