¿Cómo abrir un formulario desde un enlace o botón?

Por defecto, WhatsForm muestra un botón de lanzamiento flotante en tu sitio web. Puedes ocultar este lanzador predeterminado y activar el widget desde tu propio botón, enlace o elemento personalizado.

Esto es útil cuando quieres tener control total sobre la ubicación y el diseño de tu llamada a la acción.

¿Cómo funciona?

Paso 1: Agrega el script del widget a tu página

Coloca el script de incrustación de WhatsForm en tu HTML, tal como lo harías normalmente:

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

Reemplaza demo con el ID real de tu formulario de WhatsForm.

Paso 2: Oculta el botón flotante predeterminado

Agrega la siguiente línea en cualquier lugar después del script de incrustación. Esto le indica a WhatsForm que no muestre el lanzador predeterminado:

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

Paso 3: Abre el widget desde tu propio botón

Usa el método whatsform.open() para activar el widget cuando un usuario haga clic en tu elemento personalizado:

<button onclick="whatsform.open()">Chatea con nosotros</button>

Puedes adjuntar esto a cualquier elemento en el que se pueda hacer clic, no solo a botones. Por ejemplo, un enlace:

<a href="#" onclick="whatsform.open(); return false;">Habla con Ventas</a>

Ejemplo completo

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

<!-- Ocultar el botón flotante predeterminado -->
<script>window.whatsformHideButton = true;</script>

<!-- Tu activador personalizado -->
<button onclick="whatsform.open()">Chatea con nosotros en WhatsApp</button>

Casos de uso comunes

CTA en línea en una página de destino - Coloca un botón de "Chatea con nosotros" dentro de tu sección principal o tabla de precios en lugar de depender del widget flotante.

Enlace en la barra de navegación - Agrega un enlace de "WhatsApp" en el encabezado de tu sitio que abra el formulario al hacer clic.

Activadores condicionales - Usa la lógica de JavaScript para abrir el widget después de un retraso, al desplazarse o según el comportamiento del usuario.

// Ejemplo: Abrir widget después de 10 segundos
setTimeout(() => {
  whatsform.open();
}, 10000);

Notas

• Asegúrate de que window.whatsformHideButton = true esté configurado antes de que el widget termine de cargarse. Colocarlo justo después del script de incrustación es el enfoque más seguro.

• La función whatsform.open() está disponible una vez que el script se ha cargado. Si la llamas demasiado pronto (antes de que el script se cargue), es posible que no funcione. Para activadores programáticos, considera envolverla en una verificación o un breve retraso.

• Esta función funciona con todos los tipos de widgets de WhatsForm.