Comment on page
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.
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.
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 |
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 = {
'autoCaptureTitle':
'Place card on a well-lit, non-reflective surface to start scanning',
};
CardScanner(
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.
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.
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(
sessionToken: 'your_session_token',
messageStyle: TextStyle(
fontSize: 18.0,
color: Colors.blue,
)
)
This example changes the text size to 18px, the text color to blue, and the background color to gray.
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.
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 switchautoSwitchInactiveColor- 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(
sessionToken: token,
onSuccess: cardScanSuccess,
onCancel: cardScanCancel,
autoSwitchActiveColor: Colors.blue,
autoSwitchInactiveColor: Colors.grey,
);
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(
sessionToken: token,
onSuccess: cardScanSuccess,
onCancel: cardScanCancel,
content: customizedContent,
progressBarColor: Colors.red,
);
In this example, the progress bar color is set to red, replace
red with the desired 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(
sessionToken: token,
onSuccess: cardScanSuccess,
onCancel: cardScanCancel,
messages: customizedMessages,
widgetBackgroundColor: Color(0xFFF0F0F0),
);
Replace
#f0f0f0 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.
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 />}
/>
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 />}
/>
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()}
/>
Last modified 7mo ago