Una comunicación eficaz en tu sitio web exige encontrar el equilibrio justo entre la experiencia de usuario y los objetivos de negocio. Aunque los modales mal cronometrados pueden interrumpir la navegación, los pop-ups diseñados estratégicamente siguen siendo una herramienta clave para captar leads, promocionar ofertas e interactuar con los visitantes. Recopilar direcciones de email y compartir novedades importantes no tiene por qué ser complicado. Configurando un pop-up en Positive User, tu equipo puede mostrar fácilmente el mensaje adecuado a las personas adecuadas mientras navegan por tu sitio web.
En Positive User encontrarás dos opciones para crear un pop-up: Pop-up Builder y Pop-up Code Editor.
Esta opción te permite crear pop-ups básicos a partir de plantillas predefinidas. Puedes personalizar el contenido y subir tus propias imágenes.
Ve a «Experiencia web» → «Pop-ups» → «Nuevo pop-up».
Elige entre «Pop-up forms» y «Redirect pop-ups» en la esquina superior izquierda de la sección.
Elige una de las plantillas, pasa el cursor por encima y selecciona «Simple Builder».
Escribe el nombre del pop-up y añade una descripción para tus compañeros de equipo.
Haz clic en «Crear». Ahora estás en el panel donde puedes modificar el contenido del pop-up.
La sección principal muestra la vista previa de la plantilla elegida, donde todos los cambios se reflejan en tiempo real. Puedes cambiar la plantilla en cualquier momento haciendo clic en el botón «Abrir plantillas» en la esquina superior derecha del editor.
En la esquina superior izquierda puedes alternar entre los modos móvil y escritorio: esto te permite ajustar perfectamente la apariencia del pop-up.
En el lado derecho tienes secciones para modificar las distintas partes relacionadas con el contenido y la visualización del pop-up.
Contenido
En esta sección estableces la comunicación principal de tu pop-up.
Header: es tu titular principal. Utiliza este espacio para tu oferta o anuncio más importante (por ejemplo, «Suscríbete a nuestra newsletter» o «Descubre la nueva colección»).
Contenido: este campo es para el texto complementario. Es un buen sitio para añadir un poco más de detalle o explicar el «por qué» de tu llamada a la acción.
Estilo de los botones
El botón es el principal punto de interacción de tu pop-up. Debe ser claro y visualmente distintivo.
Botón: escribe el texto que aparecerá en el propio botón. Las etiquetas breves y orientadas a la acción, como «Suscríbete ahora» u «Obtén el descuento», suelen funcionar mejor.
Color del texto: elige un color para la etiqueta dentro del botón. Asegúrate de que haya suficiente contraste con el fondo para que sea fácil de leer.
Color de fondo: selecciona el color principal de tu botón. Se recomienda elegir un color específico de la marca para mantener una apariencia coherente en todo el sitio.
Estilo de los enlaces
Según la plantilla, puedes ofrecer a tus visitantes más opciones, como un enlace a una página de «Ayuda» o a la información de «Contacto», como enlaces secundarios aquí.
Texto: introduce el nombre del enlace (por ejemplo, «Sobre nosotros» o «Política de privacidad»).
Abrir en: decide si el enlace debe abrirse en una pestaña nueva o en la actual.
Color del texto: puedes dar estilo a estos enlaces por separado. A menudo, un color sutil funciona bien aquí para que no distraigan del botón principal.
Imágenes
Los elementos visuales unifican todo el pop-up y aseguran que parezca una parte nativa de tu sitio web.
Imagen de fondo: la imagen principal de tu pop-up.
Color del backdrop: controla el «overlay» que atenúa tu sitio web cuando aparece el pop-up. Puedes ajustar los valores RGBA para que el fondo sea más o menos transparente, manteniendo el foco por completo en tu mensaje.
Color de fondo: establece el color base del pop-up donde se ubican el texto y los campos del formulario.
Las plantillas suelen incluir recomendaciones sobre el tamaño óptimo de la imagen de fondo.
Campos de entrada
Si estás creando un pop-up de formulario, esta sección te permite definir la información que quieres recopilar de tus visitantes. Cada campo que añadas aquí se asignará directamente a la data del perfil de contacto.
Etiqueta: el texto que aparece justo encima del campo de entrada, indicando a la persona qué debe introducir.
Placeholder: el texto «fantasma» dentro del campo (por ejemplo, «[email protected]») que desaparece en cuanto el usuario empieza a escribir.
Atributo: este es un paso crucial. Indica al sistema en qué campo de tu base de datos de Positive User debe guardarse la información (por ejemplo, «Email» o «Nombre»).
¿Obligatorio?: marca esta casilla si el campo debe rellenarse antes de que el usuario pueda enviar el formulario.
Según la plantilla, puede haber un límite en el número de campos de texto que puedes añadir. Si has alcanzado el límite, aún puedes añadir casillas de verificación para cosas como el consentimiento de la newsletter.
Cuando tu pop-up esté listo, haz clic en «Guardar y salir». Serás redirigido a la lista de tus pop-ups.
Recuerda que ahora, para activar un pop-up, necesitas crear una automatización para él.
También puedes crear pop-ups personalizados directamente en el código HTML. Nuestro editor de código es el sitio ideal para ello. Puedes crear el pop-up desde cero o modificar las plantillas existentes.
Esta opción requiere conocimientos de HTML.
Ve a «Experiencia web» → «Pop-ups» → «Nuevo pop-up».
Aquí puedes elegir empezar desde cero haciendo clic en el botón «Code Editor» en la esquina superior derecha de la sección, o editar una de las plantillas existentes. Para ello, debes decidir el tipo («Pop-up forms» o «Redirect pop-ups») en la esquina superior izquierda de la sección, elegir una de las plantillas, pasar el cursor por encima y seleccionar «Code Builder».
Ahora estás en el panel donde puedes ajustar el pop-up. (O crearlo desde cero si elegiste directamente «Code editor» en el paso anterior).
Control total sobre HTML y CSS
El panel de la izquierda es un editor totalmente funcional donde puedes definir la estructura y el aspecto de tu pop-up. Puedes personalizar la estructura de tu formulario, añadir wrappers personalizados o incluir elementos adicionales como iconos o bloques de texto especializados que no están disponibles en las plantillas estándar.
¡No cambies el id del botón en los pop-ups de redirección! El id debe permanecer como id=submitButton o el id que tenga el botón. Si lo cambias, dejará de generar estadísticas de clics y CTR%.
Insertar campo
Una de las funciones más potentes del editor de código es el desplegable Insertar campo. Esto te permite tender un puente entre tu diseño personalizado y tu base de datos de Positive User.
Placeholders dinámicos: en lugar de codificar manualmente los campos del formulario, utiliza este menú para insertar placeholders para atributos específicos (por ejemplo, «Email», «Nombre» o «Número de teléfono»).
Atributos personalizados: si has creado atributos personalizados (como «Nivel de fidelización» o «Categoría favorita»), puedes encontrarlos aquí e incluirlos en tu formulario. Cuando un contacto los rellena, la data se guarda automáticamente en su perfil.
Alternar vista previa
Utiliza este botón para alternar entre tu código y una vista en vivo del pop-up. Esto te ayuda a detectar sobre la marcha errores de estilo o problemas de alineación.
Cuando tu pop-up esté listo, haz clic en «Guardar y salir». Serás redirigido a la lista de tus pop-ups.
Ahora necesitas crear un flujo de automatización para activar tu pop-up.
Ya tienes un pop-up preparado. Para mostrar este pop-up en el sitio web necesitas crear una automatización en la sección «Automatizaciones».
El módulo «Mostrar un pop-up» hace referencia a todos los pop-ups creados en «Experiencia web» → «Pop-ups».
Un ejemplo de automatización sería el siguiente:
Consulta los artículos sobre automatizaciones para crear un workflow eficaz para los visitantes de tu sitio web.
Tipos de pop-ups [LINK]
