Chia sẽ code nút liên hệ KakaoTalk cho website

KakaoTalk là một ứng dụng nhắn tin miễn phí rất phổ biến tại Hàn Quốc, tương tự như Zalo, Messenger hay Viber. Đây là sản phẩm của công ty Kakao Corp.

⭐ KakaoTalk dùng để làm gì?

• Nhắn tin miễn phí (text, ảnh, video, voice)
• Gọi thoại & gọi video miễn phí
• Tạo nhóm chat không giới hạn
• Gửi file lớn (tài liệu, hình ảnh…)
• Stickers, emoji phong cách Hàn
• Kết nối với danh bạ điện thoại tự động
• Tích hợp nhiều dịch vụ khác của Kakao như:
  • KakaoPay (thanh toán)
  • KakaoMap
  • KakaoGames

⭐ Tại sao KakaoTalk nổi tiếng?

• Là ứng dụng quốc dân của Hàn Quốc, gần như ai cũng dùng.
• Nhẹ, nhanh, ổn định.
• Bảo mật tốt, hỗ trợ mã hóa.
• Nhiều tính năng phụ trợ tiện lợi cho người sống/ làm việc tại Hàn.

⭐ Ở Việt Nam có dùng nhiều không?

Không phổ biến như Zalo, nhưng:

• Người làm việc với công ty Hàn Quốc
• Du học sinh
• Người xuất khẩu lao động

Nếu bạn có website target vào Hàn Quốc thì có thể sử dụng code dưới đây để tạo button liên hệ

Bạn có thể copy code trên dán vào phần footer của website, sau đó thay đổi lại số điện thoại và link dẫn đến KakaoTalk và cả các link ảnh luôn là được.

Lưu ý KakaoTalk dùng cấu trúc link dạng

• https://open.kakao.com/o/gbYhexSd
• https://pf.kakao.com/_QBSYG

⭐ Chia sẽ code nút liên hệ KakaoTalk cho website

<div id="button-contact-vr" class="">
<div id="gom-all-in-one">
<!-- contact -->
<div id="contact-vr" class="button-contact">
<a href="sms:0868017791" class="contact-link">
<div class="phone-vr">
<div class="phone-vr-img-circle">
<img alt="Liên hệ" src="https://vutruso.com/wp-content/uploads/2025/12/phone.webp">
</div>
</div>
<div class="text-chat">Nhắn tin</div>
</a>
</div>
<!-- end contact -->
<!-- zalo -->
<div id="zalo-vr" class="button-contact">
<a target="_blank" href="https://zalo.me/0868017791" class="contact-link">
<div class="phone-vr">
<div class="phone-vr-img-circle">
<img alt="Zalo" src="https://vutruso.com/wp-content/uploads/2025/12/zalo.webp">
</div>
</div>
<div class="text-chat">Chat Zalo</div>
</a>
</div>
<!-- end zalo -->
<!-- kakao -->
<div id="kakao-vr" class="button-contact">
<a target="_blank" href="https://pf.kakao.com/_QBSYG" class="contact-link">
<div class="phone-vr">
<div class="phone-vr-img-circle">
<img alt="KakaoTalk" src="https://vutruso.com/wp-content/uploads/2025/12/kakaotalk.png">
</div>
</div>
<div class="text-chat">KakaoTalk</div>
</a>
</div>
<!-- end kakao -->
<!-- Phone -->
<div id="phone-vr" class="button-contact">
<a href="tel:0868017791" class="contact-link">
<div class="phone-vr">
<div class="phone-vr-img-circle">
<img alt="Phone" src="https://vutruso.com/wp-content/uploads/2025/12/phone.webp">
</div>
</div>
<div class="text-chat">Hotline</div>
</a>
</div>
<!-- end phone -->
</div>
</div>

<style>
/* Container cố định dưới cùng */
#button-contact-vr {
position: fixed;
bottom: 0;
left: 15px;
z-index: 99999;
transform: scale(0.8);
margin: -10px;
}

#gom-all-in-one {
display: flex;
flex-direction: column;
gap: 0px;
}

/* Button contact */
.button-contact {
background: #fff;
border-radius: 12px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
padding: 0;
transition: 0.3s all;
margin: 5px 0;
}

/* Link bọc toàn bộ icon + text */
.button-contact a.contact-link {
display: flex;
align-items: center;
text-decoration: none;
color: inherit;
width: 100%;
gap: 0px;
position: relative;
}

/* Khối icon */
.phone-vr {
position: relative;
width: 60px;
height: 60px;
}

/* Circle icon */
.phone-vr-img-circle {
background-color: #e60808;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 10px;
left: 10px;
overflow: hidden;
animation: phone-vr-circle-fill 1s infinite ease-in-out;
}

/* Icon ảnh */
.phone-vr-img-circle img {
max-height: 25px;
max-width: 27px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

/* Text chat */
.text-chat {
padding-right: 10px;
font-weight: 600;
cursor: pointer;
}

/* Màu riêng cho từng button */
#contact-vr .phone-vr-img-circle { background-color: #2196F3; }
#zalo-vr .phone-vr-img-circle { background-color: #2196F3; }
#phone-vr .phone-vr-img-circle { background-color: #ef0000; }
#kakao-vr .phone-vr-img-circle { background-color: #FEE500; }
#fanpage-vr .phone-vr-img-circle { background-color: #1877f2; }

/* Hiệu ứng animation icon */
@keyframes phone-vr-circle-fill {
0% { transform: rotate(0) scale(1) skew(1deg); }
10% { transform: rotate(-25deg) scale(1) skew(1deg); }
20% { transform: rotate(25deg) scale(1) skew(1deg); }
30% { transform: rotate(-25deg) scale(1) skew(1deg); }
40% { transform: rotate(25deg) scale(1) skew(1deg); }
50% { transform: rotate(0) scale(1) skew(1deg); }
100% { transform: rotate(0) scale(1) skew(1deg); }
}

/* Hover đẹp */
.button-contact a.contact-link:hover .phone-vr-img-circle {
transform: scale(1.1);
transition: 0.3s all;
}

.button-contact a.contact-link:hover .text-chat {
color: #e60808;
transition: 0.3s all;
}

/* MOBILE: Hiển thị dạng lưới 2x2 */
@media only screen and (max-width: 768px) {
#button-contact-vr {
left: 0;
right: 0;
width: 100%;
transform: scale(1);
bottom: 0;
margin: 0;
padding: 10px;
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

#gom-all-in-one {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 4px;
}

.button-contact {
margin: 0;
width: 100%;
}

.button-contact a.contact-link {
flex-direction: row;
justify-content: flex-start;
padding: 1px 5px;
gap: 5px;
}

.phone-vr {
width: 40px;
height: 40px;
flex-shrink: 0;
}

.phone-vr-img-circle {
width: 30px;
height: 30px;
top: 5.5px;
left: 2.5px;
}

.phone-vr-img-circle img {
max-height: 26px;
max-width: 28px;
}

.text-chat {
padding: 0;
font-size: 13px;
flex: 1;
text-align: left;
}
}
</style>