Code nút liên hệ website wordpress phần 2
Với việc chúng ta cái 1 plugin sẽ rất tiện lợi nhưng nó sẽ không cho các bạn custom trên cái mãu sẵn đó ! nhìn nó không đẹp nên mình thấy code HTML và Css vào cho lẹ mà nhẹ hơn plugin 1 xíu thôi !
Trước tiên các bạn cài Plugin này của việt nam nhưng nó có đầy đủ tính năng bạn cần mà không cần code nhiều wp-extra nó sẽ giúp bạn chèn mã vào Footer Scripts và css nhanh chóng
- Code mẫu 1:
<div class="intro-container" id="intro-container">
<div class="intro-container-tit">
<span>Trò chuyện</span>
<button title="Đóng" onclick="closeIntroContainer()">
<i class="fa fa-times"></i>
</button>
</div>
<div class="intro-message-box">
<div class="intro-message-chat">
<img alt="Tác giả Nguyenthaimmo" width="50" height="50" src="https://nguyenthaimmo.com/wp-content/uploads/2023/11/z1554092180332_c36aef2d23e366a2783d46176de4a23d-Nguyen-thai-mmo.jpg">
<div id="intro-message1" class="typing-message"></div>
<div id="intro-message2" class="typing-message"></div>
</div>
</div>
<a title="Messenger" class="intro-ms" href="https://www.facebook.com/thainguyen23969" target="_blank">
<i class="fa fa-comment"></i> Messenger
</a>
</div>
<script>
function typeMessage(element, message, delay) {
return new Promise(resolve => {
let index = 0;
const typingInterval = setInterval(() => {
element.innerHTML += message[index];
index++;
if (index === message.length) {
clearInterval(typingInterval);
resolve();
}
}, delay);
});
}
async function startTypingAnimation() {
const message1 = "Chào bạn đã đến với Nguyenthaimmo";
const message2 = "Cần Thái tư vấn hỗ trợ hãy liên hệ đừng gần gại nhé !";
while (true) {
await typeMessage(document.getElementById("intro-message1"), message1, 100);
await new Promise(resolve => setTimeout(resolve, 1000));
document.getElementById("intro-message1").innerHTML = "";
await typeMessage(document.getElementById("intro-message2"), message2, 100);
await new Promise(resolve => setTimeout(resolve, 1000));
document.getElementById("intro-message2").innerHTML = "";
}
}
function closeIntroContainer() {
const introContainer = document.getElementById("intro-container");
introContainer.style.display = "none";
}
window.onload = startTypingAnimation;
</script>
<style>
/* khung chat*/
/* CSS chung cho .intro-container */
.intro-container {
position: fixed;
left: 10px;
bottom: 10px;
width: 350px;
border-radius: 10px;
background-color: #fff;
z-index: 999;
box-shadow: 0px 0px 10px #00000052;
}
/* Animation */
@keyframes duoilen {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
/* Phần Header của .intro-container */
.intro-container-tit {
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px 5px;
background: linear-gradient(19deg, rgba(0,135,92,1) 0%, rgba(143,202,28,1) 100%);
color: white;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
/* Phần tin nhắn trong .intro-container */
.intro-message-chat {
display: flex;
align-items: center;
padding: 10px;
position: relative;
background: #f0f0f0; /* Màu xám nhạt */
border-radius: 20px; /* Độ bo tròn của khung tin nhắn */
width: 100%;
margin-top: 10px; /* Khoảng cách giữa các khung tin nhắn */
}
/* Ảnh đại diện trong tin nhắn */
.intro-message-chat img {
margin-right: 10px;
border-radius: 50%; /* Độ bo tròn của hình ảnh */
}
/* Hiệu ứng typing */
.typing-message {
overflow: hidden;
white-space: nowrap;
display: inline-block;
white-space: normal;
}
@keyframes typing {
from {
width: 0;
}
to {
width: 100%;
}
}
/* Thông báo dưới cùng */
.intro-ms {
display: block;
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
text-align: center;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
text-decoration: none;
cursor: pointer;
}
/* Hiển thị trên máy tính */
@media screen and (max-width: 767px) {
.intro-container {
display: none; /* Ẩn trên điện thoại */
}
}
nav.top_menu ul.sub-menu, .top-nav ul.sub-menu {
background: #fff159;
}
.ff-el-form-control.ff_has_formula.ff_numeric {
display: none !important;
}
</style>
- Mẫu 2
<style>
.contact-method {
border-radius: 5px;
overflow: hidden;
margin-bottom: 10px; /* Khoảng cách giữa các phần liên hệ */
background-color: #fff; /* Màu nền trắng */
}
.contact-link {
display: block;
padding: 24px; /* Khoảng cách giữa icon và text trong mỗi phần liên hệ */
text-decoration: none;
color: #000; /* Màu chữ */
}
.contact-link:hover {
background-color: #ddd; /* Màu nền khi di chuột qua */
}
.wrap {
position: fixed;
width: 220px;
height: 270px;
display: block;
border: 1px solid #000;
background: #1f2228;
border-radius: 5px;
}
.x {
font-family: arial, helvetica;
background: rgb(0 136 204) none repeat scroll 0 0;
font-size: 14px;
font-weight: bold;
color: #fff;
display: inline-block;
border-radius: 5px;
height: 25px;
line-height: 25px;
position: absolute;
right: 0;
text-align: center;
top: -19px;
width: 25px;
z-index: 99999999;
}
.pxem {
text-align: left;
height: 30px;
margin-bottom: 0;
margin-top: 0;
background: rgb(0, 136, 204);
width: 100%;
bottom: 0;
display: block;
left: 0px;
position: absolute;
z-index: 999999999;
line-height: 30px;
}
.pxem a.axem {
color: #fff;
font-family: arial, helvetica;
font-size: 12px;
line-height: 23px;
padding-left: 5px;
text-decoration: none;
}
.pxem a.axem:hover {
text-decoration: underline;
}
.alogo {
position: absolute;
bottom: 0;
right: 0px;
z-index: 999999999999;
width: 40px;
height: 20px;
display: inline-block;
padding-right: 0px;
padding-left: 5px;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
var contactForm = document.getElementById('contactForm');
var openContactForm = document.getElementById('openContactForm');
var xButton = document.querySelector('.x');
var mnvTuvan = document.querySelector('.mnv-tuvan');
openContactForm.addEventListener('click', function () {
openContactForm.style.display = 'none'; // Ẩn nút liên hệ khi mở form
mnvTuvan.style.opacity = '0'; // Làm mờ phần mnv-tuvan khi mở form
mnvTuvan.style.visibility = 'hidden'; // Ẩn phần mnv-tuvan khi mở form
contactForm.style.display = 'block';
contactForm.style.transform = 'translateY(-100%)';
});
xButton.addEventListener('click', function () {
openContactForm.style.display = 'block'; // Hiện lại nút liên hệ khi đóng form
mnvTuvan.style.opacity = '1'; // Hiện lại phần mnv-tuvan khi đóng form
mnvTuvan.style.visibility = 'visible'; // Hiện lại phần mnv-tuvan khi đóng form
contactForm.style.transform = 'translateY(0)';
setTimeout(function () {
contactForm.style.display = 'none';
}, 500);
});
});
</script>
<div id="contactForm" style="position: fixed; width: 220px; height: 270px; display: none; border: 1px solid #000; background: #1f2228; border-radius: 5px; bottom: 0; right: 0; transition: transform 0.5s ease-in-out;">
<span class="x" style="cursor: pointer; position: absolute; right: 10px; top: 10px; color: #fff; font-size: 16px;">X</span>
<div class="contact-methods">
<div class="contact-method">
<a href="<?php echo $link_zalo; ?>" target="_blank" class="contact-link">
<img src="https://usewriter.s1-tastewp.com/wp-content/uploads/2023/12/logo-igold-2.png" alt="Zalo" class="contact-icon" style="width: 20px; height: 20px; vertical-align: middle; margin-bottom: 3px; margin-right: 5px;">
Zalo
</a>
</div>
<div class="contact-method">
<a href="<?php echo $link_facebook; ?>" target="_blank" class="contact-link">
<img src="https://usewriter.s1-tastewp.com/wp-content/uploads/2023/12/logo-igold-2.png" alt="Facebook" class="contact-icon" style="width: 20px; height: 20px; vertical-align: middle; margin-bottom: 3px; margin-right: 5px;">
Facebook
</a>
</div>
<div class="contact-method">
<a href="<?php echo $link_youtube; ?>" target="_blank" class="contact-link">
<img src="https://usewriter.s1-tastewp.com/wp-content/uploads/2023/12/logo-igold-2.png" alt="YouTube" class="contact-icon" style="width: 20px; height: 20px; vertical-align: middle; margin-bottom: 3px; margin-right: 5px;">
YouTube
</a>
</div>
</div>
<p class="pxem" style="margin-top: 20px;">
<a class="axem" href="<?php echo $link_zalo; ?>" target="_blank">Nguyenthaimmo - <?php echo $info_group_admin['fullname']; ?></a>
<a class="alogo"><img src="https://usewriter.s1-tastewp.com/wp-content/uploads/2023/12/logo-igold-2.png" style="margin-top: -20px; width: 27px;"></a>
</p>
</div>
<div class="mnv-tuvan" style="width: 248px; position: fixed; bottom: 50px; padding: 4px 24px 4px 16px; right: 20px; background-color: rgb(0, 136, 204); width: 215px; height: 40px; color: rgb(255, 255, 255); border-radius: 20px; cursor: pointer; box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 12px; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; border: 0px;">
<p style=" "><a id="openContactForm" style="cursor: pointer;">LIÊN HỆ</a></p>
</div>
<div id="contactForm" style="position: fixed;width: 220px;height: 270px;display: none;border: 1px solid #000;background: #1f2228;border-radius: 5px;bottom: 0;right: 0;transition: transform 0.5s ease-in-out;">
<span class="x" style="cursor: pointer; position: absolute; right: 10px; top: 10px; color: #fff; font-size: 16px;">X</span>
$html_data_contact
<p class="pxem" style="">
<a class="axem" style="" href="$link_zalo" target="_blank">Nguyenthaimmo - <?php echo $info_group_admin['fullname']; ?></a>
<a class="alogo" style=""><img src="https://usewriter.s1-tastewp.com/wp-content/uploads/2023/12/logo-igold-2.png" style="margin-top: -20px;width:27px;"></a>
</p>
</div>
Các bạn thay link hình là ok nhé Up lên webiste sau đó lấy link dán vào là nó sẽ hiển thị
Hãy để lại cảm nhận của bạn về bài viết này
Để lại một bình luận