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>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

<span>Trò chuyện</span>

</button>

</div>

</div>

<i class="fa fa-comment"></i> Messenger

</a>

</div>

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>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

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

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>

<a href="<?php echo $link_zalo; ?>" target="_blank" class="contact-link">

Zalo

</a>

</div>

<a href="<?php echo $link_facebook; ?>" target="_blank" class="contact-link">

Facebook

</a>

</div>

<a href="<?php echo $link_youtube; ?>" target="_blank" class="contact-link">

YouTube

</a>

</div>

<a class="axem" href="<?php echo $link_zalo; ?>" target="_blank">Nguyenthaimmo - <?php echo $info_group_admin['fullname']; ?></a>

</p>

</div>

</div>

$html_data_contact

<a class="axem" style="" href="$link_zalo" target="_blank">Nguyenthaimmo - <?php echo $info_group_admin['fullname']; ?></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ị

5/5 - (53 bình chọn)

Hãy để lại cảm nhận của bạn về bài viết này

Code nút liên hệ website wordpress phần 2