Пользовательская кнопка открытия

Добавьте кнопку или ссылку в любом месте вашего сайта, чтобы открыть виджет чата

По умолчанию посетители открывают чат, нажимая на плавающий значок в углу страницы. Но вы также можете добавить собственную кнопку или ссылку — в навигации, блоке hero, области 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`	Логическое — `true` когда виджет будет готов

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