Niestandardowy przycisk otwierania

Dodaj przycisk lub link w dowolnym miejscu na swojej stronie, aby otworzyć widget czatu

Domyślnie odwiedzający otwierają czat, klikając pływającą ikonę czatu w rogu strony. Możesz jednak również dodać własny przycisk lub link — na pasku nawigacji, w sekcji hero, w obszarze CTA lub w dowolnym innym miejscu — który po kliknięciu otworzy widget czatu.

Wskazówka: To świetne rozwiązanie do dodania linku "Porozmawiaj z nami" na pasku nawigacji Twojej witryny, przycisku "Uzyskaj pomoc" na stronie produktu lub CTA, które bezpośrednio otwiera czat.

Jak to działa

Po zainstalowaniu skryptu widgetu Asyntai na Twojej stronie udostępnia on globalne API JavaScript pod adresem window.AsyntaiWidget. Możesz wywoływać jego metody, aby programowo sterować widgetem czatu.

Dostępne metody

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

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

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

Podstawowy przykład

Dodaj przycisk w dowolnym miejscu w swoim HTML i dołącz obsługę kliknięcia wywołującą window.AsyntaiWidget.open():

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

To wszystko. Gdy odwiedzający kliknie przycisk, widżet czatu się otworzy.

Przykład paska nawigacji

Dodaj link "Porozmawiaj z nami" do nawigacji Twojej witryny:

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

Uwaga: Użyj event.preventDefault() na linkach kotwicowych, aby zapobiec przewijaniu strony na górę po kliknięciu.

Przykład stylizowanego przycisku

Utwórz bardziej wyrazisty przycisk CTA z niestandardowym stylem:

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

Przykład przycisku przełączającego

Jeśli chcesz mieć jeden przycisk, który otwiera i zamyka czat:

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

Sprawdzanie, czy widget jest gotowy

Widget ładuje się asynchronicznie, więc jeśli Twój przycisk może zostać kliknięty przed zakończeniem ładowania widgetu, powinieneś najpierw sprawdzić właściwość 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>

Wskazówka: Na większości stron widget inicjalizuje się w ciągu sekundy. Sprawdzenie initialized jest potrzebne tylko wtedy, gdy Twój przycisk pojawia się bardzo wcześnie na stronie (np. powyżej linii zgięcia na szybko ładującej się stronie).

Ukrywanie domyślnej ikony czatu

Jeśli chcesz całkowicie zastąpić pływającą ikonę czatu własnym przyciskiem, możesz ją ukryć za pomocą CSS:

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

Ostrzeżenie: Jeśli ukryjesz domyślną ikonę czatu, upewnij się, że Twój niestandardowy przycisk jest wyraźnie widoczny na każdej stronie. W przeciwnym razie odwiedzający nie będą wiedzieć, że czat jest dostępny.

Pełna dokumentacja API

Metoda	Opis
`AsyntaiWidget.open()`	Otwiera widget czatu
`AsyntaiWidget.close()`	Zamyka widget czatu
`AsyntaiWidget.toggle()`	Przełącza czat między otwartym a zamkniętym
`AsyntaiWidget.initialized`	Boolean — `true` gdy widget jest gotowy

Dokumentacja