Skip to main content
Version: v8000

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.

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.

On web, the onboarding guide is controlled through feedbackUiOptions.

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

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

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.

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

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.

See Translate the SDK for the full localization workflow.

Last updated on