---
Source: https://docs.microblink.com/blinkid/v8000/customize-ui
Title: Customize the scanning UI
Description: How to customize the BlinkID scanning screen—show or hide elements, apply your brand colors and fonts, and change instruction text
---

# Customize the scanning UI

The UX package ships a complete scanning screen with a camera preview, a reticle, and real-time instructions.
You can adjust which elements appear, apply your brand's colors and fonts, and change the instruction text without leaving the prebuilt UI.

:::note

This article covers the look and behavior of the scanning screen.
To translate the instruction text or supply your own wording, see [Translate the SDK](translations.md).

:::

## Show or hide UI elements

The most common customization is toggling the onboarding guide and the help button.
Each platform exposes these through its UX settings.

<Tabs queryString="platform">

  <TabItem value="web" label="Web (TS)" default>

  On web, the onboarding guide is controlled through `feedbackUiOptions`.

  ```typescript
  import { createBlinkId } from "@microblink/blinkid";

  const blinkId = await createBlinkId({
    licenseKey: "your-license-key",
    feedbackUiOptions: {
      showOnboardingGuide: false,
    },
    cameraManagerUiOptions: {
      showMirrorCameraButton: false,
    },
  });
  ```

  </TabItem>
  <TabItem value="android" label="Android (Kotlin)">

  ```kotlin
  BlinkIdCameraScanningScreen(
      blinkIdSdk = blinkIdSdk,
      uiSettings = UiSettings(
          showOnboardingDialog = false,
          showHelpButton = false,
      ),
      onScanningSuccess = { result -> },
      onScanningCanceled = { }
  )
  ```

  </TabItem>
  <TabItem value="ios" label="iOS (Swift)">

  ```swift
  let analyzer = try await BlinkIDAnalyzer(sdk: sdk)

  BlinkIDUXView(
      analyzer: analyzer,
      onScanCompleted: { resultState in
          guard let result = resultState.scanningResult else { return }
      }
  )
  .uxSettings(ScanningUXSettings(
      showIntroductionAlert: false,
      showHelpButton: false
  ))
  ```

  </TabItem>
  <TabItem value="flutter" label="Flutter (Dart)">

  ```dart
  final uxSettings = BlinkIdScanningUxSettings(
    showOnboardingDialog: false,
    showHelpButton: false,
  );

  final result = await blinkIdPlugin.performScan(
    blinkIdSdkSettings: sdkSettings,
    blinkIdSessionSettings: sessionSettings,
    blinkidScanningUxSettings: uxSettings,
  );
  ```

  </TabItem>
  <TabItem value="react-native" label="React Native (TS)">

  ```typescript
  const result = await performScan({
    sdkSettings: { licenseKey: "your-license-key", downloadResources: true },
    sessionSettings: {
      scanningMode: "automatic",
      scanningSettings: { documentCaptureModule: {}, mrzModule: {}, barcodeModule: {}, vizModule: {} },
    },
    scanningUxSettings: {
      showOnboardingDialog: false,
      showHelpButton: false,
    },
  });
  ```

  </TabItem>
</Tabs>

## Apply your brand colors and fonts

On Android, the scanning UI is themeable through `UiSettings`.
You can override the Material 3 color scheme, the colors of graphical elements such as the reticle and help button (`uiColors`), and the typography.
Leaving a value `null` keeps the default, which follows the device's light or dark mode.

```kotlin
BlinkIdCameraScanningScreen(
    blinkIdSdk = blinkIdSdk,
    uiSettings = UiSettings(
        colorScheme = myBrandColorScheme,   // androidx.compose.material3.ColorScheme
        uiColors = myReticleColors,         // com.microblink.ux.theme.UiColors
        typography = myBrandTypography,      // com.microblink.ux.theme.UiTypography
    ),
    onScanningSuccess = { result -> },
    onScanningCanceled = { }
)
```

Visual theming differs by platform:

- **Web:** the UI mounts into a container you control (see below) and is rendered with web components, so apply your own CSS to match your brand.
- **iOS:** `BlinkIDUXView` is a SwiftUI view; see the [iOS UX SDK reference](https://microblink.github.io/blinkid-ios/documentation/blinkidux/) for the available theming entry points.
- **React Native and Flutter:** the wrappers expose the behavior toggles shown above (onboarding, help button, haptic feedback, preferred camera) but not color or font theming.
  For full visual control, integrate the native Android or iOS UX package.

## Mount the scanner in your own layout

On web, pass a `targetNode` to render the scanner inside an element you control instead of the document body.

```typescript
const blinkId = await createBlinkId({
  licenseKey: "your-license-key",
  targetNode: document.getElementById("scanner-container")!,
});
```

On Android and iOS, the scanner is a composable (`BlinkIdCameraScanningScreen`) or a SwiftUI view (`BlinkIDUXView`), so you place it in your own layout like any other view.

## Change the instruction text

The on-screen instructions and accessibility strings are part of the SDK's localization.
You can replace the default wording or add a new language:

- **Web:** `feedbackUiOptions.localizationStrings` and `cameraManagerUiOptions.localizationStrings`.
- **Android:** `UiSettings.sdkStrings`.
- **iOS:** the localization entry points described in [Translate the SDK](translations.md).

See [Translate the SDK](translations.md) for the full localization workflow.

## Related articles

- [Translate the SDK](translations.md)
- [Use the front-facing camera](front-facing-camera.md)
- [Scan in real time via the camera](scan-camera.md)


Last updated on Jul 24, 2026