Персонализиран бутон за отваряне

Добавете бутон или връзка навсякъде във вашия сайт, за да отворите приспособлението за чат

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

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