Vlastné tlačidlo na otvorenie

Pridajte tlačidlo alebo odkaz kdekoľvek na vašom webe na otvorenie chatovacieho widgetu

Predvolene navstevnici otvaraju chat kliknutim na plavajucu ikonu chatu v rohu vasej stranky. Ale mozete tiez pridat vlastne tlacidlo alebo odkaz — do vasej navigacnej listy, hero sekcie, CTA oblasti alebo kamkolvek inde — ktore po kliknuti otvori chatovaci widget.

Tip: Je to skvelé na pridanie odkazu "Chatujte s nami" do navigačnej lišty vašej stránky, tlačidla "Získať pomoc" na produktovej stránke alebo CTA, ktoré otvorí chat priamo.

Ako to funguje

Keď je skript widgetu Asyntai nainštalovaný na vašej stránke, sprístupní globálne JavaScript API na window.AsyntaiWidget. Môžete volať jeho metódy na programové ovládanie chatovacieho widgetu.

Dostupné metódy

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

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

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

Základný príklad

Pridajte tlacidlo kamkolvek do vasho HTML a pripojte handler kliknutia, ktory vola window.AsyntaiWidget.open():

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

To je všetko. Keď návštevník klikne na tlačidlo, chatovací widget sa otvorí.

Príklad navigačnej lišty

Pridajte odkaz "Chatujte s nami" do navigácie vašej stránky:

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

Poznámka: Použite event.preventDefault() na kotviace odkazy, aby sa stránka neposúvala nahor pri kliknutí.

Príklad štýlovaného tlačidla

Vytvorte výraznejšie CTA tlačidlo s vlastným štýlovaním:

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

Príklad prepínacieho tlačidla

Ak chcete jedno tlačidlo, ktoré otvára a zatvára chat:

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

Kontrola, či je widget pripravený

Widget sa načítava asynchrónne, takže ak by sa na vaše tlačidlo mohlo kliknúť pred dokončením načítavania widgetu, mali by ste najprv skontrolovať vlastnosť initialized:

<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: Na väčšine stránok sa widget inicializuje do sekundy. Kontrola initialized je potrebná iba ak sa vaše tlačidlo zobrazuje veľmi skoro na stránke (napr. nad zlomom na rýchlo načítavanej stránke).

Skrytie predvolenej ikony chatu

Ak chcete úplne nahradiť plávajúcu ikonu chatu vlastným tlačidlom, môžete ju skryť pomocou CSS:

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

Varovanie: Ak skryjete predvolenú ikonu chatu, ubezpečte sa, že vaše vlastné tlačidlo je jasne viditeľné na každej stránke. Inak návštevníci nebudú vedieť, že chat je dostupný.

Úplná API referencia

Metóda	Popis
`AsyntaiWidget.open()`	Otvorí chatovací widget
`AsyntaiWidget.close()`	Zatvorí chatovací widget
`AsyntaiWidget.toggle()`	Prepne chat medzi otvoreným a zatvoreným stavom
`AsyntaiWidget.initialized`	Boolean — `true` keď je widget pripravený

Dokumentácia