Botão de Abertura Personalizado

Adicione um botão ou link em qualquer lugar do seu site para abrir o widget de chat

Por padrão, os visitantes abrem o chat clicando no ícone flutuante no canto da página. Mas você também pode adicionar seu próprio botão ou link personalizado — na barra de navegação, seção hero, área de CTA ou em qualquer outro lugar — que abre o widget de chat ao ser clicado.

Dica: Isso é ótimo para adicionar um link "Fale conosco" na barra de navegação do seu site, um botão "Obter ajuda" em uma página de produto ou um CTA que abre o chat diretamente.

Como funciona

Depois que o script do widget Asyntai estiver instalado na sua página, ele expõe uma API JavaScript global em window.AsyntaiWidget. Você pode chamar seus métodos para controlar o widget de chat programaticamente.

Métodos Disponíveis

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

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

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

Exemplo Básico

Adicione um botão em qualquer lugar do seu HTML e anexe um manipulador de clique que chama window.AsyntaiWidget.open():

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

É isso. Quando um visitante clicar no botão, o widget de chat será aberto.

Exemplo na Barra de Navegação

Adicione um link "Fale conosco" à navegação do seu site:

<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() em links âncora para evitar que a página role para o topo ao ser clicada.

Exemplo de Botão Estilizado

Crie um botão CTA mais destacado com 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>

Exemplo de Botão de Alternância

Se você quer um único botão que abre e fecha o chat:

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

Verificando se o Widget Está Pronto

O widget carrega de forma assíncrona, então se seu botão puder ser clicado antes do widget terminar de carregar, você deve verificar a propriedade initialized primeiro:

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

Dica: Na maioria das páginas, o widget inicializa em menos de um segundo. A verificação initialized só é necessária se seu botão aparece muito cedo na página (ex.: acima da dobra em um site de carregamento rápido).

Ocultando o Ícone de Chat Padrão

Se você quiser substituir completamente o ícone de chat flutuante pelo seu próprio botão personalizado, pode ocultá-lo com CSS:

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

Aviso: Se você ocultar o ícone de chat padrão, certifique-se de que seu botão personalizado esteja claramente visível em todas as páginas. Caso contrário, os visitantes não saberão que o chat está disponível.

Referência Completa da API

Método	Descrição
`AsyntaiWidget.open()`	Abre o widget de chat
`AsyntaiWidget.close()`	Fecha o widget de chat
`AsyntaiWidget.toggle()`	Alterna o chat entre aberto e fechado
`AsyntaiWidget.initialized`	Booleano — `true` quando o widget está pronto

Documentação