Botón de apertura personalizado

Agrega un botón o enlace en cualquier parte de tu sitio para abrir el widget de chat

Por defecto, los visitantes abren el chat haciendo clic en el icono flotante de chat en la esquina de su página. Pero también puede añadir su propio botón o enlace personalizado — en su barra de navegación, sección principal, área de CTA o en cualquier otro lugar — que abra el widget de chat al hacer clic.

Consejo: Esto es ideal para añadir un enlace "Chatea con nosotros" en la barra de navegación de su sitio, un botón "Obtener ayuda" en una página de producto o un CTA que abra el chat directamente.

Cómo funciona

Una vez que el script del widget Asyntai está instalado en su página, expone una API JavaScript global en window.AsyntaiWidget. Puede llamar a sus métodos para controlar el widget de chat programáticamente.

Métodos disponibles

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

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

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

Ejemplo básico

Añada un botón en cualquier parte de su HTML y adjunte un controlador de clic que llame a window.AsyntaiWidget.open():

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

Eso es todo. Cuando un visitante haga clic en el botón, el widget de chat se abrirá.

Ejemplo en barra de navegación

Añada un enlace "Chatea con nosotros" en la navegación de su sitio:

<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: Use event.preventDefault() en enlaces ancla para evitar que la página se desplace hacia arriba al hacer clic.

Ejemplo de botón con estilo

Cree un botón CTA más prominente con estilo personalizado:

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

Ejemplo de botón alternador

Si quiere un solo botón que abra y cierre el chat:

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

Verificar si el widget está listo

El widget se carga de forma asíncrona, así que si su botón podría ser clicado antes de que el widget termine de cargar, debe verificar la propiedad initialized primero:

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

Consejo: En la mayoría de las páginas, el widget se inicializa en menos de un segundo. La verificación de initialized solo es necesaria si su botón aparece muy temprano en la página (por ejemplo, arriba del pliegue en un sitio de carga rápida).

Ocultar el icono de chat predeterminado

Si quiere reemplazar completamente el icono flotante de chat con su propio botón personalizado, puede ocultarlo con CSS:

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

Advertencia: Si oculta el icono de chat predeterminado, asegúrese de que su botón personalizado sea claramente visible en cada página. De lo contrario, los visitantes no sabrán que el chat está disponible.

Referencia completa de la API

Método	Descripción
`AsyntaiWidget.open()`	Abre el widget de chat
`AsyntaiWidget.close()`	Cierra el widget de chat
`AsyntaiWidget.toggle()`	Alterna el chat entre abierto y cerrado
`AsyntaiWidget.initialized`	Booleano — `true` cuando el widget está listo

Documentación