Chèn Nút Liên Hệ Và Chat Facebook, Zalo Vào Website đơn Giản!

Thời kì kinh doanh online đang bùng nổ, việc tích hợp các công cụ gọi điện, liên hệ trực tiếp vào website là không thể thiếu và vô cùng quan trọng.

Hình demo nút gọi điện, nhắn tin bên trái

• TÌM KIẾM BACKLINK CHẤT LƯỢNG VỚI NGÂN SÁCH EO HẸP
• Firmware là gì? Phân biệt giữa Firmware và Software rõ nhất
• Cách Chèn Messenger Vào Website WordPress Nhanh Chóng Đơn Giản
• BA TIÊU CHÍ ĐÁNH GIÁ MỘT BÀI CONTENT CHUẨN
• Web Navigation là gì? Phân loại, ví dụ chi tiết về Web Navigation

Việc tích hợp các nút bên trên không hề khó, bài viết này mình sẽ chỉ bạn các làm đơn giản.

Bước 1: Chèn đoạn mã HTML này trong phần footer

<div class="social-button"> <div class="social-button-content"> <a href="tel:0981481368" class="call-icon" rel="nofollow"> <i class="fa fa-whatsapp" aria-hidden="true"></i> <div class="animated alo-circle"></div> <div class="animated alo-circle-fill "></div> <span>Hotline: 098 148 1368</span> </a> <a href="sms:0981481368" class="sms"> <i class="fa fa-weixin" aria-hidden="true"></i> <span>SMS: 098 148 1368</span> </a> <a href="https://www.facebook.com/Ngocthang.net/" class="mes"> <i class="fa fa-facebook-square" aria-hidden="true"></i> <span>Nhắn tin Facebook</span> </a> <a href="http://zalo.me/0981481368" class="zalo"> <i class="fa fa-commenting-o" aria-hidden="true"></i> <span>Zalo: 098.148.1368</span> </a> </div> <a class="user-support"> <i class="fa fa-user-circle-o" aria-hidden="true"></i> <div class="animated alo-circle"></div> <div class="animated alo-circle-fill"></div> </a> </div>

Chú thích:

• Các nút mình sắp xếp đó là: Nút gọi điện, nút tin nhắn SMS, nút chat Facebook và nút nhắn tin Zalo.
• Các bạn nhớ đổi số và link facebook, zalo trong đoạn mã code trên nhé.

Bước 2: Hãy CSS một chút cho nó bắt mắt nhé

<style> .social-button{ display: inline-grid; position: fixed; bottom: 15px; left: 45px; min-width: 45px; text-align: center; z-index: 99999; } .social-button-content{ display: inline-grid; } .social-button a {padding:8px 0;cursor: pointer;position: relative;} .social-button i{ width: 40px; height: 40px; background: #43a1f3; color: #fff; border-radius: 100%; font-size: 20px; text-align: center; line-height: 1.9; position: relative; z-index: 999; } .social-button span{ display: none; } .alo-circle { animation-iteration-count: infinite; animation-duration: 1s; animation-fill-mode: both; animation-name: zoomIn; width: 50px; height: 50px; top: 3px; right: -3px; position: absolute; background-color: transparent; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; border: 2px solid rgba(30, 30, 30, 0.4); opacity: .1; border-color: #0089B9; opacity: .5; } .alo-circle-fill { animation-iteration-count: infinite; animation-duration: 1s; animation-fill-mode: both; animation-name: pulse; width: 60px; height: 60px; top: -2px; right: -8px; position: absolute; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; border: 2px solid transparent; background-color: rgba(0, 175, 242, 0.5); opacity: .75; } .call-icon:hover > span, .mes:hover > span, .sms:hover > span, .zalo:hover > span{display: block} .social-button a span { border-radius: 2px; text-align: center; background: rgb(103, 182, 52); padding: 9px; display: none; width: 180px; margin-left: 10px; position: absolute; color: #ffffff; z-index: 999; top: 9px; left: 40px; transition: all 0.2s ease-in-out 0s; -moz-animation: headerAnimation 0.7s 1; -webkit-animation: headerAnimation 0.7s 1; -o-animation: headerAnimation 0.7s 1; animation: headerAnimation 0.7s 1; } @-webkit-keyframes "headerAnimation" { 0% { margin-top: -70px; } 100% { margin-top: 0; } } @keyframes "headerAnimation" { 0% { margin-top: -70px; } 100% { margin-top: 0; } } .social-button a span:before { content: ""; width: 0; height: 0; border-style: solid; border-width: 10px 10px 10px 0; border-color: transparent rgb(103, 182, 52) transparent transparent; position: absolute; left: -10px; top: 10px; } </style>

Bước 3: Thêm 1 chút hiệu ứng vào nữa là Ok rồi!

<script> $(document).ready(function(){ $('.user-support').click(function(event) { $('.social-button-content').slideToggle(); }); }); </script>

Chỉ vào thao tác thôi là chúng ta có hiệu ứng đẹp mắt và tiện lợi, người dùng có thể liên lạc với bạn chỉ bằng 1 cú click chuột.

-> Xem ngay cách: tạo nút gọi điện trên web wordpress nhanh nhất

Video hướng dẫn chi tiết

Hãy thử nó nhé. Chúc các bạn thành công!

2/5 - (4 bình chọn)

Trần Đức Thắng

Tôi là Trần Đức Thắng, hiện đang là CEO & Co-Founder của Công Ty Ngọc Thắng. Tôi phát triển với nền tảng thiết kế website, SEO và Inbound Marketing. Hiện nay Ngọc Thắng cung cấp dịch vụ thiết kế website, SEO, quảng cáo Google Ads… Với kinh nghiệm triển khai nhiều dự án những năm qua, đội ngũ của Ngọc Thắng không ngừng nỗ lực mang đến những dịch vụ tốt với chi phí thấp nhất cho quý khách hàng.!