Tombol Buka Kustom

Tambahkan tombol atau tautan di mana saja di situs Anda untuk membuka widget chat

Secara default, pengunjung membuka obrolan dengan mengklik ikon obrolan mengambang di sudut halaman Anda. Namun Anda juga dapat menambahkan tombol atau tautan kustom Anda sendiri — di bilah navigasi, bagian hero, area CTA, atau di mana saja — yang membuka widget obrolan saat diklik.

Tip: Ini sangat cocok untuk menambahkan tautan "Obrolan dengan kami" di bilah navigasi situs Anda, tombol "Dapatkan bantuan" di halaman produk, atau CTA yang membuka obrolan secara langsung.

Cara Kerjanya

Setelah skrip widget Asyntai terpasang di halaman Anda, skrip tersebut menyediakan API JavaScript global di window.AsyntaiWidget. Anda dapat memanggil metodenya untuk mengontrol widget obrolan secara terprogram.

Metode yang Tersedia

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

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

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

Contoh Dasar

Tambahkan tombol di mana saja di HTML Anda dan pasang handler klik yang memanggil window.AsyntaiWidget.open():

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

Itu saja. Ketika pengunjung mengklik tombol, widget obrolan akan terbuka.

Contoh Bilah Navigasi

Tambahkan tautan "Obrolan dengan kami" ke navigasi situs 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>

Catatan: Gunakan event.preventDefault() pada tautan anchor untuk mencegah halaman bergulir ke atas saat diklik.

Contoh Tombol Bergaya

Buat tombol CTA yang lebih menonjol dengan gaya kustom:

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

Jika Anda menginginkan satu tombol yang membuka dan menutup obrolan:

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

Memeriksa Apakah Widget Sudah Siap

Widget dimuat secara asinkron, jadi jika tombol Anda mungkin diklik sebelum widget selesai dimuat, Anda harus memeriksa properti 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>

Tip: Di sebagian besar halaman, widget terinisialisasi dalam satu detik. Pemeriksaan initialized hanya diperlukan jika tombol Anda muncul sangat awal di halaman (contoh, di atas lipatan pada situs yang cepat dimuat).

Menyembunyikan Ikon Obrolan Default

Jika Anda ingin mengganti sepenuhnya ikon obrolan mengambang dengan tombol kustom Anda sendiri, Anda dapat menyembunyikannya dengan CSS:

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

Peringatan: Jika Anda menyembunyikan ikon obrolan default, pastikan tombol kustom Anda terlihat jelas di setiap halaman. Jika tidak, pengunjung tidak akan tahu bahwa obrolan tersedia.

Referensi API Lengkap

Metode	Deskripsi
`AsyntaiWidget.open()`	Membuka widget obrolan
`AsyntaiWidget.close()`	Menutup widget obrolan
`AsyntaiWidget.toggle()`	Mengalihkan obrolan terbuka atau tertutup
`AsyntaiWidget.initialized`	Boolean — `true` saat widget sudah siap

Dokumentasi