Hướng Dẫn Tạo Nút Hotline và Chat Facebook Cho Website WordPress

Trong kỷ nguyên số, việc tích hợp các công cụ hỗ trợ trực tuyến như hotline và chat trực tiếp trên Facebook vào website đã trở nên thiết yếu, nhất là đối với các doanh nghiệp muốn cải thiện dịch vụ khách hàng của mình. Hôm nay, tôi sẽ hướng dẫn bạn cách để thêm các nút Hotline và Chat Facebook vào website WordPress của bạn mà không cần dùng đến plugin, giúp tránh làm chậm trang web và xung đột với các thành phần khác.

Nút Hotline và Chat Facebook trên website

Tạo Nút Hotline cho Giao Diện Desktop

Đầu tiên, chúng ta sẽ bắt đầu với việc tạo nút Hotline cho giao diện desktop. Cụ thể, bạn cần thực hiện các bước sau:

• Vào Admin > Appearance > Editor > footer.php
• Nếu bạn đang sử dụng theme con của Flatsome, bạn vào Admin > Appearance > Editor > Select theme > Flatsome > footer.php.

Sau đó, hãy thêm đoạn code HTML sau vào cuối file footer.php ngay trước thẻ đóng </body>:

<a href="tel:+84972939830"><div class="hotline"> <span class="before-hotline">Hotline:</span> <span class="hotline-number">084.77555.99</span> </div></a>

Bằng cách này, khi người dùng nhấn vào nút Hotline, họ sẽ được kết nối trực tiếp đến số điện thoại đã cài đặt sẵn.

Tạo Nút Hotline cho website wordpress

Định Dạng CSS Cho Nút Hotline

Để nút Hotline thêm phần nổi bật và hấp dẫn, hãy thêm đoạn code CSS sau vào ngay sau thẻ đóng </body> trong file footer.php của bạn, phía trên đoạn code HTML của nút Hotline đã thêm vào trước đó.

<style>
.hotline {
  position: fixed;
  left: 10px;
  bottom: 10px;
  z-index: 9000;
  display: block;
  background: #fac100;
  color: red;
  padding: 5px 12px;
  border-radius: 99px;
}
.hotline .hotline-number {
  font-size: 20px;
  color: #b20000;
  font-weight: bold;
}
@media (max-width: 767px) {
  .hotline {display:none;}
}
</style>

Tạo Nút Hotline và Chat Facebook cho Giao Diện Mobile

Tiếp theo là tạo nút Hotline và Chat Facebook cho giao diện mobile. Bạn cần thêm đoạn code HTML sau vào phần cuối file footer.php ngay trước thẻ đóng </body>, ngay sau các đoạn code đã thêm trước đó:

<div class="mobile-hotline">
  <div class="mobile-hotline-left"><a href="http://www.messenger.com/t/joseph.thien.75" target="blank">Chat Facebook</a></div>
  <div class="mobile-hotline-right"><a href="tel:+84972939830" target="blank">Gọi điện ngay</a></div>
</div>

Sau đó, thêm đoạn code CSS này vào trong cặp thẻ <style>...</style> để định dạng cho các nút trên giao diện mobile:

@media (max-width: 767px) {
  .mobile-hotline {
    display: block;
    position: fixed;
    bottom: 0;
    width: 100%;
    background: rgba(0,0,0,0.5);
    height: 60px;
    z-index: 9999999;
  }
  .mobile-hotline .mobile-hotline-left, .mobile-hotline .mobile-hotline-right {
    width: 45%;
    float: left;
    text-align: center;
    background: #00a502;
    margin: 7px 5px 0px;
    height: 45px;
    border-radius: 4px;
  }
  .mobile-hotline .mobile-hotline-right {
    float: right;
    background: #fac100;
  }
  .mobile-hotline a {
    color: white;
    line-height: 46px;
    font-size: 16px;
    font-weight: bold;
  }
}

Với các bước trên, bạn đã có thể tạo nút Hotline và Chat Facebook cho cả giao diện desktop và mobile. Đây sẽ là công cụ hữu ích giúp khách hàng của bạn dễ dàng liên hệ và tương tác chỉ với một click.