Kohandatud avamisnupp

Lisage oma saidile nupp voi link vestlusvidina avamiseks

Vaikimisi avavad kulastajad vestluse, klikkides lehe nurgas olevat holjuvat vestlusikooni. Kuid saate lisada ka oma kohandatud nupu voi lingi - navigeerimisribale, kangelasjaotisesse, CTA-alale voi kuhu iganes mujale - mis avab vestlusvidina klikkimisel.

Vihje: See on suureparane lingi "Vestle meiega" lisamiseks oma saidi navigeerimisribale, nupu "Hangi abi" lisamiseks tootelehele voi CTA lisamiseks, mis avab vestluse otse.

Kuidas see töötab

Kui Asyntai vidina skript on teie lehele paigaldatud, pakub see globaalset JavaScripti API-d aadressil window.AsyntaiWidget. Saate kutsuda selle meetodeid vestlusvidina programmiliseks juhtimiseks.

Saadaolevad meetodid

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

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

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

Pohinaide

Lisage nupp kuhu iganes oma HTML-i ja lisage klikitootleja, mis kutsub window.AsyntaiWidget.open():

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

See ongi koik. Kui kulastaja klopsab nuppu, avaneb vestlusvidin.

Navigeerimisriba naaide

Lisage oma saidi navigeerimisse link "Vestle meiega":

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

Märkus: Kasutage ankurlinkide puhul event.preventDefault(), et vältida lehe üles kerimist klikkimisel.

Stiiliga nupu näide

Looge silmapaistvam CTA-nupp kohandatud stiiliga:

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

Lülitusnupu näide

Kui soovite ühte nuppu, mis avab ja sulgeb vestluse:

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

Vidina valmisoleku kontrollimine

Vidin laadib asünkroonselt, nii et kui teie nuppu võib klikkida enne vidina laadimise lõppu, peaksite kõigepealt kontrollima omadust 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>

Vihje: Enamikul lehtedel initsialiseerub vidin sekundi jooksul. initialized kontrolli on vaja ainult siis, kui teie nupp ilmub lehel väga varakult (nt kiiresti laadival saidil murdejoone kohal).

Vaikimisi vestlusikooni peitmine

Kui soovite hõljuva vestlusikooni täielikult asendada oma kohandatud nupuga, saate selle CSS-iga peita:

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

Hoiatus: Kui peidate vaikimisi vestlusikooni, veenduge, et teie kohandatud nupp on igal lehel selgelt nähtav. Muidu ei tea külastajad, et vestlus on saadaval.

Täielik API-viide

Meetod	Kirjeldus
`AsyntaiWidget.open()`	Avab vestlusvidina
`AsyntaiWidget.close()`	Sulgeb vestlusvidina
`AsyntaiWidget.toggle()`	Avab või sulgeb vestluse
`AsyntaiWidget.initialized`	Boolean - `true` kui vidin on valmis

Dokumentatsioon