Crear pop-ups con HTML personalizado da a tu equipo total libertad creativa para adaptarlos a las pautas de marca y a los requisitos de diseño específicos. Si prefieres una alternativa visual y sin código, puedes diseñar pop-ups desde el editor visual de «Experiencia web».
Cuando utilices HTML personalizado, seguir las reglas de interacción de esta guía garantiza que los datos de contacto se mapeen correctamente a tu workspace y que las estadísticas de rendimiento del pop-up (mostrado, clic y envío) se registren con precisión.
Los campos de entrada básicos de los pop-ups recogen datos de contacto esenciales, como nombres, direcciones de email o números de teléfono. Para asegurar un mapeo correcto de los datos en Positive User, el atributo name de cada campo debe coincidir con el nombre del atributo de contacto correspondiente. Positive User admite atributos estándar como «First name», «Last name» y «Phone number», así como atributos personalizados definidos para necesidades específicas del negocio, como consentimientos de marketing o estadísticas de e-commerce. Especificar el tipo de campo (como text, email o number) y añadir un texto de placeholder descriptivo guía a los contactos y garantiza una recogida de datos precisa.
Los campos obligatorios garantizan que los contactos proporcionen la información esencial antes de enviar un formulario del pop-up. Incluye el atributo required en el elemento input para activar la validación a nivel de navegador, que pedirá al contacto que complete el campo antes del envío. Combinarlo con un placeholder o una etiqueta clara mejora la usabilidad.
Ejemplo: campo obligatorio
<input type="email" name="email" placeholder="Enter your email address" required>En este ejemplo:
type="email" valida el campo como una dirección de email.
name="email" mapea el campo al atributo email del contacto en tu workspace de Positive User.
“required” obliga a rellenar el campo antes de enviar el formulario.
placeholder="Enter your email address" guía al contacto.
Los campos opcionales complementan a los obligatorios permitiendo que los contactos proporcionen datos adicionales no obligatorios. Para configurar un campo opcional, incluye el atributo name para el mapeo de datos, pero omite el atributo required.
Ejemplo: configurar campos obligatorios y opcionales
<input type="email" name="email" placeholder="Enter your email address" required>
<input type="text" name="first_name" placeholder="Enter your first name (optional)">En este ejemplo:
El campo «email» es obligatorio porque incluye el atributo required.
El campo «first name» es opcional porque se omite el atributo required.
name="email" y name="first_name" garantizan que los datos se mapeen a los atributos correctos en Positive User.
Una casilla única se utiliza a menudo para decisiones binarias, como otorgar un consentimiento. Usa <input type="checkbox"> y mapea el atributo name al atributo de contacto en Positive User. Cuando la casilla está marcada, el valor «true» se envía a Positive User. Envolver el input en una etiqueta <label> hace que el texto sea clicable y mejora la usabilidad.
Ejemplo: casilla de consentimiento para newsletter
<label>
<input type="checkbox" name="newsletter_consent">
I agree to receive the newsletter.
</label>En este ejemplo:
type="checkbox" crea una casilla única.
name="newsletter_consent" mapea el input al atributo de contacto «newsletter_consent».
La etiqueta <label> hace clicable el texto y mejora la usabilidad.
Los campos de opción fija permiten a los contactos seleccionar una o varias opciones predefinidas de una lista, lo que resulta ideal para recoger datos sobre intereses o preferencias de comunicación. Utiliza varios elementos <input type="checkbox"> que compartan el mismo atributo name, de forma que todos los valores seleccionados se mapeen a un mismo atributo de contacto. Antes de añadirlos a tu código, ve a «Workspace Settings» → «Attributes» para crear el atributo personalizado y definir sus opciones. El valor del atributo value en tu HTML debe coincidir exactamente con el nombre de la opción creada en la configuración del espacio de trabajo.
Ejemplo: configurar entradas de opción múltiple
<p>What topics are you interested in?</p>
<label>
<input type="checkbox" name="interests" value="product_updates">
Product Updates
</label>
<br>
<label>
<input type="checkbox" name="interests" value="monthly_newsletter">
Monthly Newsletter
</label>
<br>
<label>
<input type="checkbox" name="interests" value="special_offers">
Special Offers
</label>En este ejemplo:
type="checkbox" crea una casilla seleccionable para cada opción.
name="interests" es el mismo para los tres inputs. Esto los agrupa y garantiza que todos los valores seleccionados se guarden en el atributo de contacto «Interests».
value="..." especifica el texto único que se guardará para cada opción cuando esté marcada. Importante: los valores indicados en el atributo value (por ejemplo, «product_updates») deben haberse creado previamente como opciones del atributo personalizado correspondiente (por ejemplo, «Interests») en tu workspace. El valor del HTML debe coincidir exactamente con la opción creada en la app.
El elemento <label> mejora la usabilidad al permitir que los contactos hagan clic en el texto para seleccionar la casilla correspondiente.
Configura los botones de envío para procesar los envíos del formulario y recoger estadísticas importantes sobre el rendimiento de tu pop-up.
Asigna id="submitButton" a un elemento button dentro de tu etiqueta <form>. Este ID específico es fundamental para activar la redirección y para recoger las estadísticas de envío del pop-up en Positive User. Permite validar entradas, mapear atributos, hacer seguimiento de las estadísticas de envío y lanzar workflows automatizados.
Ejemplo: formulario con input y botón de envío
<form>
<input type="email" name="email" placeholder="Enter your email address" required>
<button id="submitButton">Submit</button>
</form>Configura un botón de envío que redirija a los contactos a otra página utilizando una etiqueta ancla <a> con id="submitButton". Este ID específico es fundamental porque activa la redirección al mismo tiempo que permite a Positive User recoger las estadísticas de envío del pop-up. Utiliza el atributo href en la etiqueta <a> para especificar la URL de destino, lo que hace que esta configuración sea ideal para dirigir a los contactos a páginas de agradecimiento u ofertas especiales tras el clic.
Si tu botón incluye elementos anidados complejos (como texto con estilos o imágenes), asegúrate de que solo la propia etiqueta <a> reciba el evento de clic. Aplica pointer-events: none; mediante CSS a todos los elementos dentro de la etiqueta <a> para evitar que los elementos internos bloqueen la redirección o el seguimiento del clic.
Ejemplo: configurar un botón de redirección con elementos anidados
<a id="submitButton" href="https://example.com/thank-you">
<b>Click here to continue</b>
<img src="https://example.com/image.png" alt="Submit" onerror="this.style.display='none'">
</a>
<style>
#submitButton * {
/* This prevents any element inside the link from capturing the click event. */
pointer-events: none;
}
</style>Permite que los contactos descarten los pop-ups de forma limpia sin enviar datos.
Añade el atributo data-dismiss="true" a cualquier elemento HTML válido, como un icono de cierre <span> o <svg>. Al hacer clic en este elemento, se indica a Positive User que descarte el pop-up y registre la acción de cierre.
Ejemplo: configurar un botón de cierre
<!-- Using a span element -->
<span data-dismiss="true" class="close-icon">×</span>Por defecto, el overlay (el área de fondo que rodea al contenido del pop-up) también puede cerrar el pop-up. Sin embargo, si un contacto hace clic accidentalmente dentro del pop-up y su clic cae sobre la zona del overlay dentro del iframe, puede descartarlo sin querer. Para evitarlo, puedes añadir un script que garantice que solo los clics directos sobre el fondo del overlay activen la acción de cierre.
// Handle overlay clicks to close popup
document.querySelector('.ue-overlay').addEventListener('click', function (event) {
// Only close if clicking directly on the overlay background
if (event.target === this) {
// Find and click the close button to trigger User.com's close function
const closeBtn = document.querySelector('[data-dismiss="true"]');
if (closeBtn) {
closeBtn.click();
}
}
});El único método válido para cerrar un pop-up en Positive User es utilizar el atributo data-dismiss="true". Nunca debes escribir JavaScript personalizado para ocultar el pop-up manualmente.
Como el pop-up se renderiza dentro de un <iframe> que cubre toda la página, usar código personalizado para ocultar el contenido del pop-up solo lo hará invisible. El propio <iframe> seguirá activo, cubriendo la página subyacente y bloqueando todos los clics. Es un error crítico que puede dejar tu sitio web inutilizable para los visitantes.