Buton personalizat de deschidere

Adaugă un buton sau un link oriunde pe site-ul tău pentru a deschide widget-ul de chat

Implicit, vizitatorii deschid chat-ul dând clic pe iconița flotantă de chat din colțul paginii. Dar poți adăuga și propriul buton sau link personalizat — în bara de navigare, secțiunea hero, zona CTA sau oriunde altundeva — care deschide widget-ul de chat când este apăsat.

Sfat: Aceasta este ideală pentru adăugarea unui link "Discută cu noi" în bara de navigare a site-ului, a unui buton "Obține ajutor" pe o pagină de produs sau a unui CTA care deschide chat-ul direct.

Cum funcționează

Odată ce scriptul widget-ului Asyntai este instalat pe pagina ta, acesta expune un API JavaScript global la window.AsyntaiWidget. Poți apela metodele sale pentru a controla widget-ul de chat programatic.

Metode disponibile

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

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

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

Exemplu de bază

Adaugă un buton oriunde în HTML-ul tău și atașează un handler de clic care apelează window.AsyntaiWidget.open():

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

Asta e tot. Când un vizitator apasă butonul, widgetul de chat se va deschide.

Exemplu bară de navigare

Adaugă un link "Discută cu noi" în navigarea site-ului tău:

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

Notă: Folosește event.preventDefault() pe linkurile ancoră pentru a preveni derularea paginii în sus când se dă clic.

Exemplu buton stilizat

Creează un buton CTA mai vizibil cu stilizare personalizată:

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

Exemplu buton comutare

Dacă dorești un singur buton care deschide și închide chat-ul:

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

Verificarea dacă widget-ul este pregătit

Widget-ul se încarcă asincron, astfel că dacă butonul tău ar putea fi apăsat înainte ca widget-ul să termine încărcarea, ar trebui să verifici mai întâi proprietatea 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>

Sfat: Pe majoritatea paginilor, widget-ul se inițializează într-o secundă. Verificarea initialized este necesară doar dacă butonul tău apare foarte devreme pe pagină (de ex., above the fold pe un site cu încărcare rapidă).

Ascunderea iconiței implicite de chat

Dacă dorești să înlocuiești complet iconița flotantă de chat cu propriul tău buton personalizat, o poți ascunde cu CSS:

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

Avertisment: Dacă ascunzi iconița implicită de chat, asigură-te că butonul tău personalizat este clar vizibil pe fiecare pagină. Altfel vizitatorii nu vor ști că chat-ul este disponibil.

Referință API completă

Metodă	Descriere
`AsyntaiWidget.open()`	Deschide widget-ul de chat
`AsyntaiWidget.close()`	Închide widget-ul de chat
`AsyntaiWidget.toggle()`	Comută chat-ul deschis sau închis
`AsyntaiWidget.initialized`	Boolean — `true` când widget-ul este pregătit

Documentație