Thêm nút gọi điện thoại, Zalo, Facebook,… đẹp cho web WordPress

Để thêm các nút gọi điện, chat Zalo, chat Facebook,… vào trang web WordPress một cách đẹp mắt, bạn có thể sử dụng các phương pháp sau:

Cách 1: Sử dụng Plugin

1. Plugin “WP Call Button” (Dành cho nút gọi điện)

• Cài đặt Plugin:
  • Vào trang quản trị WordPress.
  • Điều hướng tới Plugin > Cài mới.
  • Tìm kiếm “WP Call Button“.
  • Cài đặt và kích hoạt plugin.
• Cấu hình Plugin:
  • Sau khi kích hoạt, vào Settings > WP Call Button.
  • Tại đây, bạn có thể cấu hình số điện thoại, văn bản hiển thị trên nút, và vị trí hiển thị.
  • Plugin cũng cho phép bạn tùy chỉnh giao diện nút theo màu sắc và kích thước mong muốn.

2. Plugin “Social Chat” (Dành cho Zalo, WhatsApp, Facebook Messenger)

• Cài đặt Plugin:
  • Vào trang quản trị WordPress.
  • Điều hướng tới Plugin > Cài mới.
  • Tìm kiếm “Social Chat“.
  • Cài đặt và kích hoạt plugin.
• Cấu hình Plugin:
  • Vào Settings > Social Chat.
  • Bạn có thể thêm các kênh chat như Zalo, WhatsApp, Facebook Messenger.
  • Tùy chỉnh icon, màu sắc, vị trí hiển thị trên trang web.
  • Plugin này cũng hỗ trợ cài đặt khung giờ làm việc hoặc chỉ hiển thị trong giờ làm việc.

Cách 2: Thêm thủ công bằng HTML/CSS và JavaScript

Nếu bạn muốn tùy chỉnh nút thủ công mà không cần sử dụng plugin, bạn có thể sử dụng HTML, CSS và JavaScript.

1. Thêm HTML vào trang hoặc widget:

<div class="contact-buttons">
    <a href="tel:+84123456789" class="call-button">Gọi điện</a>
    <a href="https://zalo.me/your_zalo_id" class="zalo-button">Chat Zalo</a>
    <a href="https://m.me/your_facebook_id" class="messenger-button">Chat Facebook</a>
</div>

2. Thêm CSS để làm đẹp:

.contact-buttons {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contact-buttons a {
    text-align: center;
    padding: 10px 15px;
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
    font-size: 14px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: background-color 0.3s ease;
}

.call-button {
    background-color: #34c759;
}

.zalo-button {
    background-color: #0084ff;
}

.messenger-button {
    background-color: #0078ff;
}

.contact-buttons a:hover {
    opacity: 0.8;
}

3. Thêm JavaScript (nếu cần):

Nếu bạn muốn có hiệu ứng chuyển động hoặc các tính năng nâng cao hơn, bạn có thể thêm JavaScript tùy chỉnh. Tuy nhiên, CSS và HTML cơ bản cũng đủ để tạo các nút đẹp mắt và chức năng.

Cách 3: Sử dụng Shortcode (Tùy chỉnh nút dễ dàng)

Bạn cũng có thể tạo shortcode để chèn các nút này vào bất kỳ nơi nào trên trang web.

1. Thêm mã vào file functions.php:

function contact_buttons_shortcode() {
    $output = '<div class="contact-buttons">';
    $output .= '<a href="tel:+84123456789" class="call-button">Gọi điện</a>';
    $output .= '<a href="https://zalo.me/your_zalo_id" class="zalo-button">Chat Zalo</a>';
    $output .= '<a href="https://m.me/your_facebook_id" class="messenger-button">Chat Facebook</a>';
    $output .= '</div>';
    return $output;
}
add_shortcode('contact_buttons', 'contact_buttons_shortcode');

2. Sử dụng shortcode trong bài viết hoặc trang:

[contact_buttons]