El onboarding builder sin código para aplicaciones móviles 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 flow de onboarding consta de varias pantallas que añades y diseñas.

Los usuarios navegarán entre ellas tocando el botón.

Elementos del onboarding

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

Estos son los grupos de elementos disponibles:

• 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 añades un carrusel, tendrás que agregar imágenes a los elementos Media que contiene.

• Typography: Añade bloques de texto preformateados y configura su apariencia según tus necesidades.

• Media & Display: Además de imágenes y vídeos, puedes añadir gráficos animados que muestren 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 datos de tus usuarios.

• Buttons: Los botones permiten a los usuarios navegar entre pantallas, cerrar el onboarding o ir al paywall. También puedes añadir botones brillantes 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 correos de usuarios y cuenta 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 en tu código fuente. Los action ID permiten gestionar de la misma manera distintos botones que comparten el mismo ID.

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

Opciones de personalización

El builder ofrece las siguientes opciones de personalización:

• Pestaña Styles: Ajusta la apariencia 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 del mismo, o si deseas 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 onboarding builder y realiza una de estas acciones:

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

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

Copiar pantallas desde funnels web-to-app

Si usas funnels web-to-app creados en FunnelFox y quieres utilizar pantallas de esos funnels en onboardings, puedes hacerlo fácilmente copiando las pantallas en el funnel builder y pegándolas en el onboarding builder:

1. En el funnel builder de FunnelFox, haz clic derecho en una pantalla y selecciona Copy, o selecciónala y pulsa Ctrl+C/⌘+C.
2. Abre el onboarding builder.
3. Haz clic derecho en la pantalla donde quieres 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.