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

Code WordPress 26/01/2024 In trang này

Đâ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ự định 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 sử 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í phù 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 phù 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 sử 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.
Tối ưu Google fonts với Cloudflare Fonts
Code xoá dns-prefetch s.w.org trong WordPress
Slider Revolution và LiteSpeed gặp lỗi khi sử dụng lazy loading

<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://vutruso.com/wp-content/uploads/2024/01/message.png" 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://vutruso.com/wp-content/uploads/2024/01/instagram.png" alt="instagram">
      </span>
      <p>Instagram</p>
    </a>
    <a class="messanger" rel="nofollow noopener" href="https://zalo.me/0868017791" target="_blank">
      <span>
        <img width="40" height="40" src="https://vutruso.com/wp-content/uploads/2024/01/zalo.png" alt="Zalo">
      </span>
      <p>Chat Zalo</p>
    </a>
    <a class="messanger" rel="nofollow noopener" href="tel:0868017791" target="_blank">
      <span>
        <img width="40" height="40" src="https://vutruso.com/wp-content/uploads/2024/01/call.png" 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://vutruso.com/wp-content/uploads/2024/01/vitri.png" 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.