UI & Customization

1. Theme

The SDK uses KLP.shared.theme for the WebView and native interfaces:

.system — iOS system theme (default)
.light / .dark — Manual assignment based on your app's own theme selection

It is recommended to update this value whenever the in-app theme changes; otherwise the theme may appear inconsistent in modal WebView presentations.

KLP.shared.theme = .dark

SwiftUI example: update KLP.shared.theme using onChange when the theme changes.

2. Banner Component

A ready-made banner that calls launch by default when tapped. If you provide a webViewPath, it opens at the specified path.

SwiftUI

import SwiftUI
import KLPSDK

struct HomeView: View {
    var body: some View {
        VStack {
            KLPBannerView(
                config: KLPBannerConfig(
                    title: "Your Loyalty Points",
                    subtitle: "Gold Member",
                    points: 1250,
                    pointsLabel: "points",
                    icon: .system("star.fill")
                ),
                style: .standard
            )
            .frame(height: 68)

            KLPBannerView()
                .klpOnTap {
                    // Custom action; if left empty, launch is used
                }
                .frame(height: 68)
        }
    }
}

UIKit

let banner = KLPBanner(config: KLPBannerConfig(
    title: "Your Loyalty Points",
    points: 1250
))
banner.delegate = self
// or: banner.onTap = { try? KLP.shared.launch(from: self) }

view.addSubview(banner)
// Position using Auto Layout

Styles: .compact, .standard, .expanded — choose based on approximate height requirements.

Note: If the SDK is not initialized, taps are safely ignored.

3. Simulation Widget

SimulationWidget is a ready-made SwiftUI card for the simulation mode. It can be placed anywhere in your app layout; when tapped, it calls KLP.shared.launchSimulation(from:) by default.

SwiftUI

import SwiftUI
import KLPSDK

struct ProfileView: View {
    var body: some View {
        VStack {
            SimulationWidget()
                .frame(height: 160)

            SimulationWidget(
                config: SimulationWidgetConfig(
                    title: "Test your investment ideas with virtual balance.",
                    balanceLabel: "Virtual balance",
                    balanceValue: "100,000 TL",
                    actionTitle: "Start simulation",
                    icon: .system("network")
                )
            )
            .frame(height: 160)
        }
    }
}

Use simulationOnTap if your app needs to intercept the tap:

SimulationWidget()
    .simulationOnTap {
        // Optional custom flow
    }

UIKit

let widget = KLPSimulationWidget()
// or: let widget = KLPSimulationWidget(config: SimulationWidgetConfig(...))
view.addSubview(widget)
// Position using Auto Layout

If no custom onTap is provided, the UIKit widget also opens simulation mode automatically.