¿Cómo usar las funciones de desarrollador en el widget del sitio web?

WhatsForm expone un conjunto de funciones de JavaScript que te permiten controlar el widget de forma programática. Úsalas para crear interacciones personalizadas, activar el widget según el comportamiento del usuario o integrarlo en tu interfaz de usuario existente.

Funciones disponibles

whatsform.open()

Abre el widget de WhatsForm. Si el widget ya está abierto, llamarlo de nuevo no tendrá ningún efecto.

whatsform.open();

Ejemplo: Abre el widget cuando un usuario hace clic en un botón.

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

whatsform.close()

Cierra el widget de WhatsForm. Si el widget ya está cerrado, llamarlo de nuevo no tendrá ningún efecto.

whatsform.close();

Ejemplo: Cierra el widget después de enviar un formulario o al navegar fuera de una sección.

<button onclick="whatsform.close()">Cerrar chat</button>

whatsform.toggle()

Alterna el widget entre los estados abierto y cerrado. Si el widget está actualmente abierto, se cierra. Si está cerrado, se abre.

whatsform.toggle();

Ejemplo: Usa un solo botón para abrir y cerrar el widget.

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

Ejemplos de uso

Abrir al desplazarse

Activa el widget cuando un usuario se desplaza más allá de un punto específico en la página.

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

Abrir después de un retraso

Muestra el widget automáticamente después de que el usuario haya estado en la página por un tiempo.

setTimeout(() => {
  whatsform.open();
}, 15000); // Abre después de 15 segundos

Cerrar por inactividad

let inactivityTimer;

function resetTimer() {
  clearTimeout(inactivityTimer);
  inactivityTimer = setTimeout(() => {
    whatsform.close();
  }, 30000); // Cierra después de 30 segundos de inactividad
}

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

Alternar con un botón flotante personalizado

Oculta el lanzador predeterminado y usa tu propio botón personalizado.

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

<button class="my-custom-chat-btn" onclick="whatsform.toggle()">
  ¿Necesitas ayuda?
</button>

Notas importantes

• Estas funciones están disponibles solo después de que el script de WhatsForm se haya cargado completamente. Si las llamas inmediatamente al cargar la página, es posible que aún no estén listas. Envuelve las llamadas tempranas en un temporizador (timeout) o escucha el evento load.

• Combina estas funciones con window.whatsformHideButton = true si quieres reemplazar completamente el lanzador predeterminado con tu propia interfaz de usuario.

• Las tres funciones funcionan con cualquier tipo de widget de WhatsForm.