Ir al contenido principal

¿Cómo configurar una ventana emergente personalizada?

Weronika Kapias avatar
Escrito por Weronika Kapias
Actualizado hoy

1. Haga clic en AÑADIR NUEVA VENTANA EMERGENTE

Esto creará tu nueva ventana emergente personalizada con la configuración predeterminada. Haz clic en ella para editarla.


Información importante sobre el proceso de creación de ventanas emergentes personalizadas:

  • No hay límite en el número de ventanas emergentes que puedes crear.

  • Todas las ventanas emergentes son automáticamente responsivas, pero podrás elegir si deseas mostrarlas solo en ordenadores de sobremesa, solo en dispositivos móviles o en ambos.

  • Tu trabajo se guardará automáticamente cada 60 segundos, pero, para mayor seguridad, haz clic en el botón GUARDAR antes de salir de la página.


2. Elige el objetivo que deseas alcanzar

Puedes leer más sobre los objetivos aquí. (añadir enlace al artículo con los objetivos)



3. Inspírate con las plantillas listas para usar

Cada objetivo tiene diferentes conjuntos de plantillas. Al seleccionar cada objetivo, verás un conjunto diferente para elegir.

NOTA: Establecer un objetivo es solo una forma de sugerir plantillas más eficaces para usuarios sin experiencia. También puedes ver todas las plantillas y elegir la que más te guste.



4. Una vez que hayas seleccionado tu plantilla, haz clic en la pestaña Diseño

Creará su ventana emergente con la ayuda de un creador de ventanas emergentes fácil de usar. Para conocer todas las posibilidades del editor Custom Pop-up, haga clic aquí.

Si te gusta tu creación, pasemos a la pestaña Visualización.



5. Establece las reglas de visualización

Todas las ventanas emergentes personalizadas son responsivas por defecto, pero es posible que desees mostrar tu ventana emergente en un dispositivo específico dependiendo de tu estrategia. Puedes elegir entre:

  • Todos los dispositivos (ordenador y móvil)

  • Solo ordenador

  • Solo dispositivos móviles

Una vez tomada la decisión, podrás elegir la posición en la que aparecerá tu ventana emergente en la pantalla.



6. Ajustes

¡Ya casi está todo listo! Ahora definiremos las reglas que determinan cuándo y dónde se mostrará tu ventana emergente.

Primero debes especificar las acciones, es decir, las condiciones y los eventos que provocarán que se muestre tu ventana emergente.

  • Inmediatamente ( tu ventana emergente se mostrará inmediatamente, sin ningún retraso)

  • Retraso (tu ventana emergente se mostrará con el retraso seleccionado)

    • Debes introducir el tiempo de retraso, en segundos, en el campo de texto que aparecerá a continuación.

  • Inactividad (tu ventana emergente se mostrará tras un tiempo de inactividad seleccionado del usuario en la página)

    • Debes introducir el tiempo de inactividad (en segundos) en el campo de texto que aparecerá a continuación.

  • Al pasar el cursor (tu ventana emergente se mostrará cuando el usuario pase el cursor por el elemento seleccionado de la página)

    • Esta condición no estará disponible si ha seleccionado «todos los dispositivos» o «solo móviles» en el paso 3.

    • Debes introducir el selector CSS en el campo de texto que aparecerá a continuación.

  • Desplazamiento (tu ventana emergente se mostrará cuando el usuario haya desplazado el 50 % de la página)

  • Salir de la página (tu ventana emergente se mostrará cuando el usuario mueva el cursor hacia la parte superior de la página).

    • Esta condición no estará disponible si ha seleccionado «Todos los dispositivos» o «Solo móviles» en el paso 3.

  • Clic (tu ventana emergente se mostrará cuando el usuario haga clic en el elemento seleccionado de la página).

    • Debes introducir el selector CSS en el campo de texto que aparecerá a continuación.

  • Suscripción al boletín informativo (tu ventana emergente se mostrará después de que el usuario se suscriba a tu boletín informativo).

    • Esta es una excelente opción para crear una ventana emergente con un mensaje de agradecimiento por la suscripción.



7. Establece dónde quieres que se muestre tu ventana emergente

  • En todas las páginas (todas las páginas de tu sitio web)

  • En la página de inicio (solo la página de inicio)

  • En las páginas de productos (solo páginas de productos)

  • Basándose en las direcciones URL

    • La URL es exactamente...

    • La URL no es...

    • La URL no contiene el fragmento...

    • La URL contiene el fragmento...

    • Dirección URL (Regex)

Ten en cuenta que puedes combinar las condiciones de la URL para adaptarlas a tus necesidades. Por ejemplo, es posible que desees añadir una ventana emergente solo a las páginas relacionadas con el proceso de pago, excepto la última (después de la compra).


8. Personaliza el resto de ajustes

  1. Seleccione la programación y establezca cuándo debe aparecer su ventana emergente:

    • Mostrar ahora (comenzar inmediatamente y dejarlo activo por tiempo indefinido)

    • Mostrar en un periodo seleccionado (seleccione la fecha de inicio y finalización de la visualización de su ventana emergente)

  2. No olvides seleccionar el estado de suscripción que debe tener el usuario al que se le mostrará la ventana emergente.

  3. Si quieres distinguir desde qué lugar se registran tus clientes cuando tienes más elementos en el sitio, personaliza la etiqueta que se asignará al usuario después de suscribirse al boletín.

También puedes establecer un límite para determinar cuántas veces se mostrará tu ventana emergente a cada usuario. Puedes elegir entre varias opciones, desde siempre (sin límites) hasta una vez (cada 31 días).

Ejemplo: si decides que tu ventana emergente estará activa durante un mes y estableces un límite de 1 h, esto significa que, independientemente del número de visitas del usuario a la página en una hora, la ventana emergente solo se le mostrará una vez.

Por último, ponle un nombre a tu ventana emergente. Esto te ayudará a identificarla más adelante, cuando quieras gestionar todas las ventanas emergentes o comprobar su rendimiento en los informes Onsite.


9. Para terminar...

¿Todo listo? En este paso verás tres botones: Guardar, Vista previa y Publicar.

Si tienes cambios sin guardar, solo podrás hacer clic en el botón GUARDAR.

Al hacer clic en el botón VISUALIZAR, verás cómo se verá tu ventana emergente en la tienda. Se generará un nuevo botón llamado VER EN LA TIENDA. Al hacer clic en él, se te redirigirá a la vista de tu tienda con la ventana emergente recién creada.



10. ¡Listo!

Si estás satisfecho con el aspecto de tu ventana emergente en la vista de la tienda, haz clic en el botón PUBLICAR y voilà: tu nueva ventana emergente personalizada está lista para funcionar :)



¿Necesitas ayuda adicional?

Si tienes alguna pregunta adicional sobre cómo trabajar con el creador de ventanas emergentes en edrone, ponte en contacto con nosotros en hello@edrone.me.

¿Ha quedado contestada tu pregunta?