Tạo nút liên hệ nhanh tuyệt đẹp cho website wordpress

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

Nút liên hệ nhanh giúp tăng tương tác giữa chủ website và khách hàng tốt hơn qua các kênh liên hệ như Facebook, Zalo, Gọi điện thoại… Nơi giải đáp thắc mắc của khách hàng khi còn phân vân một vấn đề nào đó.

Vậy nên hôm nay Alowebtot xin giới thiệu tới các bạn về cách tạo nút liên hệ nhanh cực kì đẹp và hữu ích cho các bạn. Loanh quanh trên mạng mình thấy có nhiều website sử dụng các nút liên hệ tuyệt đẹp. Vì vậy mình đã tìm hiểu được cách tạo vừa dễ dàng vừa hiệu quả cho các bạn. Đối với các bạn không biết code đừng lo các bạn chỉ cần Coppy Dán. Mình nghĩ là cái đó thì ai cũng biết đùng không nào. Ở đây mình chuyên về theme Flatsome nên mình sẽ hướng dẫn cho các bạn tại Flatsome nhé.

Các bước tạo nút liên hệ nhanh

Bước 1: Truy cập vị trí cần dán code

Trên thanh đen đen trên cùng các bạn truy cập Flatsome – Advanced – Global Setting – Footer Script

Bước 2: Coppy đoạn code dưới đây và dán vào đường dẫn trên nhé các bạn

<style>
.phone-mobile {display: none;}
.giuseart-nav {
    position: fixed;
    right: 13px;
    background: #fff;
    border-radius: 10px;
    width: auto;
    z-index: 150;
    bottom: 50px;
    padding: 10px 0;
    border: 2px solid #f2f2f2;
    box-shadow: -5px 10px 8px #888888;
}
.giuseart-nav ul {list-style: none;padding: 0;margin: 0;}
.giuseart-nav ul li {list-style: none!important;}
.giuseart-nav ul>li a {
    border:none;
    padding: 3px;
    display: block;
    border-radius: 5px;
    text-align: center;
    font-size: 10px;
    line-height: 15px;
    color: #515151;
    font-weight: 700;
    max-width: 72.19px;
    max-height: 54px;
    text-decoration: none;
}
.giuseart-nav ul>li .chat_animation{display:none}
.giuseart-nav ul>li a i.ticon-heart {
    background: url(https://alowebtot.com/wp-content/uploads/2021/08/widget_icon_map.png) no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: block;
}
.giuseart-nav ul>li a i.ticon-zalo-circle2 {
    background: url(https://alowebtot.com/wp-content/uploads/2021/08/icon_zalo.png) no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: block;
}.giuseart-nav li .button {
    background: transparent;
}.giuseart-nav ul>li a i.ticon-angle-up {
    background: url(https://alowebtot.com/wp-content/uploads/2021/08/icon-top-moi.png) no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: block;
}.giuseart-nav ul>li a i {
    width: 33px;
    height: 33px;
    display: block;
    margin: auto;
}.giuseart-nav ul li .button .btn_phone_txt {
    position: relative; top:35px;
    font-size: 10px;
    font-weight: bold;
    text-transform: none;
}
.giuseart-nav ul li .button .phone_animation i {
    display: inline-block;
    width: 27px;
    font-size: 26px;
    margin-top: 12px;
}.giuseart-nav ul>li a.chat_animation svg {
    margin: -13px 0 -20px;
}
.giuseart-nav ul>li a i.ticon-messenger {
    background: url(https://alowebtot.com/wp-content/uploads/2021/08/icon_messenger.png) no-repeat;
    background-size: contain;
    width: 36px;
    height: 36px;
    display: block;
}.giuseart-nav ul li .button .phone_animation i {
    display: inline-block;
    width: 27px;
    font-size: 26px;
    margin-top: 12px;
}
.giuseart-nav ul>li a i.ticon-chat-sms {
    background: url(https://alowebtot.com/wp-content/uploads/2021/08/icon_form.png) no-repeat;
    background-size: contain;
    width: 38px;
    height: 36px;
    display: block;
}
.giuseart-nav ul>li a i.icon-phone-w {
    background: url(https://alowebtot.com/wp-content/uploads/2021/08/icon_phone.png) no-repeat;
    background-size: contain;}
.giuseart-nav ul li .button .btn_phone_txt {
    position: relative;
}
@media only screen and (max-width: 600px){
.giuseart-nav li .chat_animation{display:block !Important}

.giuseart-nav li .button .phone_animation {box-shadow: none;
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translate(-50%,0);
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background: #6cb917;
    line-height: 15px;
    border: 2px solid white;
}
.giuseart-nav ul>li a{padding:0; margin:0 auto}
.giuseart-nav {
    background: white;
    width: 100%; border-radius:0;
    color: #fff;
    height: 60px;
    line-height: 50px;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
    padding: 5px;
    margin: 0;
    box-shadow: 0 4px 10px 0 #000;
}
.giuseart-nav li {
    float: left;
    width: 20%;
    list-style: none;
    height: 50px;
}
.phone-mobile{display:block !important}}
</style>
<div class="giuseart-nav">
        <ul>
            <li><a href="https://www.google.com/maps/place/Thi%E1%BA%BFt+k%E1%BA%BF+Website+uy+t%C3%ADn+Alowebtot/@20.4367399,106.3320136,15z/data=!4m5!3m4!1s0x0:0x7c7fac76431a4fe2!8m2!3d20.4367399!4d106.3320136" rel="nofollow" target="_blank"><i class="ticon-heart"></i>Tìm đường</a></li>
            <li><a href="https://zalo.me/0365995626" rel="nofollow" target="_blank"><i class="ticon-zalo-circle2"></i>Zalo</a></li>
                        <li class="phone-mobile">
                            <a href="tel:0365995626" rel="nofollow" class="button">
                                <span class="phone_animation animation-shadow">
                                    <i class="icon-phone-w" aria-hidden="true"></i>
                                </span>
                                <span class="btn_phone_txt">Gọi điện</span>
                            </a>
                        </li>
                        <li><a href="https://www.messenger.com/t/alowebtot" rel="nofollow" target="_blank"><i class="ticon-messenger"></i>Messenger</a></li>
            <li><a href="sms:0365995626" class="chat_animation">
            <i class="ticon-chat-sms" aria-hidden="true" title="Nhắn tin sms"></i>
                Nhắn tin SMS</a>
            </li>
            <li class="to-top-pc">
                <a href="#top" rel="nofollow">
                    <i class="ticon-angle-up" aria-hidden="true" title="Lên trên"></i>
               Quay lên đầu </a>
            </li>
        </ul>
    </div>