Benutzerdefinierter Öffnen-Button

Fügen Sie eine Schaltfläche oder einen Link auf Ihrer Website hinzu, um das Chat-Widget zu öffnen

Standardmäßig öffnen Besucher den Chat, indem sie auf das schwebende Chat-Symbol in der Ecke Ihrer Seite klicken. Sie können aber auch eine eigene benutzerdefinierte Schaltfläche oder einen Link hinzufügen – in Ihrer Navigationsleiste, im Hero-Bereich, im CTA-Bereich oder an einer anderen Stelle – der das Chat-Widget beim Klicken öffnet.

Tipp: Dies eignet sich hervorragend, um einen "Chatten Sie mit uns"-Link in der Navigationsleiste Ihrer Website, eine "Hilfe erhalten"-Schaltfläche auf einer Produktseite oder einen CTA hinzuzufügen, der den Chat direkt öffnet.

So funktioniert es

Sobald das Asyntai-Widget-Skript auf Ihrer Seite installiert ist, stellt es eine globale JavaScript-API unter window.AsyntaiWidget bereit. Sie können dessen Methoden aufrufen, um das Chat-Widget programmgesteuert zu steuern.

Verfügbare Methoden

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

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

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

Einfaches Beispiel

Fügen Sie eine Schaltfläche an beliebiger Stelle in Ihrem HTML hinzu und verknüpfen Sie einen Klick-Handler, der window.AsyntaiWidget.open() aufruft:

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

Das war's. Wenn ein Besucher auf die Schaltfläche klickt, öffnet sich das Chat-Widget.

Navigationsleisten-Beispiel

Fügen Sie einen "Mit uns chatten"-Link zur Navigation Ihrer Website hinzu:

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

Hinweis: Verwenden Sie event.preventDefault() bei Anker-Links, um zu verhindern, dass die Seite beim Klicken nach oben scrollt.

Beispiel mit gestalteter Schaltfläche

Erstellen Sie eine auffälligere CTA-Schaltfläche mit benutzerdefiniertem Styling:

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

Umschalt-Schaltflächen-Beispiel

Wenn Sie eine einzelne Schaltfläche möchten, die den Chat öffnet und schließt:

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

Prüfen, ob das Widget bereit ist

Das Widget wird asynchron geladen. Wenn Ihre Schaltfläche möglicherweise geklickt wird, bevor das Widget fertig geladen ist, sollten Sie zuerst die Eigenschaft initialized prüfen:

<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: Auf den meisten Seiten wird das Widget innerhalb einer Sekunde initialisiert. Die initialized-Prüfung ist nur nötig, wenn Ihre Schaltfläche sehr früh auf der Seite erscheint (z. B. im sichtbaren Bereich einer schnell ladenden Website).

Das Standard-Chat-Symbol ausblenden

Wenn Sie das schwebende Chat-Symbol vollständig durch Ihre eigene benutzerdefinierte Schaltfläche ersetzen möchten, können Sie es mit CSS ausblenden:

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

Warnung: Wenn Sie das Standard-Chat-Symbol ausblenden, stellen Sie sicher, dass Ihre benutzerdefinierte Schaltfläche auf jeder Seite deutlich sichtbar ist. Andernfalls wissen Besucher nicht, dass der Chat verfügbar ist.

Vollständige API-Referenz

Methode	Beschreibung
`AsyntaiWidget.open()`	Öffnet das Chat-Widget
`AsyntaiWidget.close()`	Schließt das Chat-Widget
`AsyntaiWidget.toggle()`	Schaltet den Chat zwischen geöffnet und geschlossen um
`AsyntaiWidget.initialized`	Boolean – `true` wenn das Widget bereit ist

Dokumentation