Özel Açma Düğmesi

Sohbet widget'ını açmak için sitenizin herhangi bir yerine bir düğme veya bağlantı ekleyin

Varsayılan olarak ziyaretçiler, sayfanızın köşesindeki kayan sohbet simgesine tıklayarak sohbeti açar. Ancak gezinme çubuğunuza, hero bölümünüze, CTA alanınıza veya başka herhangi bir yere tıklandığında sohbet widget'ını açan kendi özel düğmenizi veya bağlantınızı da ekleyebilirsiniz.

İpucu: Bu, sitenizin gezinme çubuğuna "Bizimle sohbet edin" bağlantısı, ürün sayfasına "Yardım alın" düğmesi veya sohbeti doğrudan açan bir CTA eklemek için idealdir.

Nasıl Çalışır

Asyntai widget betiği sayfanıza yüklendikten sonra, window.AsyntaiWidget adresinde global bir JavaScript API'si sunar. Sohbet widget'ını programatik olarak kontrol etmek için metodlarını çağırabilirsiniz.

Kullanılabilir Yöntemler

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

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

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

Temel Örnek

HTML'nizin herhangi bir yerine bir düğme ekleyin ve window.AsyntaiWidget.open() çağıran bir tıklama işleyicisi bağlayın:

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

Hepsi bu kadar. Bir ziyaretçi düğmeye tıkladığında sohbet widget'ı açılacaktır.

Gezinme Çubuğu Örneği

Sitenizin gezinme çubuğuna "Bizimle sohbet edin" bağlantısı ekleyin:

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

Not: Tıklandığında sayfanın en üste kaymasını önlemek için bağlantı etiketlerinde event.preventDefault() kullanın.

Stillendirilmiş Düğme Örneği

Özel stillendirme ile daha belirgin bir CTA düğmesi oluşturun:

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

Aç/Kapat Düğmesi Örneği

Sohbeti açıp kapatan tek bir düğme istiyorsanız:

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

Widget'ın Hazır Olup Olmadığını Kontrol Etme

Widget asenkron olarak yüklenir, bu nedenle düğmenize widget yüklenmeden önce tıklanabilecekse, önce initialized özelliğini kontrol etmelisiniz:

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

İpucu: Çoğu sayfada widget bir saniye içinde başlatılır. initialized kontrolü yalnızca düğmeniz sayfada çok erken görünüyorsa gereklidir (örneğin, hızlı yüklenen bir sitede ekranın üst kısmında).

Varsayılan Sohbet Simgesini Gizleme

Kayan sohbet simgesini tamamen kendi özel düğmenizle değiştirmek istiyorsanız, CSS ile gizleyebilirsiniz:

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

Uyarı: Varsayılan sohbet simgesini gizlerseniz, özel düğmenizin her sayfada açıkça görünür olduğundan emin olun. Aksi takdirde ziyaretçiler sohbetin mevcut olduğunu bilemez.

Tam API Referansı

Yöntem	Açıklama
`AsyntaiWidget.open()`	Sohbet widget'ını açar
`AsyntaiWidget.close()`	Sohbet widget'ını kapatır
`AsyntaiWidget.toggle()`	Sohbeti açar veya kapatır
`AsyntaiWidget.initialized`	Boolean — `true` widget hazır olduğunda

Belgeler