Documentación de integración del JS Widget
Prerrequisitos
Para usar el Widget de JS, tu sitio web debe tener un formulario que cumpla con los siguientes requisitos:
- Incluir un campo de tipo email con la clase "zb-email".
- Definir la clase 'zb-email' con los siguientes estilos:
- width: 100%;
- box-sizing: border-box;
- Envolver el campo de email en un div con los estilos:
- position: absolute;
- display: inline-block;
Consulta el ejemplo a continuación para más detalles:
Asegúrate de no añadir ningún estilo en línea al campo de email, ya que estos serán eliminados por el widget.
Cómo usar la integración del Widget JS de ZeroBounce
Paso 1:
Ve a https://www.zerobounce.net/members/signin e inicia sesión en tu cuenta de ZeroBounce. Ve al menú de la izquierda y haz clic en Integraciones.
Paso 2:
En la página de Integraciones, selecciona JS Widget de la lista de Integraciones. Está en el panel de Aplicaciones/Complementos.
Paso 3:
Ingresa la URL de tu sitio web en el campo que dice “Ingresa el nombre de dominio de tu Widget de JS.” Luego, haz clic en Nueva Clave de API Pública para generar una clave de API vinculada al dominio que ingresaste.
Utiliza solo el dominio para generar la Clave de API (por ejemplo, https://test.mywebsite.com). Asegúrate de que la URL comience con ‘ https:// ’. Además, asegúrate de que no haya ‘ / ‘ al final. No hacerlo así resultará en problemas de validación.
Paso 4:
En esta sección, puedes gestionar tus configuraciones:
- Editar URL y límite de uso
- URL - Si la URL cambia, asegúrate de que el script esté ubicado en la página correcta del Widget de JS.
- Límite de uso - el número de intentos de validación de correo electrónico por hora en tu formulario.
- Cambiar estados
- Selecciona las casillas de verificación que representan los criterios de validación que deseas designar como "válidos" para tu caso de uso. Las casillas de verificación no seleccionadas indican que los criterios asociados no se considerarán válidos.
- Generar una nueva Clave de API
- Mostrar/Ocultar Clave de API
- Copiar Clave de API
- Debug
- Eliminar
El modo de depuración elimina los límites de validación, pero es mejor no mantenerlo activo durante demasiado tiempo para proteger sus servicios de validación.
La siguiente sección proporciona algunas configuraciones avanzadas para tu widget:
- Cuando se alcanza el límite de tiempo:
- Bloquear todo - El proceso de validación se detendrá y el formulario no podrá enviarse. El usuario recibirá un error y el botón de envío se deshabilitará.
- Permitir todo - Se omitirá el proceso de validación y se permitirá el envío del formulario.
- En ambos casos, no se deducen créditos, ya que ambas acciones evitan el proceso de validación.
- Cuando se alcanza el límite de restricción:
- Bloquear todo - El proceso de validación se detendrá y el formulario no podrá enviarse. El usuario recibirá un error y el botón de envío se deshabilitará.
- Permitir todo - Se omitirá el proceso de validación y se permitirá el envío del formulario.
- En ambos casos, no se deducen créditos, ya que ambas acciones evitan el proceso de validación.
- Cuando la validación no tiene éxito:
- Bloquear todo - No se permite el envío del formulario y el usuario recibirá un mensaje de error.
- Permitir todo y registrar la entrada - El envío del formulario se completará con éxito independientemente del estado de validación, y el resultado de la validación estará disponible en un campo de entrada oculto con el ID, "zbone_valid." - esta información no es para el usuario final, sino para el cliente que implementa el jswidget para rastrear los correos electrónicos utilizados en el formulario.
- Para ambas opciones, se deducen créditos, ya que el proceso de validación aún ocurre, incluso cuando el usuario no lo nota (para Permitir todo y registrar la entrada).
- Qué tipo de estilo implementamos:
- Predeterminado - Esto te proporciona nuestro diseño de widget predeterminado, como se muestra a continuación en Más información.
- Personalizado - Esto te permite personalizar el estilo del widget con las tres opciones disponibles: ID de HTML, Mensaje válido y Mensaje inválido.
- Todos los errores presentados a los usuarios finales dependerán de la opción seleccionada aquí. Para obtener información más detallada sobre el error, recomendamos utilizar el mensaje de error personalizado. De esta manera, el error será un mensaje de texto con información explícita sobre el error.
El orden de validación para estos límites es el siguiente: Tiempo de espera -> Restricción -> Éxito o fallo de validación
Cada modificación de configuración actualizará el código proporcionado con la integración del JS Widget. El usuario siempre debe usar el código más reciente generado sobre la marcha.
Paso 5:
Se recomienda integrar el fragmento de código proporcionado antes de cerrar la etiqueta body. Esta implementación se puede aplicar globalmente en todo tu sitio web o dirigirse selectivamente a páginas específicas donde haya formularios. Además, asegúrate de que los campos de entrada de correo electrónico estén configurados correctamente con los atributos especificados mencionados en Prerrequisitos: type="email" y class="zb-email".
Antes de utilizar el script, es crucial asegurarse de estar operando dentro del entorno adecuado. Si tu clave de API fue generada en zerobounce.net, es imprescindible hacer referencia exclusivamente a la documentación y recursos disponibles en zerobounce.net. Esta adhesión a la fuente específica es fundamental para un funcionamiento fluido y eficiente.
Más información
Las siguientes imágenes ilustran cómo se mostrará un correo electrónico válido y uno no válido.
En ciertos casos se permitirá el envío del formulario incluso si el correo electrónico no es válido:
- si la cuenta de usuario de ZeroBounce utilizada para generar la clave API tiene un saldo de créditos insuficiente
- si se excede el límite de uso; el límite de uso está establecido por defecto en 10 por hora y se puede cambiar en la pantalla de integración del Widget de JS (ver Paso 4)
Los correos electrónicos que se consideran válidos incluyen aquellos categorizados como catch-all, unknown y valid.