Prilagojen gumb za odpiranje

Dodajte gumb ali povezavo kamorkoli na svojem spletnem mestu za odpiranje pripomočka za klepet

Privzeto obiskovalci odprejo klepet s klikom na plavajočo ikono za klepet v kotu vaše strani. Lahko pa tudi dodate svoj prilagojen gumb ali povezavo — v navigacijsko vrstico, glavno sekcijo, območje CTA ali kamorkoli drugam — ki ob kliku odpre pripomoček za klepet.

Nasvet: To je odlično za dodajanje povezave "Klepetajte z nami" v navigacijski vrstici vašega spletnega mesta, gumba "Poiščite pomoč" na strani izdelka ali CTA, ki neposredno odpre klepet.

Kako deluje

Ko je skript pripomočka Asyntai nameščen na vaši strani, izpostavi globalni API JavaScript na window.AsyntaiWidget. Lahko kličete njegove metode za programsko upravljanje pripomočka za klepet.

Razpoložljive metode

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

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

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

Osnovni primer

Dodajte gumb kamorkoli v svoj HTML in pripnite obravnavalec klikov, ki kliče window.AsyntaiWidget.open():

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

To je vse. Ko obiskovalec klikne gumb, se bo pripomoček za klepet odprl.

Primer navigacijske vrstice

Dodajte povezavo "Klepetajte z nami" v navigacijo vašega spletnega mesta:

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

Opomba: Uporabite event.preventDefault() na sidrnih povezavah, da preprečite pomikanje strani na vrh ob kliku.

Primer oblikovanega gumba

Ustvarite bolj izrazit CTA gumb s prilagojenim oblikovanjem:

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

Primer preklopnega gumba

Če želite en sam gumb, ki odpira in zapira klepet:

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

Preverjanje, ali je pripomoček pripravljen

Pripomoček se nalaga asinhrono, zato če se vaš gumb morda klikne, preden se pripomoček konča z nalaganjem, morate najprej preveriti lastnost 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>

Nasvet: Na večini strani se pripomoček inicializira v eni sekundi. Preverjanje initialized je potrebno samo, če se vaš gumb pojavi zelo zgodaj na strani (npr. nad pregibom na hitro nalagajoči se strani).

Skrivanje privzete ikone za klepet

Če želite v celoti nadomestiti plavajočo ikono za klepet s svojim prilagojenim gumbom, jo lahko skrijete s CSS:

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

Opozorilo: Če skrijete privzeto ikono za klepet, se prepričajte, da je vaš prilagojen gumb jasno viden na vsaki strani. Sicer obiskovalci ne bodo vedeli, da je klepet na voljo.

Popolna API referenca

Metoda	Opis
`AsyntaiWidget.open()`	Odpre pripomoček za klepet
`AsyntaiWidget.close()`	Zapre pripomoček za klepet
`AsyntaiWidget.toggle()`	Preklopi klepet med odprtim in zaprtim
`AsyntaiWidget.initialized`	Boolean — `true` ko je pripomoček pripravljen

Dokumentacija