Butang Buka Tersuai

Tambah butang atau pautan di mana-mana sahaja pada tapak anda untuk membuka widget sembang

Secara lalai, pengunjung membuka sembang dengan mengklik ikon sembang terapung di sudut halaman anda. Tetapi anda juga boleh menambah butang atau pautan tersuai anda sendiri — di bar navigasi, bahagian hero, kawasan CTA, atau di mana-mana sahaja — yang membuka widget sembang apabila diklik.

Petua: Ini bagus untuk menambah pautan \"Berbual dengan kami\" di bar navigasi tapak anda, butang \"Dapatkan bantuan\" di halaman produk, atau CTA yang membuka sembang secara terus.

Cara Ia Berfungsi

Setelah skrip widget Asyntai dipasang pada halaman anda, ia mendedahkan API JavaScript global di window.AsyntaiWidget. Anda boleh memanggil kaedahnya untuk mengawal widget sembang secara programatik.

Kaedah yang Tersedia

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

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

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

Contoh Asas

Tambah butang di mana-mana dalam HTML anda dan lampirkan pengendali klik yang memanggil window.AsyntaiWidget.open():

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

Itu sahaja. Apabila pelawat mengklik butang, widget sembang akan terbuka.

Contoh Bar Navigasi

Tambah pautan "Berbual dengan kami" ke navigasi laman anda:

<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>

Nota: Gunakan event.preventDefault() pada pautan sauh untuk menghalang halaman daripada menatal ke atas apabila diklik.

Contoh Butang Bergaya

Cipta butang CTA yang lebih menonjol dengan gaya tersuai:

<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>

Contoh Butang Togol

Jika anda mahukan satu butang yang membuka dan menutup perbualan:

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

Memeriksa Jika Widget Sudah Sedia

Widget dimuatkan secara tak segerak, jadi jika butang anda mungkin diklik sebelum widget selesai dimuatkan, anda harus memeriksa sifat initialized terlebih dahulu:

<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>

Petua: Pada kebanyakan halaman, widget dimulakan dalam masa sesaat. Semakan initialized hanya diperlukan jika butang anda muncul sangat awal di halaman (cth., di atas lipatan pada laman yang dimuatkan dengan pantas).

Menyembunyikan Ikon Perbualan Lalai

Jika anda ingin menggantikan sepenuhnya ikon perbualan terapung dengan butang tersuai anda sendiri, anda boleh menyembunyikannya dengan CSS:

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

Amaran: Jika anda menyembunyikan ikon perbualan lalai, pastikan butang tersuai anda jelas kelihatan pada setiap halaman. Jika tidak, pengunjung tidak akan tahu perbualan tersedia.

Rujukan API Penuh

Kaedah	Penerangan
`AsyntaiWidget.open()`	Membuka widget perbualan
`AsyntaiWidget.close()`	Menutup widget perbualan
`AsyntaiWidget.toggle()`	Menogol perbualan buka atau tutup
`AsyntaiWidget.initialized`	Boolean — `true` apabila widget sudah sedia

Dokumentasi