Egyéni megnyitó gomb

Adjon hozzá egy gombot vagy hivatkozást bárhol a webhelyén a csevegési widget megnyitásához

Alapértelmezés szerint a látogatók az oldal sarkában lévő lebegő csevegés ikonra kattintva nyitják meg a csevegést. De hozzáadhat saját egyéni gombot vagy hivatkozást is – a navigációs sávban, a hero szekcióban, a CTA területen vagy bárhol máshol –, amely kattintásra megnyitja a csevegési widgetet.

Tipp: Ez remek megoldás a „Csevegjen velünk" hivatkozás hozzáadásához a webhelye navigációs sávjában, egy „Segítség kérése" gomb elhelyezéséhez egy termékoldalakon, vagy egy olyan CTA létrehozásához, amely közvetlenül megnyitja a csevegést.

Hogyan működik

Ha az Asyntai widget szkript telepítve van az oldalán, elérhetővé tesz egy globális JavaScript API-t a window.AsyntaiWidget alatt. Hívhatja annak metódusait a csevegési widget programozott vezérléséhez.

Elérhető metódusok

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

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

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

Alapvető példa

Adjon hozzá egy gombot bárhol a HTML-kódjában, és csatoljon hozzá egy kattintáskezelőt, amely meghívja a window.AsyntaiWidget.open() függvényt:

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

Ennyi az egész. Amikor egy látogató rákattint a gombra, megnyílik a chat widget.

Navigációs sáv példa

Adjon hozzá egy „Csevegjen velünk" hivatkozást a webhelye navigációjához:

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

Megjegyzés: Használja az event.preventDefault() metódust a horgonyhivatkozásokon, hogy megakadályozza az oldal tetejére való görgetést kattintáskor.

Stílusos gomb példa

Hozzon létre egy feltűnőbb CTA gombot egyéni stílussal:

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

Váltógomb példa

Ha egyetlen gombot szeretne, amely megnyitja és bezárja a csevegést:

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

A widget készültségének ellenőrzése

A widget aszinkron módon töltődik be, ezért ha a gombra kattinthatnak a widget betöltésének befejezése előtt, először ellenőrizze az initialized tulajdonságot:

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

Tipp: A legtöbb oldalon a widget egy másodpercen belül inicializálódik. Az initialized ellenőrzés csak akkor szükséges, ha a gomb nagyon korán jelenik meg az oldalon (pl. a hajtás felett egy gyorsan betöltő webhelyen).

Az alapértelmezett csevegés ikon elrejtése

Ha teljesen le szeretné cserélni a lebegő csevegés ikont saját egyéni gombjával, elrejtheti CSS-sel:

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

Figyelmeztetés: Ha elrejti az alapértelmezett csevegés ikont, győződjön meg róla, hogy az egyéni gombja minden oldalon jól látható. Ellenkező esetben a látogatók nem fogják tudni, hogy elérhető a csevegés.

Teljes API-referencia

Metódus	Leírás
`AsyntaiWidget.open()`	Megnyitja a csevegési widgetet
`AsyntaiWidget.close()`	Bezárja a csevegési widgetet
`AsyntaiWidget.toggle()`	Váltja a csevegés megnyitott vagy bezárt állapotát
`AsyntaiWidget.initialized`	Logikai érték — `true` amikor a widget készen áll

Dokumentáció