Користувацька кнопка відкриття

Додайте кнопку або посилання в будь-якому місці вашого сайту, щоб відкрити віджет чату

За замовчуванням відвідувачі відкривають чат, натискаючи на плаваючу іконку чату в кутку сторінки. Але ви також можете додати власну кнопку або посилання — у панелі навігації, головному розділі, області CTA або будь-де ще — яке відкриває віджет чату при натисканні.

Порада: Це чудово підходить для додавання посилання "Напишіть нам" у панелі навігації вашого сайту, кнопки "Отримати допомогу" на сторінці продукту або CTA, що безпосередньо відкриває чат.

Як це працює

Після встановлення скрипта віджета Asyntai на вашій сторінці він надає глобальний JavaScript API за адресою window.AsyntaiWidget. Ви можете викликати його методи для програмного керування віджетом чату.

Доступні методи

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

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

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

Базовий приклад

Додайте кнопку будь-де у вашому HTML та прикріпіть обробник кліку, який викликає window.AsyntaiWidget.open():

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

Ось і все. Коли відвідувач натисне кнопку, віджет чату відкриється.

Приклад панелі навігації

Додайте посилання "Напишіть нам" до навігації вашого сайту:

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

Примітка: Використовуйте event.preventDefault() на якірних посиланнях, щоб запобігти прокрутці сторінки вгору при натисканні.

Приклад стилізованої кнопки

Створіть більш помітну CTA-кнопку з власними стилями:

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

Приклад кнопки перемикання

Якщо вам потрібна одна кнопка, яка відкриває та закриває чат:

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

Перевірка готовності віджета

Віджет завантажується асинхронно, тому якщо кнопка може бути натиснута до завершення завантаження віджета, спочатку перевірте властивість 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>

Порада: На більшості сторінок віджет ініціалізується протягом секунди. Перевірка initialized потрібна лише якщо ваша кнопка з'являється дуже рано на сторінці (наприклад, у видимій частині на швидкозавантажуваному сайті).

Приховування стандартної іконки чату

Якщо ви хочете повністю замінити плаваючу іконку чату власною кнопкою, ви можете приховати її за допомогою CSS:

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

Попередження: Якщо ви приховуєте стандартну іконку чату, переконайтеся, що ваша власна кнопка чітко видима на кожній сторінці. Інакше відвідувачі не знатимуть, що чат доступний.

Повна довідка API

Метод	Опис
`AsyntaiWidget.open()`	Відкриває віджет чату
`AsyntaiWidget.close()`	Закриває віджет чату
`AsyntaiWidget.toggle()`	Перемикає чат між відкритим та закритим станом
`AsyntaiWidget.initialized`	Boolean — `true` коли віджет готовий

Документація