Cómo crear un pop-up inteligente
Con nuestro servicio de pop-ups, puedes crear ventanas emergentes inteligentes que los clientes pueden ver en un escenario determinado. Haz una oferta en el momento adecuado, ayuda a tu cliente a elegir un producto o servicio, o capta suscriptores para interactuar con ellos usando el servicio de SendPulse.
Puedes elegir una plantilla prediseñada y usarla de inmediato o editarla según tus necesidades.
Hablemos sobre cómo crear un pop-up inteligente con una plantilla, así como configurar su apariencia, elementos y condiciones de visualización.
Crea un pop-up
Puedes crear un pop-up desde cero o seleccionar una plantilla prediseñada para editarla.
Dirígete a tu proyecto en la pestaña Pop-ups y haz clic en Crear pop-up.
Desde cero
Para crear tu propio pop-up usando elementos listos para usar, haz clic en Nuevo pop-up.
Con una plantilla
Una plantilla de pop-up es un widget con apariencia predefinida y configuraciones de acción objetivo. Puedes elegir una plantilla según el tipo de tema, tipo de pop-up o elementos.
Puedes seleccionar una plantilla con cierto tema o un conjunto de elementos sólo durante los primeros pasos de la creación de pop-ups. Si no seleccionas una plantilla pero quieres crear una parecida, revisa los elementos que incluye y selecciónalos en Diseño > Elementos.
Puedes cambiar de tipo de pop-up en Diseño > Estilo.
Selecciona una categoría a la derecha y una plantilla a la izquierda.
Configura los elementos de tu pop-up
Una vez seleccionada una plantilla, el creador de pop-ups se abrirá en la pestaña Diseño, donde puedes editar tus pop-ups y sus elementos.
Si estás creando un pop-up desde cero, haz clic en + Agregar elemento y selecciona un elemento.
Puedes agregar elementos a los pop-ups de los tipos Superposición, Flotante, Horizontal y Ventana modal. Si deseas personalizar tus pop-ups de los tipos Video y Lanzador, consulta la sección Elementos adicionales de este artículo.
Si estás creando un pop-up a partir de una plantilla, puedes personalizarlo. Para editar un elemento, haz clic en el ícono del lápiz.
También puedes editar un elemento haciendo clic en él. Cuando pases el cursor sobre un elemento o comiences a editarlo, aparecerá dicho elemento en un marco verde.
A continuación, podrás obtener más información sobre cada elemento.
Todos los elementos son opcionales. Puedes agregar, eliminar, combinar y usarlos de forma selectiva.
Sin embargo, si usas elementos que almacenen los datos del usuario (Campo de entrada, Lista desplegable, Botones de selección, Casilla de verificación, Multiselección y Encuesta NPS), necesitarás agregar el elemento Botón.
Portada
Este elemento muestra una imagen dentro del diseño de tu pop-up para mejorar la experiencia del usuario o llamar la atención.
Si estás creando un pop-up con una plantilla, haz clic en Cargar imagen y selecciona una imagen del administrador de archivos.
Para reemplazar la imagen de tu plantilla, haz clic en el ícono del lápiz.
Para cargar una imagen al administrador de archivos, haz clic en Cargar archivos. Selecciónala o arrástrala y haz clic en Cargar. Luego, cierra la ventana modal y selecciona tu imagen.
Selecciona la posición de la imagen en relación con tu pop-up (izquierda, derecha, arriba o llenar todo el pop-up).
A diferencia del elemento Imagen, el elemento Portada llena todo tu pop-up en relación con el contorno seleccionado.
Campo de entrada
Este elemento solicita datos al usuario que puedes almacenar en variables, como nombres, correos electrónicos, números de teléfono, fechas de nacimiento y mucho más.
En el campo Variable, selecciona o crea una variable en la que deseas almacenar valores. Puedes almacenar valores de todo tipo de datos (cadena, número, teléfono o email).
En el campo Texto del marcador de posición, ingresa tu texto.
También puedes rellenar automáticamente los campos emergentes, configurar la confirmación de doble suscripción, agregar nombres de campo y hacer que los campos sean obligatorios.
Más información: Cómo configurar un formulario pop-up personalizado y Cómo transferir variables personalizadas.
Aplicaciones de mensajería
Este elemento redirige a un usuario a una plataforma de redes sociales de tu elección. Puedes agregar hasta 10 íconos de redes sociales a un pop-up. Si tienes un chatbot, puedes vincularlo a tu pop-up para incrementar la audiencia de tu chatbot y lanzar flujos.
Selecciona un ícono de redes sociales y escribe el texto del botón.
En el siguiente campo, agrega un enlace a tu perfil de redes sociales. Si tienes un chatbot de Instagram, Facebook Messenger o Telegram, puedes vincularlo a tu pop-up y seleccionar un flujo que se ejecutará cuando un usuario interactúe con tu chatbot.
Texto
Este elemento muestra un texto a los visitantes de tu sitio web. Puedes añadir un mensaje adaptado a tu escenario de pop-up para captar clientes potenciales.
Por ejemplo, si un visitante ha visto tu página de productos más de tres veces, el mensaje de tu pop-up puede motivarlo a realizar una compra. Tu widget también puede ayudar a un usuario a calcular los gastos de envío cuando esté explorando tus opciones de envío.
También puedes añadir enlaces, emojis y personalizar tu mensaje utilizando variables. Haz clic en {} y selecciona una variable existente.
Puedes utilizar variables para dirigirte a los visitantes del sitio web por su nombre, ofrecer descuentos exclusivos, dar recomendaciones basadas en los pedidos o visitas anteriores de los usuarios, enviar notificaciones de carritos abandonados o compartir otros puntos de datos de tu sistema.
También puedes editar tu texto como código HTML. Para ello, haz clic en los tres puntos y selecciona <>. Añade el código HTML y haz clic en Guardar.
Lista desplegable
Este elemento le permite a los usuarios seleccionar un artículo de la lista, por ejemplo, una categoría de producto.
En el campo Variable, selecciona o crea una variable en la que desees almacenar valores.
En el campo Texto, agrega un texto y, en el campo Valor, selecciona el valor que deseas almacenar en la variable.
También puedes marcar una opción como seleccionada de forma predeterminada.
Si deseas agregar más opciones, haz clic en + Agregar opción.
Botón
Si un usuario hace clic en tu botón, los datos que haya introducido se enviarán a la sección Contactos. Si configuras las acciones correspondientes, también podrán enviarse a las secciones Email y CRM.
Puedes añadir botones como texto o imágenes.
Introduce tu texto, o sube una imagen, y selecciona una acción para el botón al hacer clic: Cerrar ventana modal o Abrir URL. Si has seleccionado esta última opción, inserta tu enlace en el siguiente campo.
Ten en cuenta el tamaño de tu pop-up y haz que tu llamada a la acción sea corta y clara.
También puedes personalizar el estilo de cada botón o grupo de botones.
Leer más: Cómo personalizar los botones del pop-up.
Imagen
Este elemento agrega más imágenes a tu pop-up. A diferencia del elemento Portada, el elemento Imagen no llena tu pop-up.
Haz clic en Cargar imagen y selecciona una imagen en el administrador de archivos.
Luego, selecciona el tamaño de tu pop-up (más pequeño o más grande).
También puedes agregar un enlace a tu imagen. Para ello, activa la casilla Abrir URL y añade tu enlace. Si un visitante hace clic en la imagen, esta lo llevará al enlace que has añadido.
Botones de selección
Este elemento le permite a los usuarios seleccionar un artículo de la lista mediante un botón de selección.
En el campo Variable, selecciona o crea una variable en la que desees almacenar valores.
En el campo Texto, agrega un texto y, en el campo Valor, selecciona el valor que deseas almacenar en la variable.
También puedes marcar una opción como seleccionada de forma predeterminada.
Si deseas agregar más opciones, haz clic en + Agregar opción.
Casilla de verificación
Este elemento le permite a los usuarios seleccionar una casilla de verificación, por ejemplo, para dar su consentimiento al procesamiento de datos personales.
En el campo Variable, selecciona o crea una variable en la que desees almacenar valores. Cuando un usuario marca una casilla de verificación, el texto de la misma se almacenará en una variable del tipo Cadena.
También puedes agregar un nombre de casilla y hacer que sea obligatoria para evitar que los usuarios envíen su formulario sin marcar la casilla de verificación.
Multiselección
Este elemento le permite a los usuarios seleccionar opciones con casillas de verificación. A diferencia de los elementos Lista desplegable, Botones de selección y Casilla de verificación, el elemento Multiselección le permite a los usuarios seleccionar varias opciones en lugar de solo una.
En el campo Variable, selecciona o crea una variable en la que desees almacenar valores.
En el campo Texto, agrega un texto y, en el campo Valor, selecciona el valor que deseas almacenar en la variable.
Si deseas agregar más opciones, haz clic en + Agregar opción.
Encuesta NPS
Este es un elemento con una escala de calificación donde los usuarios pueden hacer sus comentarios.
En el campo Variable, selecciona o crea una variable en la que desees almacenar valores. Dependiendo de las opciones de calificación seleccionadas, los valores se almacenarán como números o palabras.
Selecciona cómo mostrar las opciones de calificación (como estrellas, emojis, corazones, me gusta/no me gusta, o valores numéricos).
También puedes agregar el campo de entrada de comentarios y seleccionar el tamaño que más te convenga.
Más información: Cómo crear un formulario NPS.
Flujo del pop-up
Este elemento lanza otro pop-up y se usa para crear flujos.
Selecciona el pop-up que deseas lanzar y ponle texto al botón que lo va a lanzar. Si deseas agregar más botones de lanzamiento de pop-ups, agrega otro elemento.
También puedes seleccionar el color de tu botón.
Leer más: Cómo crear un escenario de flujo de un pop-up.
Cursos
Este elemento muestra un formulario de inscripción a un curso gratuito o de pago.
Si tu curso es de pago, activa la opción Inscribir usuarios a un curso de pago y selecciona un curso y un método de pago. También puedes añadir un código promocional que los estudiantes puedan utilizar al realizar los pagos. Para ello, activa la opción Solicitar código promocional y configura la casilla de verificación.
Si tu curso es gratuito, desactiva la opción Inscribir usuarios a un curso de pago y selecciona un curso.
Sin importar que tu curso sea de pago o gratuito, puedes seleccionar una canalización y un estado de trato en el que quieras guardar los tratos de los estudiantes de pago. Por defecto, el nombre de tu pop-up se utilizará como nombre del trato.
Una vez que el estudiante haya introducido todos los datos, quedará inscrito en tu curso o será redirigido a la página de pago.
Más información: Cómo inscribir estudiantes a un curso a través de un pop-up.
Comentario
Este elemento permite al usuario introducir un texto de hasta 5,000 caracteres. Los usuarios pueden dejar comentarios directamente en la página, favoreciendo la recopilación de opiniones y mejorando la interacción con el público de tu sitio web.
En el campo Variable, selecciona o crea una variable para almacenar el valor. En el campo Texto del marcador de posición, introduce el texto de sugerencia.
Si lo deseas, puedes activar la opción Mostrar título e introducir un título para este campo. Luego, selecciona el tamaño del campo: pequeño (S), mediano (M) o grande (L).
Ruleta
Este elemento añade una rueda que los visitantes de tu web puedan girar para ganar bonos, descuentos o regalos.
Selecciona o crea una variable que almacene el valor del sector donde se detenga la rueda. Añade sectores y personaliza sus estilos. Ajusta la probabilidad de tus sectores, añade texto y selecciona una posición de la rueda relativa a tu pop-up.
Leer más: Cómo configurar el elemento de pop-up Ruleta.
Cuenta regresiva
Este elemento muestra cuánto tiempo falta para un determinado evento, por ejemplo, para que finalice una promoción o comience un curso.
Selecciona un modo de cuenta regresiva.
| Fecha y hora de finalización fijas | El elemento realizará una cuenta regresiva hasta una fecha y hora determinadas. Haz clic en el campo y selecciona una fecha y una zona horaria de finalización del evento en el calendario. En la sección Zona horaria, selecciona la zona horaria de tu temporizador (la zona horaria de tu cuenta o la de tus visitantes). |
| Fecha y hora de finalización dinámicas | El elemento iniciará la cuenta regresiva hasta una hora específica cuando un visitante del sitio web vea tu pop-up.
Selecciona un periodo de cuenta regresiva desde el momento en que comienza. |
En la sección Parámetros de fecha, selecciona un número de indicadores de cuenta regresiva utilizando un botón deslizante (de días a segundos).
En la sección Estilo, selecciona un diseño para la cuenta regresiva.
A continuación, ajusta el color, el tamaño (S, M o L) y la alineación (izquierda, centro o derecha) del texto.
Galería
Este elemento muestra las imágenes como una presentación de diapositivas o al hacer clic.
Haz clic en Añadir una portada para añadir la primera imagen y selecciónala en el gestor de archivos. Haz clic en Añadir diapositiva para añadir las siguientes imágenes.
Personaliza el diseño de tu elemento en las siguientes secciones.
| Redondear | Establece el redondeado de las esquinas en píxeles que será aplicado a todas las imágenes |
| Tamaño | Selecciona una escala (imagen horizontal, cuadrada o vertical).
Tu imagen será comprimida, así que asegúrate de subir imágenes adecuadas o selecciona un tamaño medio (cuadrado). |
| Transición automática de diapositivas | Selecciona esta opción para activar el desplazamiento automático de las imágenes.
En la sección siguiente, establece una frecuencia de desplazamiento en segundos. |
| Posición | Selecciona una posición del elemento con respecto a los bordes de tu pop-up (con marco o sin marco). |
El tamaño del pop-up puede afectar al tamaño del elemento Galería, pero puedes ajustar estas opciones por separado.
Gestión de elementos
Para volver a la lista de elementos, haz clic en el ícono Elementos en el panel superior.
Para eliminar un elemento, dirígete a la pestaña Elementos y haz clic en el ícono de la papelera.
Para reorganizar los campos o elementos, pasa el cursor sobre el ícono de la izquierda, y arrástralo y suéltalo en el lugar que desees. Puedes mover todos los elementos excepto el elemento Portada.
Elementos adicionales
También puedes crear una ventana emergente del tipo Video o Lanzador. Selecciona estos tipos de widgets durante los primeros pasos para crear un pop-up o en la pestaña Estilo y personalízalos en la pestaña Elementos.
Video
Este pop-up reproduce un video en el formato de tu elección.
Escribe un enlace de YouTube y selecciona una ubicación (horizontal o vertical).
Selecciona un escenario de reproducción de video.
| Reproducción automática | Tu video se reproducirá después de cualquier acción hecha por el usuario en tu página. |
| Reproducción al hacer clic | Una vez cargada tu página, los usuarios verán la previsualización de tu video. El video comenzará cuando los usuarios hagan clic en tu pop-up.
Los usuarios de dispositivos móviles necesitan hacer clic en tu video para reproducirlo. |
Selecciona una ubicación respecto al borde de la pantalla.
Selecciona una acción objetivo.
| Sin acción | Tu pop-up sólo mostrará el video. |
| Llamado a la acción | Aparte del video, tu pop-up también tendrá un botón de llamado a la acción. Ingresa el texto de tu botón y selecciona una acción (cerrar el pop-up o abrir la URL). Si has seleccionado la segunda opción, agrega una URL. |
Lanzador
Este es un pequeño ícono estático anclado en la esquina seleccionada de la página. Cuando los usuarios hacen clic en él, se activa una determinada acción; por ejemplo, se abre otro pop-up o se redirige al usuario a una página especificada del sitio web.
Selecciona una acción objetivo (abrir un pop-up o abrir un enlace).
Para personalizar el estilo de tu pop-up, selecciona un color de fondo, configura su redondeo, agrega un contorno, cambia el color del ícono y selecciona su tipo.
Puedes seleccionar un ícono al elegir una plantilla o puedes cargar uno de tu autoría. Si deseas cargar uno, haz clic en el ícono del lápiz y selecciona una imagen en el administrador de archivos.
Más información: Cómo crear un lanzador pop-up.
Personaliza tu pop-up
Para personalizar tu pop-up, haz clic en el ícono de la primera pestaña (Estilo). En esta pestaña, puedes configurar el tipo y estilo de pop-up, y agregar animaciones de entrada y salida.
Tipo
Puedes seleccionar los siguientes tipos de pop-up según la apariencia de tu widget:
| Tipo de pop-up | Descripción | Ajustes de estilo |
| Flotante | Una ventana flotante colocada a la izquierda o derecha de la ventana del navegador cuando un usuario se desplaza por la página. Los usuarios no necesitan cerrarla para interactuar con el contenido de la página. | Puedes personalizar estos elementos en la pestaña Estilo. Para más información consulta la sección: Estilo. |
| Ventana modal | Un bloque ubicado en el centro de la página. Todo el resto del contenido de la página del sitio está oscurecido y no se puede hacer clic en él. Los usuarios deben cerrar la ventana modal para interactuar con el contenido de la página de tu sitio. | |
| Superposición | Un bloque que cubre toda la página del sitio. Los usuarios deben cerrar la ventana emergente para interactuar con el contenido de la página. | |
| Horizontal | Una ventana horizontal que se puede colocar en la parte superior o inferior de la página. Los usuarios no necesitan cerrarla para interactuar con la página. | |
| Video | Una ventana que reproduce videos de YouTube.
Leer más: Video. |
Puedes personalizar estos elementos en la pestaña Elementos. |
| Lanzador | Un pequeño ícono estático anclado en la esquina seleccionada de la página. Cuando los usuarios hacen clic en él, se desencadena una acción determinada (abrir otro pop-up o abrir un enlace).
Leer más: Lanzador. |
Estilo
Puedes personalizar tu pop-up utilizando los siguientes ajustes:
Los estilos se aplican a todos los elementos al mismo tiempo, pero también puedes personalizarlos de manera individual en su configuración.
| Posición | Ajusta la posición del pop-up con relación al borde de la pantalla
Esta opción es aplicable a los tipos Estándar and Horizontal. El resto se posicionarán en el centro de la pantalla. |
| Ancho | Ajusta el ancho del pop-up. Puedes utilizar el botón deslizante o introducir un valor en píxeles. |
| Relleno interior | Ajusta el relleno interior de los elementos del pop-up. Puedes utilizar el botón deslizante o introducir un valor en píxeles. |
| Estilo | Ajusta el color de los elementos del pop-up.
Selecciona un esquema de color: claro, oscuro o personalizado. Puedes aplicarlo a casillas de verificación, íconos de formularios NPS y todo tipo de botones emergentes. Seleccione un color. Puede aplicarlo a las casillas de verificación, a los iconos de formulario NPS y a todos los tipos de botones del pop-up. |
| Imagen de fondo |
Establece una imagen como fondo del pop-up. La imagen se aplicará a todo el pop-up y no afectará a ningún elemento añadido, como por ejemplo Imagen o Portada. Haz clic en Subir imagen y selecciona una opción del administrador de archivos. |
| Tamaño del campo | Ajusta el tamaño de todos los elementos del pop-up. Las opciones disponibles son: pequeño (S), mediano (M) y grande (L). |
Ícono de cierre
Personaliza el estilo de tu ícono de cierre.
Haz clic en Configuración y selecciona un estilo de icono, color y tamaño en píxeles, ubicación y posición relativa a tu pop-up (completamente dentro de tu pop-up, parcialmente fuera o completamente fuera de tu pop-up).
Animación
También puedes agregar animaciones de entrada y salida.
| Animación de entrada | El pop-up aparece con el efecto seleccionado cuando se cumplen las condiciones de visualización. |
| Animación de salida | El pop-up se cierra con el efecto seleccionado cuando un usuario hace clic en el botón o en el ícono de la X para cerrarlo.
Los elementos con botones de solicitud de formulario son: Aplicación de mensajería, Botón, Flujo del pop-up y EDU. |
En el tipo de animación, selecciona el lado desde el que aparecerá.
Puedes seleccionar los siguientes efectos de animación: retroceso, rebote, desvanecer, rotación, velocidad, giro, zoom y deslizamiento.
Selecciona un efecto para visualizarlo primero. Para volver a reproducir un efecto, haz clic en el ícono de la flecha.
Añade una versión de idioma
Puedes añadir versiones en otros idiomas y personalizar su contenido en un pop-up. Los visitantes de tu web podrán elegir el idioma que prefieran.
Haz clic en el ícono del mundo en la esquina superior derecha del área de trabajo. Haz clic en Añadir idioma predeterminado y selecciona un idioma de la lista. Este idioma será visible para todas los visitantes de tu sitio web. A continuación, haz clic en Añadir versión de idioma, selecciona un idioma y personaliza el contenido de tus pop-ups.
Más información: Cómo configurar un pop-up multilingüe.
Previsualiza tu pop-up
Mientras editas tu pop-up, puedes ver cómo lucirá en tu sitio web en tiempo real. Para ver la versión móvil, haz clic en el ícono correspondiente de la derecha.
Una vez que termines de personalizar el diseño de tu pop-up, haz clic en Siguiente.
Configura las condiciones de visualización del pop-up
En la pestaña Condiciones de visualización, puedes configurar tu widget para que aparezca cuando un usuario haga clic en el lanzador o una vez que se cumplan las condiciones de seguimiento de la conducta del visitante.
Para mostrar un pop-up al hacer clic en el lanzador, habilita la acción y selecciona un pop-up existente del tipo Lanzador.
Para mostrar un pop-up a partir de una condición de rastreo del comportamiento del visitante, selecciona el evento que deseas rastrear, así como el operador de condición, e ingresa el valor rastreado. También puedes seleccionar varias condiciones y vincularlas a los operadores.
Por ejemplo, puedes mostrar tu widget sólo cuando los usuarios hagan una determinada acción, como desplazarse a una cierta parte de la página o pasar más de 40 segundos en el sitio web.
Leer más: Cómo configurar el escenario de visualización de un pop-up y cómo crear un lanzador de pop-ups.
Una vez que termines de configurar las condiciones de visualización de tu pop-up, haz clic en Siguiente.
Configura las opciones de almacenamiento de datos
En la pestaña Guardar datos, puedes seleccionar dónde deseas almacenar los datos de tus suscriptores.
Habilita el interruptor* y selecciona una de las siguientes opciones.
| Guardar en una lista de correo | Guarda los datos en la lista de correo seleccionada de la sección Email. Se podrá recuperar el nombre de la variable a partir de un espacio reservado o elemento, además de un valor de un campo lleno o elemento pop-up que seleccionó el usuario.
Selecciona la lista de correo donde deseas guardar tus contactos. |
| Crear un trato en CRM | Guarda los datos como un trato y datos de contacto a tu sistema CRM. Puedes seleccionar una canalización, escribir el nombre del trato y elegir una etapa del trato.
Cuando se guarden los puntos de contacto en tu CRM, se crearán nuevos campos de contacto. |
| Enviar una notificación por email sobre nuevos suscriptores | Envía notificaciones por correo electrónico sobre cualquier suscriptor nuevo. Escribe el correo electrónico al que deseas enviar notificaciones. |
*Sólo puedes guardar los valores de los pop-ups que recopilen datos del usuario. Si no tienes los elementos Campo de entrada, Lista desplegable, Multiselección, Botones de selección, Casilla de verificación, Encuesta NPS y EDU, las opciones permanecerán inactivas.
Nombra tu pop-up
Por default, el nombre de tu proyecto se genera utilizando la fecha y hora en que se creó. Si deseas cambiar el nombre del proyecto, haz clic en el ícono correspondiente, escribe el texto y presiona Enter.
Publica tu pop-up
Una vez configuradas todas las condiciones necesarias, haz clic en Guardar y publicar o Guardar y cerrar.
Si quieres asegurarte de que todos los cambios se muestren en tu navegador, limpia el caché y las cookies de tu navegador después de guardar tu pop-up.
Todos tus pop-ups se muestran en la sección Pop-ups como pestañas independientes. Una vez que crees tu pop-up, podrás verlo, monitorear sus estadísticas y editarlo. Sin embargo, no podrás cambiar el tipo de pop-up.
Última actualización: 20.08.2024
o