---
title: "Trình bày onboarding trong Kotlin Multiplatform SDK"
description: "Tìm hiểu cách trình bày onboarding hiệu quả để tăng tỷ lệ chuyển đổi."
---

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

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

1. Bạn đã cài đặt [Adapty Kotlin Multiplatform SDK](sdk-installation-kotlin-multiplatform) phiên bản 3.16.1 trở lên.
2. Bạn đã [tạo onboarding](create-onboarding).
3. Bạn đã thêm onboarding vào một [placement](placements).

Adapty Kotlin Multiplatform SDK cung cấp hai cách để trình bày onboarding:

- **Với Compose Multiplatform**
- **Không dùng Compose Multiplatform**

## Với Compose Multiplatform \{#with-compose-multiplatform\}

Để hiển thị onboarding, sử 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 dùng một lần. Nếu bạn cần hiển thị lại onboarding, hãy gọi `createOnboardingView` thêm một lần nữa để tạo instance `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.
:::

```kotlin showLineNumbers title="Kotlin Multiplatform"

viewModelScope.launch {
    AdaptyUI.createOnboardingView(onboarding = onboarding).onSuccess { view ->
        view.present()
    }.onError { error ->
        // handle the error
    }
}
```

### Cấu hình kiểu trình bày trên iOS \{#configure-ios-presentation-style\}

Cấu hình cách onboarding được trình bày 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 giá trị `AdaptyUIIOSPresentationStyle.FULLSCREEN` (mặc định) hoặc `AdaptyUIIOSPresentationStyle.PAGESHEET`.

```kotlin showLineNumbers

viewModelScope.launch {
    val view = AdaptyUI.createOnboardingView(onboarding = onboarding).getOrNull()
    view?.present(iosPresentationStyle = AdaptyUIIOSPresentationStyle.PAGESHEET)
}
```

### Tùy chỉnh cách mở liên kết trong onboarding \{#customize-how-links-open-in-onboardings\}

Theo mặc định, các liên kết trong onboarding sẽ mở trong 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 ngoài, có thể tùy chỉnh hành vi này bằng cách đặt tham số `externalUrlsPresentation` thành `AdaptyWebPresentation.EXTERNAL_BROWSER`:

```kotlin showLineNumbers

viewModelScope.launch {
    AdaptyUI.createOnboardingView(
        onboarding = onboarding,
        externalUrlsPresentation = AdaptyWebPresentation.EXTERNAL_BROWSER // default – IN_APP_BROWSER
    ).onSuccess { view ->
        view.present()
    }.onError { error ->
        // handle the error
    }
}
```

## Không dùng Compose Multiplatform \{#without-compose-multiplatform\}

:::note
`createNativeOnboardingView` là một phần của module core `io.adapty:adapty-kmp`. Nếu dự án của bạn không sử dụng Compose Multiplatform, bạn không cần dependency `io.adapty:adapty-kmp-ui`.
:::

Để nhúng onboarding mà không dùng Compose Multiplatform, gọi `createNativeOnboardingView`. Phương thức này trả về một `AdaptyNativeOnboardingView` mà bạn thêm vào layout của mình:

<Tabs>
<TabItem value="android" label="Android">
```kotlin showLineNumbers title="Kotlin Multiplatform (Android)"

val nativeView = AdaptyUI.createNativeOnboardingView(
    context = context,
    viewModelStoreOwner = activity,
    onboarding = onboarding,
    observer = myOnboardingObserver,
)

// Embed in your Compose layout:
AndroidView(
    factory = { nativeView.view },
    modifier = Modifier.fillMaxSize()
)
```
</TabItem>
<TabItem value="ios" label="iOS">
Vì các phương thức mặc định trong interface KMP sẽ trở thành `@required` trong Swift, bạn không thể implement `AdaptyUIOnboardingsEventsObserver` trực tiếp từ Swift. Hãy khai báo một lớp base mở trong `iosMain` trước:

```kotlin showLineNumbers title="iosMain (Kotlin)"
open class BaseOnboardingObserver : AdaptyUIOnboardingsEventsObserver
```

Sau đó kế thừa nó trong Swift, ghi đè những gì bạn cần:

```swift showLineNumbers title="Swift"
class MyOnboardingObserver: BaseOnboardingObserver {
    override func onboardingViewOnCloseAction(
        view: AdaptyUIOnboardingView,
        meta: AdaptyUIOnboardingMeta,
        actionId: String
    ) {
        // remove nativeView from your view hierarchy
    }
}

let nativeView = AdaptyUI.shared.createNativeOnboardingView(
    onboarding: onboarding,
    observer: MyOnboardingObserver()
)
// nativeView.viewController is a UIViewController.
// Add it to your SwiftUI view or UIKit hierarchy.
```
</TabItem>
</Tabs>

### Hủy view \{#dispose-the-view\}

Gọi `dispose()` khi xóa view khỏi layout. Thao tác này sẽ hủy đăng ký event listener và giải phóng các tài nguyên nội bộ.

```kotlin showLineNumbers title="Kotlin Multiplatform"
nativeView.dispose()
```