Pasirinktinis atidarymo mygtukas

Pridėkite mygtuką arba nuorodą bet kurioje savo svetainės vietoje, kad atidarytumėte pokalbių valdiklį

Pagal numatymą lankytojai atidaro pokalbį spustelėdami slankiąją pokalbio piktogramą puslapio kampe. Tačiau galite pridėti savo pasirinktinį mygtuką ar nuorodą — naršymo juostoje, pagrindinėje skiltyje, CTA srityje ar bet kur kitur — kuri atidaro pokalbių valdiklį paspaudus.

Patarimas: Tai puikiai tinka pridėti "Susisiekite su mumis" nuorodą svetainės naršymo juostoje, "Gauti pagalbą" mygtuką produkto puslapyje arba CTA, kuris tiesiogiai atidaro pokalbį.

Kaip tai veikia

Kai Asyntai valdiklio skriptas yra įdiegtas jūsų puslapyje, jis atskleidžia globalią JavaScript API adresu window.AsyntaiWidget. Galite iškviesti jo metodus pokalbių valdikliui programiškai valdyti.

Prieinami metodai

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

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

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

Pagrindinis pavyzdys

Pridėkite mygtuką bet kur savo HTML ir prijunkite spustelėjimo tvarkyklę, kuri iškviečia window.AsyntaiWidget.open():

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

Tai viskas. Kai lankytojas spustelės mygtuką, pokalbių valdiklis atsidarys.

Naršymo juostos pavyzdys

Pridėkite "Susisiekite su mumis" nuorodą į savo svetainės naršymą:

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

Pastaba: Naudokite event.preventDefault() nuorodose, kad puslapis neslinktų į viršų paspaudus.

Stilizuoto mygtuko pavyzdys

Sukurkite ryškesnį CTA mygtuką su pasirinktiniu stiliumi:

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

Perjungimo mygtuko pavyzdys

Jei norite vieno mygtuko, kuris atidaro ir uždaro pokalbį:

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

Tikrinimas, ar valdiklis paruoštas

Valdiklis kraunamas asinchroniškai, todėl jei jūsų mygtukas gali būti paspaustas prieš valdikliui baigiant krovimą, turėtumėte pirmiausia patikrinti initialized savybę:

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

Patarimas: Daugumoje puslapių valdiklis inicializuojamas per sekundę. initialized tikrinimas reikalingas tik jei jūsų mygtukas pasirodo labai anksti puslapyje (pvz., matomoje dalyje be slinkimo greitai kraunamoje svetainėje).

Numatytosios pokalbio piktogramos slėpimas

Jei norite visiškai pakeisti slankiąją pokalbio piktogramą savo pasirinktiniu mygtuku, galite ją paslėpti su CSS:

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

Įspėjimas: Jei paslėpsite numatytąją pokalbio piktogramą, įsitikinkite, kad jūsų pasirinktinis mygtukas yra aiškiai matomas kiekviename puslapyje. Priešingu atveju lankytojai nežinos, kad pokalbis yra prieinamas.

Pilna API nuoroda

Metodas	Aprašymas
`AsyntaiWidget.open()`	Atidaro pokalbių valdiklį
`AsyntaiWidget.close()`	Uždaro pokalbių valdiklį
`AsyntaiWidget.toggle()`	Atidaro arba uždaro pokalbį
`AsyntaiWidget.initialized`	Boolean — `true` kai valdiklis paruoštas

Dokumentacija