Quais são as funções de desenvolvedor no widget do site?

Markdown

View as Markdown

O WhatsForm disponibiliza um conjunto de funções JavaScript que permitem controlar o widget de forma programática. Use-as para criar interações personalizadas, acionar o widget com base no comportamento do usuário ou integrá-lo à sua interface existente.

Funções disponíveis

whatsform.open()

Abre o widget do WhatsForm. Se o widget já estiver aberto, chamar esta função novamente não tem efeito.

whatsform.open();

Exemplo: Abrir o widget quando um usuário clicar em um botão.

<button onclick="whatsform.open()">Fale conosco</button>

whatsform.close()

Fecha o widget do WhatsForm. Se o widget já estiver fechado, chamar esta função novamente não tem efeito.

whatsform.close();

Exemplo: Fechar o widget após o envio de um formulário ou ao navegar para fora de uma seção.

<button onclick="whatsform.close()">Fechar Chat</button>

whatsform.toggle()

Alterna o widget entre os estados aberto e fechado. Se o widget estiver aberto, fecha. Se estiver fechado, abre.

whatsform.toggle();

Exemplo: Use um único botão para abrir e fechar o widget.

<button onclick="whatsform.toggle()">💬 WhatsApp</button>

Exemplos de uso

Abrir ao rolar a página

Acionar o widget quando o usuário rolar além de um certo ponto na página.

window.addEventListener('scroll', function () {
  if (window.scrollY > 1500) {
    whatsform.open();
  }
});

Abrir após um delay

Exibir o widget automaticamente após o usuário ficar na página por um tempo.

setTimeout(() => {
  whatsform.open();
}, 15000); // Abre após 15 segundos

Fechar após inatividade

let inactivityTimer;

function resetTimer() {
  clearTimeout(inactivityTimer);
  inactivityTimer = setTimeout(() => {
    whatsform.close();
  }, 30000); // Fecha após 30 segundos de inatividade
}

window.addEventListener('mousemove', resetTimer);
window.addEventListener('keydown', resetTimer);

Alternar com um botão flutuante personalizado

Ocultar o botão padrão e usar seu próprio botão estilizado.

<script async src="https://whatsform.com/launcher.js" id="wf-widget" data-id="demo" data-message="Message on WhatsApp"></script>
<script>window.whatsformHideButton = true;</script>

<button class="my-custom-chat-btn" onclick="whatsform.toggle()">
  Precisa de ajuda?
</button>

Observações importantes

  • Estas funções estão disponíveis apenas após o carregamento completo do script do WhatsForm. Se você as chamar imediatamente no carregamento da página, podem não estar prontas ainda. Envolva chamadas antecipadas em um timeout ou aguarde o evento load.

  • Combine estas funções com window.whatsformHideButton = true se quiser substituir completamente o botão padrão pela sua própria interface.

  • Todas as três funções funcionam com todos os tipos de widget do WhatsForm.


Este artigo foi útil?

Ainda precisa de ajuda?

Fale conosco