Mostrar onboardings en el SDK de Capacitor

Si has personalizado un onboarding con el builder, no necesitas preocuparte por renderizarlo en el código de tu app móvil para mostrárselo al usuario. Ese onboarding ya incluye tanto el contenido que debe mostrarse como la forma en que debe hacerlo.

Antes de empezar, asegúrate de que:

  1. Has creado un onboarding.
  2. Has añadido el onboarding a un placement.

Mostrar el onboarding

Para mostrar un onboarding, usa el método view.present() sobre el view creado por el método createOnboardingView. Cada view solo puede usarse una vez. Si necesitas mostrar el onboarding de nuevo, llama a createOnboardingView otra vez para crear una nueva instancia de view.

Reutilizar el mismo view sin recrearlo puede provocar un error.


try {
  const view = await createOnboardingView(onboarding);
  
  view.setEventHandlers({
    onClose: (actionId, meta) => {
      console.log('Onboarding closed:', actionId);
      return true; // Allow the onboarding to close
    },
    onCustom: (actionId, meta) => {
      console.log('Custom action:', actionId);
      return false; // Don't close the onboarding
    }
  });
  
  await view.present();
  console.log('Onboarding presented successfully');
} catch (error) {
  console.error('Failed to present onboarding:', error);
}

Configurar el estilo de presentación en iOS

Configura cómo se presenta el onboarding en iOS pasando el parámetro iosPresentationStyle al método present(). El parámetro acepta los valores 'full_screen' (predeterminado) o 'page_sheet'.

await view.present({ iosPresentationStyle: 'page_sheet' });

La personalización de cómo se abren los enlaces en los onboardings está disponible a partir del SDK de Adapty v.3.15.

Por defecto, los enlaces en los onboardings se abren en un navegador integrado en la app. Esto ofrece una experiencia fluida al mostrar las páginas web dentro de tu aplicación, sin que el usuario tenga que cambiar de app.

Si prefieres abrir los enlaces en un navegador externo, puedes personalizar este comportamiento estableciendo el parámetro openIn en browser_out_app:

await view.present({ openIn: 'browser_out_app' }); // default — browser_in_app

Próximos pasos

Una vez que hayas mostrado tu onboarding, querrás gestionar las interacciones y eventos del usuario. Aprende a manejar los eventos del onboarding para responder a las acciones del usuario y hacer seguimiento de los datos analíticos.