El constructor de onboarding para aplicaciones móviles sin código es una herramienta potente y personalizable que te ayudará a ofrecer a tus usuarios la mejor experiencia de onboarding. No necesitas ser desarrollador ni diseñador para obtener un gran resultado.

Pantallas del onboarding

El flujo de onboarding consiste en varias pantallas que añades y diseñas.

Los usuarios pulsarán el botón para navegar entre ellas.

Elementos del onboarding

Los elementos del onboarding se muestran a la izquierda en el orden en que aparecen. Haz clic en Add en la parte superior derecha para añadir un nuevo elemento.

Estos son los grupos de elementos que puedes añadir:

• Containers: Los contenedores te permiten configurar un diseño flexible. Por ejemplo, si quieres añadir un texto en dos columnas, debes añadir Columns y luego arrastrar dos bloques de texto dentro de Columns en el panel izquierdo. O, si estás añadiendo un carrusel, tendrás que añadir imágenes a los elementos Media del interior.

• Typography: Añade bloques de texto con formato predefinido y configura su aspecto según tus necesidades.

• Media & Display: Además de imágenes y vídeos, puedes añadir gráficos animados que demuestren el valor de tu app y animen a los usuarios.

  Los formatos de vídeo compatibles son MP4 y WebM. El tamaño máximo de archivo multimedia es de 15 MB.

  Si quieres añadir un elemento animado no compatible (como Lottie), puedes convertirlo a vídeo (por ejemplo, con esta herramienta) e insertarlo como vídeo.

• Quiz: Crea cuestionarios breves con opciones de texto e imagen para personalizar la experiencia de onboarding y conocer mejor a tus usuarios.

• Inputs: Recoge los datos de tus usuarios.

• Buttons: Los botones permiten a tus usuarios navegar entre pantallas, cerrar el onboarding o ir al paywall. También puedes añadir botones brillantes o con movimiento para captar la atención del usuario y convertir su instalación en una compra.

• Loaders: Los loaders animados mantienen a los usuarios comprometidos durante el proceso.

• User engagement: Añade testimonios, listas de correos de usuarios y cuentas atrás.

ID de elemento e ID de acción

Si quieres usar un botón para acciones personalizadas, asígnale un action ID y úsalo luego en tu código fuente. Los action IDs te permiten gestionar de la misma manera distintos botones que comparten el mismo action ID.

Si quieres procesar la entrada del usuario en un campo específico (p. ej., guardar su edad o correo electrónico), asígnale un element ID y úsalo luego en tu código fuente para asociar preguntas con respuestas. Los element IDs solo pueden usarse una vez en tu onboarding.

Opciones de personalización

En el constructor tienes las siguientes opciones de personalización:

• Pestaña Styles: Ajusta el aspecto del elemento.
  
• Pestaña Element: Configura los atributos del elemento, como la visibilidad, las acciones al pulsar botones u otras propiedades no relacionadas con su apariencia.
  
• Pestaña Screen: Configura los ajustes generales de la pantalla, como una cabecera o la visualización de un contador de pantallas.
  

Copiar pantallas y elementos

Si has creado un onboarding y quieres reutilizar partes de él, o si quieres hacer pequeños cambios y ejecutar pruebas A/B, puedes copiar una o más pantallas de un onboarding a otro.

Para copiar pantallas, abre el constructor de onboarding y haz lo siguiente:

• Haz clic derecho en una pantalla individual y selecciona Copy
• Selecciona la pantalla deseada y pulsa Ctrl+C (Windows) o ⌘+C (Mac)

También puedes copiar elementos individuales o bloques de texto, tanto dentro del mismo onboarding como entre onboardings distintos.

Copiar pantallas de funnels web a app

Si usas funnels web a app creados en FunnelFox y quieres usar pantallas de esos funnels en onboardings, puedes hacerlo fácilmente copiando pantallas en el constructor de funnels y pegándolas en el constructor de onboarding:

1. En el constructor de funnels de FunnelFox, haz clic derecho en una pantalla y selecciona Copy, o selecciona la pantalla y pulsa Ctrl+C/⌘+C.
2. Abre el constructor de onboarding.
3. Haz clic derecho en la pantalla donde quieras insertar la pantalla copiada y selecciona Paste, o selecciónala y pulsa Ctrl+V/⌘+V. La pantalla copiada se insertará debajo de la pantalla seleccionada.