Vlastní tlačítko pro otevření

Přidejte tlačítko nebo odkaz kamkoli na svůj web pro otevření chatovacího widgetu

Ve výchozím nastavení návštěvníci otevřou chat kliknutím na plovoucí ikonu chatu v rohu stránky. Můžete ale také přidat vlastní tlačítko nebo odkaz – do navigační lišty, hero sekce, CTA oblasti nebo kamkoli jinam – který po kliknutí otevře chatovací widget.

Tip: To je skvělé pro přidání odkazu "Chatujte s námi" do navigační lišty vašeho webu, tlačítka "Získat pomoc" na stránce produktu nebo CTA, které přímo otevře chat.

Jak to funguje

Jakmile je skript widgetu Asyntai nainstalován na vaší stránce, zpřístupní globální JavaScript API na window.AsyntaiWidget. Můžete volat jeho metody pro programové ovládání chatovacího widgetu.

Dostupné metody

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

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

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

Základní příklad

Přidejte tlačítko kamkoli do svého HTML a připojte obsluhu kliknutí, která volá window.AsyntaiWidget.open():

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

To je vše. Když návštěvník klikne na tlačítko, otevře se chatovací widget.

Příklad navigační lišty

Přidejte odkaz "Chatujte s námi" do navigace svého webu:

<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žijte event.preventDefault() na kotvící odkazy, abyste zabránili rolování stránky nahoru při kliknutí.

Příklad stylovaného tlačítka

Vytvořte výraznější CTA tlačítko s vlastním stylem:

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

Příklad přepínacího tlačítka

Pokud chcete jedno tlačítko, které otevírá a zavírá chat:

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

Kontrola připravenosti widgetu

Widget se načítá asynchronně, takže pokud by mohlo být na vaše tlačítko kliknuto před dokončením načítání widgetu, měli byste nejprve zkontrolovat vlastnost 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ětšině stránek se widget inicializuje během sekundy. Kontrola initialized je potřebná pouze v případě, že se vaše tlačítko zobrazí velmi brzy na stránce (např. nad ohybem na rychle se načítajícím webu).

Skrytí výchozí ikony chatu

Pokud chcete plně nahradit plovoucí ikonu chatu vlastním tlačítkem, můžete ji skrýt pomocí CSS:

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

Varování: Pokud skryjete výchozí ikonu chatu, ujistěte se, že je vaše vlastní tlačítko jasně viditelné na každé stránce. Jinak návštěvníci nebudou vědět, že je chat dostupný.

Kompletní reference API

Metoda	Popis
`AsyntaiWidget.open()`	Otevře chatovací widget
`AsyntaiWidget.close()`	Zavře chatovací widget
`AsyntaiWidget.toggle()`	Přepíná chat mezi otevřeným a zavřeným stavem
`AsyntaiWidget.initialized`	Boolean – `true` když je widget připraven

Dokumentace