---
Source: https://docs.microblink.com/blinkid/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>
</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.

## 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