Links

Customization ⚙️

Message Customization

All of the UI widgets are designed to provide helpful messages and status updates to users during the scanning process. To enhance user experience, you can customize these messages to display application-specific text instead of the default message.

Default Message Example Image

This example image shows the default message displayed on the screen during the card scanning process. You can customize these messages using the available options.

Available Customization Options

State
Key
Default Message
Auto Start
autoCaptureTitle
Hold Card in Frame
It Will Scan Automatically
Manual Start
manualCaptureTitle
Use Button Below to Capture Card
Processing
processingTitle
Keep Card Still While Scanning
Frontside Completed
frontsideCompletedTitle
Front side scan is complete
Rotate card to scan back
Completed
completedTitle
Card Scanned Successfully
Retry
retryTitle
Scanning Failed - Please Try Again
Error
errorTitle
Setup Failure - Please Reload the Page
CameraError
cameraErrorTitle
Unable to Setup Camera for Capture

Example

Here's an example of how to customize the default message displayed when initiating the scanning process:
React
React Native
Flutter
const const messages = {
autoCaptureTitle: "Place card on a well-lit, non-reflective surface to start scanning",
}
return (
<CardScanView
sessionToken={token}
onSuccess={cardScanSuccess}
onCancel={cardScanCancel}
messages={messages}
/>
);
const const messages = {
autoCaptureTitle: "Place card on a well-lit, non-reflective surface to start scanning",
}
return (
<CardScanView
sessionToken={token}
onSuccess={cardScanSuccess}
onCancel={cardScanCancel}
messages={messages}
/>
);
const messages = CardScanMessages(
autoCaptureTitle: 'Place card on a well-lit, non-reflective surface to start scanning',
);
CardScanner(
properties: CardScanConfig(
sessionToken: sessionToken,
cardScanSuccess: cardScanSuccess,
messages: messages,
),
);
Replace the text within the quotes to suit your application's requirements.
This example image shows the scanning process in action, with the customized autoCaptureTitle message displayed on the screen.

Scanning Process

The chart below illustrates the flow of messages displayed to the user during the card scanning process:
Scanning Process
The diagram shows how the user is guided through the scanning process, starting with the initial instructions for holding the card in the frame, progressing through the processing states, and ultimately either succeeding or requiring a retry or displaying an error.

Text Size, Text Color, and Background Color

To customize the text size, text color, and background color of the content, you can pass the respective text style and color properties to the CardScanView widget:
React - CSS
React - Native
Flutter
TODO
<CardScanView
sessionToken={token}
messageFontSize="18px"
messageTextColor="blue"
messageBackgroundColor="grey"
/>
CardScanner(
properties: CardScanConfig(
sessionToken: sessionToken,
cardScanSuccess: cardScanSuccess,
messageStyle: TextStyle(
fontSize: 18.0,
color: Colors.blue,
),
messages: messages,
),
);
This example changes the text size to 18px, the text color to blue, and the background color to gray.

UX Customization

This documentation section provides guidelines on how to customize the user experience of the card scanning component, focusing on visual aspects such as the auto/manual toggle switch color, progress bar color, and widget background color. The examples below demonstrate how to adjust these elements to match your application's branding or theme.

Auto/Manual Toggle Switch Color

The auto/manual toggle switch allows users to switch between automatic and manual scanning modes. You can change its colors to match your application's design.
To change the colors of the auto/manual toggle switch, use the following props:
  • autoSwitchActiveColor - sets the color of the active switch
  • autoSwitchInactiveColor - sets the color of the inactive switch
Here's an example of how to set the active switch color to blue and the inactive switch color to grey:
React - CSS
React Native
Flutter
TODO
<CardScanView
sessionToken={token}
onSuccess={cardScanSuccess}
onCancel={cardScanCancel}
autoSwitchActiveColor="blue"
autoSwitchInactiveColor="grey"
/>
CardScanner(
properties: CardScanConfig(
sessionToken: sessionToken,
cardScanSuccess: cardScanSuccess,
autoSwitchActiveColor: Colors.blue,
autoSwitchInactiveColor: Colors.grey,
),
);

Progress Bar Color

The progress bar provides visual feedback to users during the scanning process, indicating the current progress and scanning state (automatic vs manual).
To change the color of the progress bar, use the progressBarColor prop:
React - CSS
React Native
Flutter
TODO
<CardScanView
sessionToken={token}
onSuccess={cardScanSuccess}
onCancel={cardScanCancel}
content={customizedContent}
progressBarColor="red"
/>
CardScanner(
properties: CardScanConfig(
sessionToken: sessionToken,
cardScanSuccess: cardScanSuccess,
progressBarColor: Colors.red,
),
);
In this example, the progress bar color is set to red, replace red with the desired color.

Widget Background Color

The widget background color can be customized to seamlessly integrate the component with your application's design.
To change the background color of the UI widget, use the widgetBackgroundColor prop:
React - CSS
React Native
Flutter
TODO -
<CardScanView
sessionToken={token}
onSuccess={cardScanSuccess}
onCancel={cardScanCancel}
messages={customizedMessages}
widgetBackgroundColor="#f0f0f0"
/>
CardScanner(
properties: CardScanConfig(
sessionToken: sessionToken,
cardScanSuccess: cardScanSuccess,
widgetBackgroundColor: Color(0xFFF0F0F0),
),
);
Replace Color(0xFFF0F0F0) with the desired background color.
By customizing these visual aspects, you can provide a consistent user experience that aligns with your application's overall design and branding.

Success Indicator

After successful scanning and processing of the insurance card, the UI widget will display a checkmark icon in the center of the bounding box.
The indicator can be replaced by passing a ReactNode into the successIndicator prop.
Note: Currently only supported by the React UI Widget
Successful Scan UI
Here's an example of how to create a custom success indicator using an SVG checkmark icon and a message:
import { ReactComponent as CheckmarkIcon } from './checkmark-icon.svg';
<CardScanView
sessionToken={token}
onSuccess={cardScanSuccess}
onCancel={cardScanCancel}
successIndicator={<CheckmarkIcon />}
/>

Error Indicator

If a system error occurs during card processing the react widget will display an error icon in the center of the bounding box.
The indicator can be replaced by passing a ReactNode into the errorIndicator prop.
Note: Currently only supported by the React UI Widget
Here's an example of how to create a custom error indicator using an SVG error icon and a message:
import { ReactComponent as ErrorIcon } from './error-icon.svg';
<CardScanView
sessionToken={token}
onSuccess={cardScanSuccess}
onCancel={cardScanCancel}
content={customizedContent}
errorIndicator={<ErrorIcon />}
/>

Close Button

The close button is displayed in the top right-hand corner of the react widget. When touched or clicked it will stop the camera stream, clean up the component, and then call the onCancel handler.
Note: Currently only supported by the React UI Widget
The close button can be replaced by passing a ReactNode into the closeButton prop.
const customCloseButton = () => {
return (
<button type="button" className="btn btn-secondary">Close</button>
)
};
<CardScanView
sessionToken={token}
onSuccess={cardScanSuccess}
onCancel={cardScanCancel}
closeButton={customCloseButton()}
/>
Are we missing something? Please let us know and we would be happy to add it. Contact support.