Code tạo button zalo không cần plugin

Chia sẻ lại Code tạo button zalo không cần plugin

Như tiêu đề rõ ràng, tuibiet,com chia sẻ lại code tạo button zalo không cần plugin giải quyết vấn đề mà bạn đang tìm kiếm là zalo ngừng chức năng tìm zalo bằng liên kết trên website.

Sau khi tìm kiếm trên trang hỗ trợ của zalo đến google và hỏi thăm các cao thủ code thì mình cũng tìm được cách code tạo nút zalo để gắn lên web mà bài này sẽ chia sẻ lại, thật ra thì mình cũng chỉ là một người dùng bình thường chịu khó tìm tòi trên google thôi.

Để chèn cái zalo như hình lên website đề người dùng tìm kiếm và liên hệ với bạn qua zalo thì bạn tào một html và sao chép cái đoạn Code tạo button zalo không cần plugin phía dưới chép vào vùng html vừa tạo, đặt html đó vào footer nhé.

<button title=”Zalo” id=”nutzalo”>ZALO</button>

<style>

#nutzalo {

border: none;

border-radius: 100%;

width: 50px;

height: 50px;

background: #0065f7;

color: #fff;

font-weight: bold;

position: fixed;

display: grid;

align-items: center;

text-align: center;

font-size: 12px;

padding: 0px;

bottom: 10px;

left: 10px;

animation: zalo 1000ms infinite;

z-index:999999999;

}

#nutzalo:hover{

opacity:0.6;

}

@keyframes zalo {

0% {

transform: translate3d(0, 0, 0) scale(1);

}

33.3333% {

transform: translate3d(0, 0, 0) scale(0.9);

}

66.6666% {

transform: translate3d(0, 0, 0) scale(1);

}

100% {

transform: translate3d(0, 0, 0) scale(1);

}

0% { box-shadow: 0 0 0 0px #0065f7,0 0 0 0px #0065f7;}

50% { transform: scale(0.8); }

100% { box-shadow: 0 0 0 15px rgba(0,210,255,0),0 0 0 30px rgba(0,210,255,0); }

}

</style>

<script>

function isMobileDevice() {

return /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);

}

const nutzalo = document.getElementById(‘nutzalo’);

function ZaloClick() {

let link;

if (isMobileDevice()) {

if (navigator.userAgent.includes(‘Android’)) {

// android

link = ‘https://zaloapp.com/qr/p/xxxxxxxxx‘;

} else {

// ios

link = ‘zalo://qr/p/xxxxxxxxx‘;

}

} else {

// link mở zalo pc

link = ‘zalo://conversation?phone=099999999‘;

}

window.open(link, ‘_blank’);

}

nutzalo.addEventListener(‘click’, ZaloClick);

</script>

Tiến hành lấy địa chỉ zalo cần thêm để chèn vào đoạn code trên, bạn chú ý 3 cái dòng mình tô đỏ:

https://zaloapp.com/qr/p/xxxxxxxxx : với link này để mở zalo điện thoại anh em chỉ cần vào cá nhân / lấy “Mã QR của tôi” sau đó lưu mã lấy đt quét mã đó rồi copy link ở trình duyệt dán vào đây
zalo://qr/p/xxxxxxxxx : lấy đoạn link phía sau ở phần quét mã qr thay vào “xxxxxxxxx” là được
zalo://conversation?phone=099999999 :với link này để mở zalo pc anh em chỉ cần thay sđt zalo phía sau “09999999“

Để lấy được liên kết zalo thì bạn vào zalo cá nhân lấy “Mã QR của tôi” sẽ là một hình QR code, sau đó mở chương trình quét mã QR quét hình QR code zalo vừa lấy từ zalo cá nhân, bạn sẽ thấy địa chỉ liên kết zalo cần để thay vào những chỗ cần thay trên đoạn code tạo button zalo ở trên.

Nếu bạn muốn code tạo button zalo hiển bên phải màn hình thì bạn thay chữ left màu đỏ thành chữ right. Bạn cũng có thể tăng giảm chiều cao và chiều ngang khung zalo tạo 2 chỗ ( width: 50px; height: 50px; ).