Hiển thị onboarding trong Capacitor SDK

Warning

Onboardings đã bị deprecated kể từ Adapty SDK v4. Hãy xây dựng flows thay thế: không giống onboardings chạy trong WebView, flows render trực tiếp trên thiết bị — hiệu ứng mượt mà hơn, giao diện native nhất quán, tải nhanh hơn, và không phụ thuộc vào WebView runtime.

Nếu bạn đã tùy chỉnh onboarding bằng builder, bạn không cần lo lắng về việc render nó trong code ứng dụng mobile để hiển thị cho người dùng. Onboarding đó đã bao gồm cả nội dung cần hiển thị lẫn cách hiển thị.

Trước khi bắt đầu, hãy đảm bảo rằng:

Bạn đã tạo một onboarding.
Bạn đã thêm onboarding vào một placement.

Hiển thị onboarding

Để hiển thị onboarding, dùng phương thức view.present() trên view được tạo bởi phương thức createOnboardingView. Mỗi view chỉ có thể dùng một lần. Nếu cần hiển thị lại onboarding, hãy gọi createOnboardingView thêm một lần nữa để tạo view mới.

Warning

Tái sử dụng cùng một view mà không tạo lại có thể dẫn đến lỗi.


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);
}

Cấu hình kiểu trình bày trên iOS

Cấu hình cách onboarding được hiển thị trên iOS bằng cách truyền tham số iosPresentationStyle vào phương thức present(). Tham số này chấp nhận các giá trị 'full_screen' (mặc định) hoặc 'page_sheet'.

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

Tùy chỉnh cách mở liên kết trong onboarding

Important

Tùy chỉnh cách mở liên kết trong onboarding được hỗ trợ từ Adapty SDK v3.15 trở lên.

Mặc định, các liên kết trong onboarding sẽ mở bằng trình duyệt trong ứng dụng. Điều này mang lại trải nghiệm liền mạch cho người dùng bằng cách hiển thị trang web ngay trong ứng dụng, không cần chuyển sang ứng dụng khác.

Nếu bạn muốn mở liên kết bằng trình duyệt bên ngoài, bạn có thể tùy chỉnh hành vi này bằng cách đặt tham số openIn thành browser_out_app:

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

Các bước tiếp theo

Sau khi hiển thị onboarding, bạn sẽ muốn xử lý các tương tác và sự kiện của người dùng. Tìm hiểu cách xử lý các sự kiện onboarding để phản hồi hành động của người dùng và theo dõi analytics.