Tiện ích liên hệ cho website – cố định ở bottom mobile

Lúc trươc mình có chia sẽ code liên hệ all in one khá hay ở desktop, nếu ban chưa biết có thể xem qua bài viết này nhé, trong bài viết này là 1 tiện ích nhỏ gọn chỉ hiển thị trên thiết bị di động.

Bạn có thể xem qua demo ở ảnh dưới đây.

Tiện ích này có 4 mục liên hệ là: Gọi điện, nhắn tin, Zalo và Facebook.

Nếu bạn thích code này có thể copy code dưới đây để dán vào website của bạn, sau đó đổi lại các thông tin cho phù hợp là được.

<div class="vutruso-contacts">
  <ul>
    <li>
      <a id="goidien" href="tel:0868017791">
        <img alt="" width="35" height="28" src="https://vutruso.com/wp-content/uploads/2024/07/icon-phone2.png">
        <br>
        <span>Gọi điện</span>
      </a>
    </li>
    <li>
      <a id="nhantin" href="sms:0868017791">
        <img alt="" width="35" height="28" src="https://vutruso.com/wp-content/uploads/2024/07/icon-sms2.png">
        <br>
        <span>Nhắn tin</span>
      </a>
    </li>
    <li>
      <a id="chatzalo" href="https://zalo.me/0868017791">
        <img alt="" width="35" height="28" src="https://vutruso.com/wp-content/uploads/2024/07/icon-zalo2.png">
        <br>
        <span>Chat zalo</span>
      </a>
    </li>
    <li>
      <a id="chatfb" href="https://www.messenger.com/t/vutruso">
        <img alt="" width="35" height="28" src="https://vutruso.com/wp-content/uploads/2024/07/icon-mesenger2.png">
        <br>
        <span>Chat Facebook</span>
      </a>
    </li>
  </ul>
</div>

<style>
  .vutruso-contacts {
    display: none
  }

  @media (max-width: 767px) {
    .vutruso-contacts {
      display: block;
      position: fixed;
      bottom: 0;
      background: white;
      width: 100%;
      z-index: 999;
      box-shadow: 2px 1px 1px #dedede;
      border-top: 1px solid #eaeaea;
      max-width: 100%;
      opacity: 1;
    }

    .vutruso-contacts ul li {
      width: 25%;
      float: left;
      list-style: none;
      text-align: center;
      font-size: 11px;
    }

    .vutruso-contacts ul li span {
      color: black
    }

    .vutruso-contacts ul li img {
      width: 35px;
      margin-top: 10px;
      margin-bottom: 0px;
    }

    .vutruso-contacts ul {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-content: center;
      justify-content: center;
      align-items: center;
      margin-left: 0;
      padding-left: 0;
      margin-bottom: 0;
      max-width: 100%;
    }
  }
</style>

Nhớ thay 0868017791 và các thông tin thành thông tin của bạn nhé.

Bạn có thể thêm code này vào footer của website, nếu bạn gặp khó khăn có thể cài thêm plugin wp-code để thêm vào cho tiện nhé, nếu trong theme bạn có chức năng thêm vào rồi thì không cần cài thêm để khỏi nặng web.

Nếu có thắc mắc hoặc yêu cầu hỗ trợ vui lòng live chat qua zalo số 0868017791

Xin cảm ơn.