Personalizar el widget del sitio con tu código

El fragmento de instalación te da una burbuja flotante en la esquina. Ese es el punto de partida, no el límite. El mismo script te permite abrir el widget desde botones que ya diseñaste, controlarlo con tu propio JavaScript y enviar las conversiones a tus herramientas de análisis.

Todo lo que sigue se basa en el fragmento de Configuración > Integraciones > Widgets para sitio web. Si aún no lo has instalado, comienza por agregar el widget de prospectos a tu sitio web.

Abrir el widget desde tus propios botones

Agrega un atributo data-wz-action a cualquier elemento de la página. Al hacer clic se abre el widget:

<a data-wz-action="booking">Reservar una visita</a>
<button data-wz-action="contact">Obtener una cotización gratuita</button>
<a data-wz-action="whatsapp">Chatear por WhatsApp</a>

Eso es toda la configuración. No hay nada que inicializar ni ningún ID que hacer coincidir. Tu botón "Obtener una cotización" existente en el encabezado conserva su diseño y comienza a abrir el flujo de reserva.

Tres detalles importantes:

• Funciona en contenido que aparece más tarde. WorkZen escucha a nivel de página, por lo que los botones agregados por React, Vue, un carrusel o desplazamiento infinito funcionan sin necesidad de volver a ejecutar nada.
• Funciona incluso antes de que el formulario se haya cargado. El primer clic carga lo que necesita.
• Una función desactivada no hace nada. Si WhatsApp está desactivado en la configuración de tu widget, un botón de WhatsApp permanece en silencio en lugar de abrir una pantalla rota.

Puedes usar estos disparadores con o sin el botón flotante. Para eliminar la burbuja por completo, instala el script de carga y simplemente omite la etiqueta <wz-floating-button>.

Controlar el widget con JavaScript

El script de carga publica una pequeña API en window.WZ:

Un uso común es abrir el formulario después de que se ejecute tu propia lógica:

<button onclick="WZ.openBookingForm()">Programar mi presupuesto</button>

Prellenar el mensaje

WZ.openLeadForm() acepta dos opciones:

WZ.openLeadForm({
  prefillMessage: 'Estoy interesado en la puerta Carriage House en blanco.',
  extraPayload: { product_sku: 'CH-WHT-16' }
});

prefillMessage se coloca en el campo de mensaje, donde el visitante puede editarlo antes de enviarlo. Todo lo que pases en extraPayload viaja junto con el prospecto. Juntos, permiten que una página de producto, una tabla de precios o un configurador te indiquen exactamente qué estaba viendo el visitante.

Cambiar la configuración en una sola página

La configuración de tu widget se encuentra en WorkZen y se aplica en todas partes. Para variarla en una sola página, agrega un atributo data-config que contenga JSON. Colócalo en la etiqueta del script de carga para afectar toda la página, o en la etiqueta del widget para afectar solo ese widget. La etiqueta del widget prevalece cuando ambas definen la misma clave.

<wz-floating-button
  config='{"enable_scheduler": false, "contact_us_text": "Pregunte sobre precios por volumen"}'>
</wz-floating-button>

Estas son las claves que una página puede anular:

Todo lo que no esté en esa lista permanece bajo el control de WorkZen e ignora la página. Esto incluye el color del tema, el ícono del botón, el branding, la clave del widget, el horario de trabajo y los tipos de trabajo.

Enviar a los visitantes a una página de agradecimiento

redirect_url envía al visitante a otro lugar en el momento en que su envío se realiza con éxito, en lugar de mostrar el mensaje de agradecimiento integrado. Se aplica tanto al formulario de contacto como al flujo de reserva.

<wz-floating-button config='{"redirect_url": "https://example.com/thank-you/"}'>
</wz-floating-button>

La redirección solo ocurre después de que WorkZen confirma el envío, por lo que un envío fallido deja al visitante en tu página, con sus respuestas intactas y el error visible. El evento de conversión se dispara igualmente primero, lo que significa que tu seguimiento de Google Analytics o Tag Manager registra el prospecto antes de que el visitante continúe. Como esto reemplaza la confirmación integrada, asegúrate de que tu página de destino indique claramente que el mensaje o la reserva se recibieron correctamente. Una página de agradecimiento dedicada es también la forma más sencilla de contar conversiones en tus herramientas de análisis y de ejecutar el seguimiento de conversiones de Google Ads en una vista de página.

Hacer seguimiento de las conversiones en GA4 o Google Tag Manager

El widget informa cuatro eventos a tus herramientas de análisis:

Los dos eventos _submit se disparan solo después de que WorkZen confirma el envío, por lo que son conversiones reales y seguras de usar como disparadores de conversión de Google Ads o GA4.

Ambas herramientas quedan cubiertas automáticamente:

• Google Tag Manager: crea un disparador de Evento personalizado llamado workzen_contactform_submit, o usa la expresión regular workzen_.*_submit para capturar todas las conversiones en un solo disparador. WorkZen envía datos a tu dataLayer existente y nunca crea uno, por lo que no puede interferir con tu configuración.
• GA4 sin Tag Manager: los eventos llegan por sí solos. Marca los eventos workzen_*_submit como conversiones en la administración de GA4.

Ejecutar ambos a la vez es seguro y no genera un doble conteo.