Прилагођено дугме за отварање

Додајте дугме или линк било где на свом сајту да бисте отворили виџет за ћаскање

Подразумевано, посетиоци отварају ћаскање кликом на плутајућу икону за ћаскање у углу ваше странице. Али такође можете додати своје прилагођено дугме или линк — у навигациону траку, хиро секцију, 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` када је виџет спреман

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