Thêm liên hệ đa kênh AIO cho website

Đây là tiện ích lấy ý tưởng từ plugin All in One Support Button + Callback Request, vì mình thấy không cần nhiều tính năng như All in One Support Button + Callback Request sẽ làm nặng website nên tạm code cho nó đơn giản và nhẹ nhàng. Cũng dự kiến làm 1 plugin nhỏ nhẹ với vài field nhưng chắc sẽ viết khi có thời gian rảnh, trong bài này chỉ share code cho những ai không thích tiêu dùng plugin.

Demo contact như ảnh dưới, hoặc bạn có thể xem live demo tại link này

Code có 3 phần, HTML, CSS và JS bạn cho 3 code này vào vị trí thích hợp trên website thì website sẽ hiển thị như demo, sau đó bạn thay thông tin như số điện thoại, zalo, facebook … cho thích hợp với bạn.

Code HTML

Code JS và HTML bạn cho vào phần Footer của website.

Nếu bạn tiêu dùng Flatsome thì có thể vào Advanced > Global Settings kéo xuống dưới phần Body Scripts – Bottom và dán code HTML vào.

Nếu bạn dùng theme khác có thể có mục riêng để nhập js css và html, hoặc bạn cũng có thể dùng plugin WP Code để thêm code, nếu gặp khó khăn bạn có thể nhắn tin qua zalo để được trợ giúp.

<div id="contact" class="arcontactus-widget arcontactus-message right md hidden-xs hidden-sm vutruso-contact">  <div class="messangers-block">    <a class="messanger" rel="nofollow noopener" href="https://www.facebook.com/vutruso" target="_blank">      <span>        <img width="40" height="40" src="https://truongcongthang.com/wp-content/uploads/2024/01/message.jpg" alt="messenger">      </span>      <p>Messenger</p>    </a>    <a class="messanger" rel="nofollow noopener" href="https://www.instagram.com/vutruso" target="_blank">      <span>        <img width="40" height="40" src="https://truongcongthang.com/wp-content/uploads/2024/01/instagram.jpg" alt="instagram">      </span>      <p>Instagram</p>    </a>    <a class="messanger" rel="nofollow noopener" href="https://zalo.me/0963.125.822" target="_blank">      <span>        <img width="40" height="40" src="https://truongcongthang.com/wp-content/uploads/2024/01/zalo.jpg" alt="Zalo">      </span>      <p>Chat Zalo</p>    </a>    <a class="messanger" rel="nofollow noopener" href="tel:0963.125.822" target="_blank">      <span>        <img width="40" height="40" src="https://truongcongthang.com/wp-content/uploads/2024/01/call.jpg" alt="Gọi điện">      </span>      <p>Liên hệ</p>    </a>    <a class="messanger" rel="nofollow noopener" href="#" target="_blank">      <span>        <img width="40" height="40" src="https://truongcongthang.com/wp-content/uploads/2024/01/vitri.jpg" alt="Bản đồ">      </span>      <p>Chỉ đường</p>    </a>  </div>  <div class="arcontactus-message-button" style="background-color: #185137">    <div class="static">      <svg width="20" height="20" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Canvas" transform="translate(-825 -308)"><g id="Vector"><use xlink:href="#path0_fill0123" transform="translate(825 308)" fill="#FFFFFF"></use></g></g><defs><path id="path0_fill0123" d="M 19 4L 17 4L 17 13L 4 13L 4 15C 4 15.55 4.45 16 5 16L 16 16L 20 20L 20 5C 20 4.45 19.55 4 19 4ZM 15 10L 15 1C 15 0.45 14.55 0 14 0L 1 0C 0.45 0 0 0.45 0 1L 0 15L 4 11L 14 11C 14.55 11 15 10.55 15 10Z"></path></defs></svg>      <p>Liên hệ</p>    </div>    <div class="arcontactus-close">      <svg width="12" height="13" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Canvas" transform="translate(-4087 108)"><g id="Vector"><use xlink:href="#path0_fill" transform="translate(4087 -108)" fill="currentColor"></use></g></g><defs><path id="path0_fill" d="M 14 1.41L 12.59 0L 7 5.59L 1.41 0L 0 1.41L 5.59 7L 0 12.59L 1.41 14L 7 8.41L 12.59 14L 14 12.59L 8.41 7L 14 1.41Z"></path></defs></svg>    </div>    <div class="pulsation" style="background-color: #185137"></div>    <div class="pulsation" style="background-color: #185137"></div>      </div></div>

Code CSS

Code CSS bạn có thể cho vào phần Custom CSS nếu dùng Flatsome

 svg:not(:root) {overflow: hidden;}* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}:after, :before {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}.hidden {display: none !important;}@media (max-width: 767px) {.hidden-xs {display: none !important;}}@media (min-width: 768px) and (max-width: 991px) {.hidden-sm {display: none !important;}}.arcontactus-widget.arcontactus-message {transition: all 0.3s;}.arcontactus-widget.arcontactus-message {right: 10px;bottom: 75px;}.arcontactus-widget.arcontactus-message {z-index: 10000;right: 10px;bottom: 140px;position: fixed !important;}.arcontactus-widget {line-height: 1;}.arcontactus-widget .messangers-block.show-messageners-block {-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);}.arcontactus-widget.md .messangers-block {bottom: 70px;}.arcontactus-widget .messangers-block {background: center no-repeat #fff;box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);width: 235px;position: absolute;bottom: 80px;right: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;-webkit-box-align: start;-ms-flex-align: start;align-items: flex-start;padding: 14px 0;-webkit-box-sizing: border-box;box-sizing: border-box;border-radius: 7px;-webkit-transform-origin: 80% 105%;-ms-transform-origin: 80% 105%;transform-origin: 80% 105%;-webkit-transform: scale(0);-ms-transform: scale(0);transform: scale(0);-webkit-transition: ease-out 0.12s all;-o-transition: ease-out 0.12s all;transition: ease-out 0.12s all;z-index: 10000;}.arcontactus-widget.md.right .messangers-block:before {right: 21px;}.arcontactus-widget .messangers-block:before {position: absolute;bottom: -7px;right: 25px;left: auto;display: inline-block !important;border-right: 8px solid transparent;border-top: 8px solid #fff;border-left: 8px solid transparent;content: "";}.arcontactus-widget .messanger {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;-webkit-box-align: center;-ms-flex-align: center;align-items: center;margin: 0;cursor: pointer;width: 100%;padding: 8px 20px 8px 60px;position: relative;min-height: 54px;text-decoration: none;}.arcontactus-widget .messanger span {position: absolute;left: 10px;top: 50%;margin-top: -20px;display: block;width: 40px;height: 40px;border-radius: 50%;margin-right: 10px;color: #fff;text-align: center;vertical-align: middle;}.arcontactus-widget .messanger p {margin: 0;font-size: 14px;color: rgba(0, 0, 0, 0.87);padding: 0;}.arcontactus-widget .messanger span svg {width: 24px;height: 24px;vertical-align: middle;text-align: center;display: block;position: absolute;top: 50%;left: 50%;margin-top: -12px;margin-left: -12px;}.arcontactus-widget .arcontactus-message-button .static {position: absolute;top: 50%;left: 50%;margin-top: -19px;margin-left: -26px;width: 52px;height: 52px;text-align: center;}.arcontactus-widget .arcontactus-message-button .static.hidden {display: none;}.arcontactus-widget .static {transition: 0.2s all;}.arcontactus-widget .arcontactus-message-button .static svg {width: 24px;height: 24px;color: #fff;}.arcontactus-widget .arcontactus-message-button p {color: #fff;font-weight: 700;font-size: 10px;line-height: 11px;margin: 0;}.arcontactus-widget .arcontactus-close {color: #fff;}.arcontactus-widget .arcontactus-close.show-messageners-block svg {-webkit-transform: rotate(0) scale(1);-ms-transform: rotate(0) scale(1);transform: rotate(0) scale(1);}.arcontactus-widget .arcontactus-close svg {-webkit-transform: rotate(180deg) scale(0);-ms-transform: rotate(180deg) scale(0);transform: rotate(180deg) scale(0);-webkit-transition: ease-in 0.12s all;-o-transition: ease-in 0.12s all;transition: ease-in 0.12s all;display: block;}.arcontactus-widget.md .arcontactus-message-button, .arcontactus-widget.md.arcontactus-message {width: 60px;height: 60px;}.arcontactus-widget .arcontactus-message-button {width: 70px;position: absolute;height: 70px;right: 0;background-color: red;border-radius: 50px;-webkit-box-sizing: border-box;box-sizing: border-box;text-align: center;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;cursor: pointer;}.arcontactus-widget .messanger:hover {background-color: #eee;}.st0 {fill: #fdfefe;}.st1 {fill: #0180c7;}.st2 {fill: #0172b1;}.st3 {fill: none;stroke: #0180c7;stroke-width: 2;stroke-miterlimit: 10;}.arcontactus-widget .messanger.zaloIcon span svg {width: 100%;height: 100%;top: 0;left: 0;margin: 0;border-radius: 50%;}.arcontactus-widget .messanger.zaloIcon span {background: 0 0;}.arcontactus-widget.md .arcontactus-message-button .pulsation {width: 74px;height: 74px;}.arcontactus-widget .arcontactus-message-button .pulsation {width: 84px;height: 84px;background-color: red;border-radius: 50px;position: absolute;left: -7px;top: -7px;z-index: -1;-webkit-transform: scale(0);-ms-transform: scale(0);transform: scale(0);-webkit-animation: arcontactus-pulse 2s infinite;animation: arcontactus-pulse 2s infinite;}.arcontactus-widget .pulsation:nth-of-type(2n) {-webkit-animation-delay: 0.5s;animation-delay: 0.5s;}.arcontactus-widget .arcontactus-message-button .static svg {width: 24px;height: 24px;color: #fff;}

Code JS

<script>jQuery(document).ready(function () {  jQuery(".arcontactus-message-button").click(function () {    jQuery(".arcontactus-close").toggleClass("show-messageners-block");    jQuery(".messangers-block").toggleClass("show-messageners-block");    jQuery(".static").toggleClass("hidden");  });});</script>

Như vậy là bạn đã thêm phần liên hệ cho website rồi, nếu bạn gặp khó khăn nào có thể nhắn tin để được trợ giúp.

Xin cảm ơn.