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

• Knowledge Graph là gì? 4 Bước tạo sơ đồ tri thức Google cho website
• Cách viết bài content chuẩn Seo trong website wordpress
• Internal Link Là gì? Xây Dựng Mô Hình Internal Link Thúc Đẩy SEO
• Wireframe là gì? Cách sử dụng Wireframe trong thiết kế website
• Hướng dẫn cài đặt Google Analytics phiên bản cũ cực nhanh

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