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 se presentan. Haz clic en Add en la parte superior derecha para añadir un nuevo elemento.

Puedes añadir los siguientes grupos de elementos:

• Containers: Los contenedores permiten configurar un diseño flexible. Por ejemplo, si quieres añadir texto en dos columnas, añade Columns y arrastra dos bloques de texto dentro de Columns en el panel izquierdo. O si vas a añadir un carrusel, tendrás que añadir imágenes a los elementos Media del interior.
• Typography: Añade bloques de texto preformateados y configura su aspecto según necesites.
• Media & Display: Además de imágenes y vídeos, puedes añadir gráficos animados que muestran el valor de tu app y animan a los usuarios a suscribirse. Los formatos de vídeo compatibles son MP4 y WebM. El tamaño máximo del 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 incrustarlo 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 con efecto brillante o animados para captar la atención del usuario y convertir su instalación en una compra.
• Loaders: Los loaders animados mantienen a los usuarios entretenidos durante el proceso.
• User engagement: Añade testimonios, listas de correo 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 ID de acción y úsalo en tu código fuente. Los IDs de acción te permiten gestionar de la misma manera distintos botones que tengan el mismo ID de acción.

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

Opciones de personalización

En el editor 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 un encabezado 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 tus onboardings, puedes hacerlo fácilmente copiando pantallas en el constructor de funnels y pegándolas en el constructor de onboardings:

1. En el constructor de funnels FunnelFox, haz clic derecho en una pantalla y selecciona Copy, o selecciónala 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.