Pulsante di Apertura Personalizzato

Aggiungi un pulsante o un link in qualsiasi punto del tuo sito per aprire il widget chat

Per impostazione predefinita, i visitatori aprono la chat cliccando sull'icona della chat flottante nell'angolo della pagina. Ma puoi anche aggiungere il tuo pulsante o link personalizzato — nella barra di navigazione, nella sezione hero, nell'area CTA o in qualsiasi altro punto — che apre il widget della chat quando viene cliccato.

Suggerimento: Questo è ideale per aggiungere un link "Chatta con noi" nella barra di navigazione del tuo sito, un pulsante "Ottieni aiuto" su una pagina prodotto o una CTA che apre direttamente la chat.

Come funziona

Una volta che lo script del widget Asyntai è installato sulla tua pagina, espone un'API JavaScript globale su window.AsyntaiWidget. Puoi chiamare i suoi metodi per controllare il widget della chat in modo programmatico.

Metodi disponibili

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

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

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

Esempio base

Aggiungi un pulsante in qualsiasi punto del tuo HTML e collega un gestore di clic che chiama window.AsyntaiWidget.open():

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

È tutto. Quando un visitatore clicca il pulsante, il widget chat si aprirà.

Esempio nella barra di navigazione

Aggiungi un link "Chatta con noi" alla navigazione del tuo sito:

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

Nota: Usa event.preventDefault() sui link di ancoraggio per evitare che la pagina scorra verso l'alto quando vengono cliccati.

Esempio di pulsante stilizzato

Crea un pulsante CTA più evidente con uno stile personalizzato:

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

Esempio di pulsante toggle

Se vuoi un singolo pulsante che apre e chiude la chat:

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

Verificare se il widget è pronto

Il widget si carica in modo asincrono, quindi se il tuo pulsante potrebbe essere cliccato prima che il widget finisca di caricarsi, dovresti prima controllare la proprietà 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>

Suggerimento: Nella maggior parte delle pagine, il widget si inizializza in meno di un secondo. Il controllo initialized è necessario solo se il tuo pulsante appare molto presto sulla pagina (es. above the fold su un sito a caricamento rapido).

Nascondere l'icona della chat predefinita

Se vuoi sostituire completamente l'icona della chat flottante con il tuo pulsante personalizzato, puoi nasconderla con CSS:

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

Attenzione: Se nascondi l'icona della chat predefinita, assicurati che il tuo pulsante personalizzato sia chiaramente visibile in ogni pagina. Altrimenti i visitatori non sapranno che la chat è disponibile.

Riferimento API completo

Metodo	Descrizione
`AsyntaiWidget.open()`	Apre il widget della chat
`AsyntaiWidget.close()`	Chiude il widget della chat
`AsyntaiWidget.toggle()`	Alterna l'apertura e la chiusura della chat
`AsyntaiWidget.initialized`	Booleano — `true` quando il widget è pronto

Documentazione