Skip to main content

Customization

The SDK provides options to customize the default look and feel presented to the end users. You can customize the following properties to align the SDK look with the rest of your application:

  • startScreenIcon (string): Path to the image or SVG to use on the start screen instead of the default one. The path must be accessible by the root application.
  • buttonBorderRadius (string | number): Radius for buttons. Accepts any valid CSS border-radius value or a number (which corresponds to a pixel value).
  • fontFamily (string): Name of the font family to use. The font must be loaded in the parent application.
  • accent ({ 25: string; 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; }): Primary color used in the app. Defined as an object of different shades based on a numeric scale.
  • resultsScreen ({ identityVerifiedIcon?: string; identityNotVerifiedIcon?: string; identityVerifyingIcon?: string; }): Paths to images or SVGs to replace the default images on the result screen. These paths must be accessible by the root application.

To customize the theme, you need to pass an object which will properties you want to override, and pass it to the SDK as themeOverride property.

If you're using TypeScript, you can use the following interface to define your custom theme:


// If you're using React version
import { ThemeOverride } from '@microblink/platform-sdk/react';

// Or vanilla one

import { ThemeOverride } from '@microblink/platform-sdk/vanilla';

const customTheme: ThemeOverride = {
  startScreenIcon: '/icons/start.svg', // Replace with your own path
  buttonBorderRadius: 10,
  fontFamily: 'Arial',
  accent: {
    25: '#f0f0f0',
    50: '#e0e0e0',
    100: '#d0d0d0',
    200: '#c0c0c0',
    300: '#b0b0b0',
    400: '#a0a0a0',
    500: '#909090',
    600: '#808080',
    700: '#707070',
    800: '#606060',
    900: '#505050',
  },
  resultsScreen: {
    identityVerifiedIcon: '/icons/verified.svg', // Replace with your own path
    identityNotVerifiedIcon: '/icons/not-verified.svg', // Replace with your own path
    identityVerifyingIcon: '/icons/verifying.svg', // Replace with your own path
  },
};

After you've defined all of the properties, you can pass the object to the SDK as themeOverride property as shown in the example above.

React​

<IdvFlow
  /* Other properties... */
  themeOverride={customTheme}
/>

Vanilla​

createIdvFlow({
  apiConfig: {
    url: '{url-to-your-proxy-service}',
    workflowId: '{id-of-workflow-to-use}',
  },
  themeOverride: customTheme,
});

Translating the SDK​

The SDK provides options to change the default English text shown to end users to any other language. You can customize the following properties to align SDK text with the rest of your application:

  • actions.done: Button text for done action. Default: Done
  • actions.tryAgain: Button text for try again action. Default: Try again
  • actions.start: Button text for start action. Default: Start
  • actions.continue: Button text for continue action. Default: Continue
  • actions.exit: Button text for exit action. Default: Exit
  • statuses.cameraLoading: Message indicating the camera is loading. Default: Camera loading
  • statuses.checkingCamera: Message indicating the camera is being checked. Default: Checking camera...
  • statuses.noInternetConnection: Message indicating there is no internet connection. Default: No internet connection
  • statuses.processing: Message indicating processing is in progress. Default: Processing...
  • statuses.verificationNotAvailable: Message indicating verification is not available. Default: Verification not available
  • statuses.cameraPermissionRequiredTitle: Title indicating camera permission is required. Default: Camera permission required
  • statuses.cameraPermissionRequiredCaption: Caption indicating that camera permission is required. Default: We don't have your permission to use the camera. To continue, please make sure that camera is enabled.
  • statuses.nextUp: Message indicating the next step. Default: Next up
  • statuses.completed: Message indicating the process is completed. Default: Completed
  • statuses.retakeSelfieTitle: Title for the retake selfie message. Default: Retake selfie
  • statuses.retakeSelfieCaption: Caption for the retake selfie message. Default: Try again, making sure your eyes are open, your face is fully visible and only one in the frame and there's good lighting.
  • statuses.noCameraDevices: Message indicating there are no camera devices. Default: No camera devices found
  • statuses.documentNotSupportedTitle: Title for the document not supported message. Default: Document not accepted
  • statuses.documentNotSupportedCaption: Caption for the document not supported message. Default: Try scanning a different document.
  • statuses.documentScanErrorTitle: Title for the document scan error message. Default: Scan again
  • statuses.documentScanErrorCaption: Caption for the document scan error message. Default: Try again, ensuring your document is fully visible and well-lit. Keep the document steady to prevent any blurriness.
  • home.title: Title for the home screen. Default: Let's verify your identity
  • home.caption: Caption for the home screen. Default: This will only take a couple of minutes.
  • home.additionalActionsCaption: Caption for additional actions on the home screen. Default: We may ask you to take additional actions to complete your verification.
  • home.documentVerificationStepTitle: Title for the document verification step on the home screen. Default: Scan your document
  • home.documentVerificationStepCaption: Caption for the document verification step on the home screen. Default: Go grab your ID
  • home.faceMatchStepTitle: Title for the face match step on the home screen. Default: Take a selfie
  • home.faceMatchStepCaption: Caption for the face match step on the home screen. Default: Make sure your face is well-lit
  • end.identityVerifiedTitle: Message indicating the identity is verified. Default: Identity verified!
  • end.identityVerifiedCaption: Caption for the identity verified screen. Default: Thank you for proving your identity - it was you all along!
  • end.identityNotVerifiedTitle: Message indicating the identity is not verified. Default: Identity not verified
  • end.identityNotVerifiedCaption: Caption for the identity not verified screen. Default: We couldn't verify your identity this time. Please double-check your information and try again, or contact support for assistance.
  • end.identityVerifyingTitle: Message indicating the identity is being verified. Default: Thanks! We're verifying your identity now
  • end.identityVerifyingCaption: Caption for the identity verifying message. Default: We've got everything we need. We'll notify you as soon as it's complete.
  • faceCapture.centerYourFace: Message indicating that the user should center their face. Default: Center your face
  • faceCapture.placeFaceInFrame: Message indicating that the user should place their face within the frame. Default: Place your face in the frame
  • faceCapture.moveCloser: Message indicating that the user should move closer to the camera. Default: Move closer
  • faceCapture.lookDirectylIntoCamera: Message indicating that the user should look directly into the camera. Default: Look directly into the camera
  • faceCapture.onlyOneFaceShouldBeVisible: Message indicating that only one face should be visible in the frame. Default: Only one face should be visible
  • faceCapture.keepStill: Message indicating that the user should keep still. Default: Keep still
  • documentVerification.helpButtonTooltip: Tooltip text for the help button. Default: Need help?
  • documentVerification.helpButtonBack: Text for the back button in the help section. Default: Back
  • documentVerification.helpButtonNext: Text for the next button in the help section. Default: Next
  • documentVerification.helpButtonDone: Text for the done button in the help section. Default: Done
  • documentVerification.helpButtonStartScanning: Text for the start scanning button in the help section. Default: Start Scanning
  • documentVerification.helpDocInfoTitle: Title for the document information help section. Default: Keep all the details visible
  • documentVerification.helpDocInfoDescription: Description for the document information help section. Default: Make sure you keep the document well lit. All document fields should be visible on the camera screen.
  • documentVerification.helpDocKeepDetailsVisibleTitle: Title for the keep details visible help section. Default: Keep all the details visible
  • documentVerification.helpDocKeepDetailsVisibleDescription: Description for the keep details visible help section. Default: Make sure you aren't covering parts of the document with a finger, including the bottom lines. Also, watch out for hologram reflections that go over the document fields.
  • documentVerification.helpDocAvoidHarshLightTitle: Title for the avoid harsh light help section. Default: Watch out for harsh light
  • documentVerification.helpDocAvoidHarshLightDescription: Description for the avoid harsh light help section. Default: Avoid direct harsh light because it reflects from the document and can make parts of the document unreadable. If you can't read data on the document, it won't be visible to the camera either.
  • documentVerification.helpDocKeepStillTitle: Title for the keep still help section. Default: Keep still while scanning
  • documentVerification.helpDocKeepStillDescription: Description for the keep still help section. Default: Try to keep the phone and document still while scanning. Moving either can blur the image and make data on the document unreadable.
  • documentVerification.initializationError: Message displayed when there is an initialization error. Default: Failed to load component. Try using another device or update your browser.
  • documentVerification.cameraDisabled: Message displayed when the camera is disabled. Default: Camera disabled.
  • documentVerification.cameraNotAllowed: Message displayed when camera access is not allowed. Default: Cannot access camera.
  • documentVerification.cameraInUse: Message displayed when the camera is in use. Default: Camera is already used by another application.
  • documentVerification.cameraGenericError: Generic error message for camera issues. Default: Cannot access camera.
  • documentVerification.cameraFeedbackScanFront: Feedback message for scanning the front of the document. Default: Scan the front side of a document
  • documentVerification.cameraFeedbackScanBack: Feedback message for scanning the back of the document. Default: Scan the back side of a document
  • documentVerification.cameraFeedbackFlip: Feedback message for flipping the document. Default: Flip to the back side
  • documentVerification.cameraFeedbackBarcodeMessage: Feedback message for barcode scanning. Default: Scan the barcode
  • documentVerification.cameraFeedbackMoveFarther: Feedback message to move the camera farther. Default: Move farther
  • documentVerification.cameraFeedbackMoveCloser: Feedback message to move the camera closer. Default: Move closer
  • documentVerification.cameraFeedbackAdjustAngle: Feedback message to adjust the camera angle. Default: Adjust the angle
  • documentVerification.cameraFeedbackBlur: Feedback message for blurry images. Default: Keep still
  • documentVerification.cameraFeedbackGlare: Feedback message for glare issues. Default: Tilt or move document to remove reflections
  • documentVerification.cameraFeedbackWrongSide: Feedback message for scanning the wrong side of the document. Default: Flip the document
  • documentVerification.cameraFeedbackFacePhotoCovered: Feedback message when the face photo is covered. Default: Keep face photo fully visible
  • documentVerification.cameraFeedbackBarcode: Feedback message for barcode issues. Default: Scan the barcode
  • documentVerification.checkInternetConnection: Message to check the internet connection. Default: Check internet connection.
  • documentVerification.networkError: Message displayed when there is a network error. Default: Network error.
  • documentVerification.scanningNotAvailable: Message displayed when scanning is not available. Default: Scanning not available.
  • documentVerification.modalWindowClose: Text for the close button in modal windows. Default: Close

If you wish to add custom translations into your application, you need to pass create an object which will contain all of the above mentioned properties, and pass it to the SDK as translationsOverride property.

Keep in mind, properties defined above which have a dot in their name correspond to nested properties in the object. For example, actions.done property in the object should be defined as:

const customTranslations = {
  actions: {
    done: 'Fertig',
  },
};

If you're using TypeScript, you can use the following interface to define your custom translations:


// If you're using React version
import { TranslationMessages } from '@microblink/platform-sdk/react';

// Or vanilla one
import { TranslationMessages } from '@microblink/platform-sdk/vanilla';


const germanTranslations: TranslationMessages = {
   actions: {
    done: 'Fertig',
    tryAgain: 'Erneut versuchen',
    start: "Los geht's",
    continue: 'Weiter',
    exit: 'Beenden',
  },
  // Rest of properties...
};

After you've defined all of the properties, you can pass the object to the SDK as translationsOverride property as shown in the example above.

React​

<IdvFlow
  /* Other properties... */
  translationsOverride={germanTranslations}
/>

Vanilla​

createIdvFlow({
  proxyConfig: {
    url: '{url-to-your-proxy-service}',
  },
  workflowId: '{id-of-workflow-to-use}',
  translationsOverride: germanTranslations,
});
Last updated on