Personalizar el widget del sitio con su código

El fragmento de instalación le da una burbuja flotante en la esquina. Ese es el punto de partida, no el límite. El mismo script le permite abrir el widget desde botones que ya diseñó, controlarlo con su propio JavaScript y enviar las conversiones a sus 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 ha instalado, comience por agregar el widget de prospectos a su sitio web.

Abrir el widget desde sus propios botones

Agregue 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. Su 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 su widget, un botón de WhatsApp permanece en silencio en lugar de abrir una pantalla rota.

Puede usar estos disparadores con o sin el botón flotante. Para eliminar la burbuja por completo, instale el script de carga y simplemente omita 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 su 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 pase en extraPayload viaja junto con el prospecto. Juntos, permiten que una página de producto, una tabla de precios o un configurador le indiquen exactamente qué estaba viendo el visitante.

Cambiar la configuración en una sola página

La configuración de su widget se encuentra en WorkZen y se aplica en todas partes. Para variarla en una sola página, agregue un atributo data-config que contenga JSON. Colóquelo 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 su página, con sus respuestas intactas y el error visible. El evento de conversión se dispara igualmente primero, lo que significa que su 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úrese de que su 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 sus 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 sus 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: cree un disparador de Evento personalizado llamado workzen_contactform_submit, o use la expresión regular workzen_.*_submit para capturar todas las conversiones en un solo disparador. WorkZen envía datos a su dataLayer existente y nunca crea uno, por lo que no puede interferir con su configuración.
• GA4 sin Tag Manager: los eventos llegan por sí solos. Marque 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.