Mostrar onboardings en Capacitor SDK

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

Antes de empezar, asegúrate de que:

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

Presentar el onboarding

Para mostrar un onboarding, usa el método view.present() en el view creado por el método createOnboardingView. Cada view solo se puede usar 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 producir 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 v3.15.

Por defecto, los enlaces en los onboardings se abren en un navegador integrado en la app. Esto proporciona una experiencia de usuario fluida al mostrar las páginas web dentro de tu aplicación, permitiendo a los usuarios verlas sin cambiar de app.

Si prefieres abrir los enlaces en un navegador externo, puedes personalizar este comportamiento estableciendo el parámetro openIn con el valor 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.