Como abrir o formulário a partir de um link ou botão?

Por padrão, o WhatsForm exibe um botão flutuante no seu site. Você pode ocultar esse botão padrão e acionar o widget a partir do seu próprio botão personalizado, link ou elemento.

Isso é útil quando você deseja total controle sobre o posicionamento e o design do seu call-to-action.

Como funciona

Passo 1: Adicione o script do widget à sua página

Coloque o script de incorporação do WhatsForm no seu HTML, como faria normalmente:

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

Substitua demo pelo ID real do seu formulário WhatsForm.

Passo 2: Ocultar o botão flutuante padrão

Adicione a linha a seguir em qualquer lugar após o script de incorporação. Isso instrui o WhatsForm a não exibir o botão padrão:

<script>window.whatsformHideButton = true;</script>

Passo 3: Abrir o widget a partir do seu próprio botão

Use o método whatsform.open() para acionar o widget quando um usuário clicar no seu elemento personalizado:

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

Você pode anexar isso a qualquer elemento clicável, não apenas botões. Por exemplo, um link:

<a href="#" onclick="whatsform.open(); return false;">Fale com Vendas</a>

Exemplo completo

<!-- Widget WhatsForm -->
<script async src="https://whatsform.com/launcher.js" id="wf-widget" data-id="demo" data-message="Message on WhatsApp"></script>

<!-- Ocultar o botão flutuante padrão -->
<script>window.whatsformHideButton = true;</script>

<!-- Seu acionador personalizado -->
<button onclick="whatsform.open()">Fale conosco pelo WhatsApp</button>

Casos de uso comuns

CTA inline em uma landing page - Coloque um botão "Fale conosco" na sua seção hero ou tabela de preços em vez de usar o widget flutuante.

Link na barra de navegação - Adicione um link "WhatsApp" no cabeçalho do seu site que abre o formulário ao clicar.

Acionadores condicionais - Use lógica JavaScript para abrir o widget após um delay, ao rolar a página, ou com base no comportamento do usuário.

// Exemplo: Abrir o widget após 10 segundos
setTimeout(() => {
  whatsform.open();
}, 10000);

Observações

• Certifique-se de que window.whatsformHideButton = true esteja definido antes de o widget terminar de carregar. Colocá-lo logo após o script de incorporação é a abordagem mais segura.

• A função whatsform.open() fica disponível após o carregamento do script. Se você chamá-la muito cedo (antes de o script carregar), pode não funcionar. Para acionadores programáticos, considere envolvê-la em uma verificação ou um pequeno delay.

• Este recurso funciona com todos os tipos de widget do WhatsForm.