Nút Mở Tùy chỉnh

Thêm nút hoặc liên kết ở bất kỳ đâu trên trang web của bạn để mở tiện ích chat

Mặc định, khách truy cập mở chat bằng cách nhấn vào biểu tượng chat nổi ở góc trang. Nhưng bạn cũng có thể thêm nút hoặc liên kết tùy chỉnh riêng — trong thanh điều hướng, phần hero, khu vực CTA hoặc bất kỳ đâu — để mở tiện ích chat khi nhấn.

Mẹo: Điều này rất tuyệt để thêm liên kết "Chat với chúng tôi" trong thanh điều hướng, nút "Nhận trợ giúp" trên trang sản phẩm hoặc CTA mở chat trực tiếp.

Cách hoạt động

Sau khi script tiện ích Asyntai được cài đặt trên trang, nó cung cấp API JavaScript toàn cục tại window.AsyntaiWidget. Bạn có thể gọi các phương thức của nó để điều khiển tiện ích chat theo chương trình.

Phương thức Có sẵn

// Open the chat widget
window.AsyntaiWidget.open();

// Close the chat widget
window.AsyntaiWidget.close();

// Toggle open/close
window.AsyntaiWidget.toggle();

Ví dụ Cơ bản

Thêm nút ở bất kỳ đâu trong HTML và gắn trình xử lý nhấn gọi window.AsyntaiWidget.open():

<button onclick="window.AsyntaiWidget.open()">Chat with us</button>

Vậy thôi. Khi khách truy cập nhấn nút, tiện ích chat sẽ mở.

Ví dụ Thanh Điều hướng

Thêm liên kết "Chat với chúng tôi" vào thanh điều hướng trang web:

<nav>
  <a href="/">Home</a>
  <a href="/products">Products</a>
  <a href="/about">About</a>
  <a href="#" onclick="event.preventDefault(); window.AsyntaiWidget.open();">Chat with us</a>
</nav>

Lưu ý: Sử dụng event.preventDefault() trên liên kết neo để ngăn trang cuộn lên đầu khi nhấn.

Ví dụ Nút có Kiểu dáng

Tạo nút CTA nổi bật hơn với kiểu dáng tùy chỉnh:

<style>
  .chat-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: #6366f1;
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
  }
  .chat-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(99, 102, 241, 0.45);
  }
  .chat-btn:active {
    transform: translateY(0);
  }
  .chat-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
  }
</style>

<button class="chat-btn" onclick="window.AsyntaiWidget.open()">
  <svg viewBox="0 0 24 24">
    <path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
  </svg>
  Chat with us
</button>

Ví dụ Nút Bật/Tắt

Nếu bạn muốn một nút duy nhất mở và đóng chat:

<button onclick="window.AsyntaiWidget.toggle()">Toggle Chat</button>

Kiểm tra Tiện ích Đã Sẵn sàng chưa

Tiện ích tải không đồng bộ, vì vậy nếu nút của bạn có thể được nhấn trước khi tiện ích tải xong, bạn nên kiểm tra thuộc tính initialized trước:

<script>
  function openChat() {
    if (window.AsyntaiWidget && window.AsyntaiWidget.initialized) {
      window.AsyntaiWidget.open();
    } else {
      // Widget not ready yet — optionally show a message
      alert('Chat is loading, please try again in a moment.');
    }
  }
</script>

<button onclick="openChat()">Chat with us</button>

Mẹo: Trên hầu hết trang, tiện ích khởi tạo trong vòng một giây. Kiểm tra initialized chỉ cần thiết nếu nút xuất hiện rất sớm trên trang (ví dụ: phía trên nếp gấp trên trang tải nhanh).

Ẩn Biểu tượng Chat Mặc định

Nếu bạn muốn thay thế hoàn toàn biểu tượng chat nổi bằng nút tùy chỉnh riêng, bạn có thể ẩn nó bằng CSS:

<style>
  #mccs-chat-button {
    display: none !important;
  }
</style>

Cảnh báo: Nếu bạn ẩn biểu tượng chat mặc định, hãy đảm bảo nút tùy chỉnh của bạn hiển thị rõ ràng trên mọi trang. Nếu không, khách truy cập sẽ không biết chat có sẵn.

Tham chiếu API Đầy đủ

Phương thức	Mô tả
`AsyntaiWidget.open()`	Mở tiện ích chat
`AsyntaiWidget.close()`	Đóng tiện ích chat
`AsyntaiWidget.toggle()`	Bật/tắt chat mở hoặc đóng
`AsyntaiWidget.initialized`	Boolean — `true` khi tiện ích đã sẵn sàng

Tài liệu