Pielāgota atvēršanas poga

Pievienojiet pogu vai saiti jebkurā vietā savā vietnē, lai atvērtu tērzēšanas logrīku

Pēc noklusējuma apmeklētāji atver tērzēšanu, noklikšķinot uz peldošās tērzēšanas ikonas jūsu lapas stūrī. Bet jūs varat arī pievienot savu pielāgotu pogu vai saiti — navigācijas joslā, galvenajā sadaļā, CTA zonā vai jebkur citur — kas atver tērzēšanas logrīku, noklikšķinot.

Padoms: Tas ir lieliski piemērots, lai pievienotu "Tērzējiet ar mums" saiti jūsu vietnes navigācijas joslā, "Saņemt palīdzību" pogu produkta lapā vai CTA, kas tieši atver tērzēšanu.

Kā tas darbojas

Kad Asyntai logrīka skripts ir instalēts jūsu lapā, tas atklāj globālo JavaScript API window.AsyntaiWidget. Jūs varat izsaukt tā metodes, lai programmatiski vadītu tērzēšanas logrīku.

Pieejamās metodes

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

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

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

Pamata piemērs

Pievienojiet pogu jebkur savā HTML un pievienojiet klikšķa apstrādātāju, kas izsauc window.AsyntaiWidget.open():

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

Tas ir viss. Kad apmeklētājs noklikšķina uz pogas, tērzēšanas logrīks atvērsies.

Navigācijas joslas piemērs

Pievienojiet "Tērzējiet ar mums" saiti savas vietnes navigācijai:

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

Piezīme: Izmantojiet event.preventDefault() enkura saitēm, lai novērstu lapas ritināšanu uz augšu, noklikšķinot.

Stilizētas pogas piemērs

Izveidojiet izteiktāku CTA pogu ar pielāgotu stilu:

<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ārslēgšanas pogas piemērs

Ja vēlaties vienu pogu, kas atver un aizver tērzēšanu:

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

Pārbaudīšana, vai logrīks ir gatavs

Logrīks tiek ielādēts asinhroni, tāpēc, ja uz jūsu pogas var tikt noklikšķināts pirms logrīka ielādes pabeigšanas, vispirms pārbaudiet initialized īpašību:

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

Padoms: Lielākajā daļā lapu logrīks inicializējas sekundes laikā. initialized pārbaude ir nepieciešama tikai tad, ja jūsu poga parādās ļoti agri lapā (piemēram, virs locījuma ātri ielādējamā vietnē).

Noklusējuma tērzēšanas ikonas paslēpšana

Ja vēlaties pilnībā aizstāt peldošo tērzēšanas ikonu ar savu pielāgoto pogu, jūs varat to paslēpt ar CSS:

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

Brīdinājums: Ja paslēpjat noklusējuma tērzēšanas ikonu, pārliecinieties, ka jūsu pielāgotā poga ir skaidri redzama katrā lapā. Pretējā gadījumā apmeklētāji nezinās, ka tērzēšana ir pieejama.

Pilna API uzziņu rokasgrāmata

Metode	Apraksts
`AsyntaiWidget.open()`	Atver tērzēšanas logrīku
`AsyntaiWidget.close()`	Aizver tērzēšanas logrīku
`AsyntaiWidget.toggle()`	Pārslēdz tērzēšanu atvērtu vai aizvērtu
`AsyntaiWidget.initialized`	Būla vērtība — `true` kad logrīks ir gatavs

Dokumentācija