Prilagođeni gumb za otvaranje

Dodajte gumb ili poveznicu bilo gdje na svojoj stranici za otvaranje chat widgeta

Prema zadanim postavkama, posjetitelji otvaraju chat klikom na plutajuću ikonu chata u kutu vaše stranice. Ali možete dodati i vlastiti prilagođeni gumb ili poveznicu — u navigacijsku traku, hero odjeljak, CTA područje ili bilo gdje drugdje — koji otvara chat widget kada se klikne.

Savjet: Ovo je odlično za dodavanje poveznice "Razgovarajte s nama" u navigacijsku traku vaše stranice, gumba "Zatražite pomoć" na stranici proizvoda ili CTA-a koji izravno otvara chat.

Kako funkcionira

Nakon što je Asyntai widget skripta instalirana na vašu stranicu, izlaže globalni JavaScript API na window.AsyntaiWidget. Možete pozivati njegove metode za programsko upravljanje chat widgetom.

Dostupne metode

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

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

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

Osnovni primjer

Dodajte gumb bilo gdje u svom HTML-u i priložite rukovatelja klikova koji poziva window.AsyntaiWidget.open():

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

To je sve. Kada posjetitelj klikne gumb, chat widget će se otvoriti.

Primjer navigacijske trake

Dodajte poveznicu "Razgovarajte s nama" u navigaciju vaše stranice:

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

Napomena: Koristite event.preventDefault() na sidrenim poveznicama kako biste spriječili pomicanje stranice na vrh kada se klikne.

Primjer stiliziranog gumba

Kreirajte istaknutiji CTA gumb s prilagođenim stilom:

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

Primjer gumba za prebacivanje

Ako želite jedan gumb koji otvara i zatvara chat:

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

Provjera je li widget spreman

Widget se učitava asinkrono, pa ako se vaš gumb može kliknuti prije nego što widget završi učitavanje, trebate prvo provjeriti svojstvo 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>

Savjet: Na većini stranica, widget se inicijalizira unutar sekunde. Provjera initialized potrebna je samo ako se vaš gumb pojavljuje vrlo rano na stranici (npr. iznad pregiba na brzo učitavajućoj stranici).

Skrivanje zadane ikone chata

Ako želite potpuno zamijeniti plutajuću ikonu chata svojim prilagođenim gumbom, možete je sakriti pomoću CSS-a:

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

Upozorenje: Ako sakrijete zadanu ikonu chata, provjerite je li vaš prilagođeni gumb jasno vidljiv na svakoj stranici. Inače posjetitelji neće znati da je chat dostupan.

Potpuna API referenca

Metoda	Opis
`AsyntaiWidget.open()`	Otvara chat widget
`AsyntaiWidget.close()`	Zatvara chat widget
`AsyntaiWidget.toggle()`	Prebacuje chat između otvorenog i zatvorenog
`AsyntaiWidget.initialized`	Boolean — `true` kada je widget spreman

Dokumentacija