Camera Permission Modal 📸
Last updated
Last updated
We have three distinct flows for the camera permission modal: Desktop version, Mobile version, and SDK version. Each version operates differently based on how camera permissions are requested. Below are the details for each flow:
This section outlines all the possibilities available when using a desktop browser. In the desktop browser flow, we need to consider web-to-mobile handoff, as this is the only version that supports this functionality.
The mobile version minimizes the flow, as it does not support web-to-mobile handoff.
In the SDK version, since it is a native app built from scratch, we simply inform the user if camera permission is not granted, and the user can handle the rest.
If the react widget can access the browser's camera, it will automatically request camera permission without manual intervention. This only occurs if there are no strict blocks or restrictions in place on the browser.
requestPermissionModalConfig
The requestPermissionModalConfig object allows customization of the Request Permission Modal in the application. It provides the flexibility to set custom texts for various parts of the modal, enhancing the user experience by providing clear and relevant information.
Properties:
title:
Type: string (Optional)
Description: Sets the title of the Request Permission Modal. If this property is not provided, the modal will use the default title "Waiting for camera permission"
text:
Type: string (Optional)
Description: Sets the main content text of the Request Permission Modal. This text instruct that you must accept to turn on the camera. If this property is not provided, the modal will use the default text "Click Allow to grant camera permission."
When the react widget is unable to access the browser camera feed it will prompt the user to provide the necessary browser permissions. It displays a widget with a browser-specific video demonstrating how to grant permission to the camera.
helpModalConfig
The helpModalConfig object allows customization of the Help Modal in the application. It provides the flexibility to set custom texts for various parts of the modal, enhancing the user experience by providing clear and relevant information.
For the instructional video, there are six different versions tailored for each browser on both desktop and mobile:
Google Chrome (desktop version)
Google Chrome (mobile app version)
Safari (desktop version)
Safari (mobile app version)
Firefox (desktop version)
Firefox (mobile version)
Edge (desktop version)
Depending on the browser in which the SDK is opened, it will automatically detect and display the appropriate instructional video. If the user is on an unsupported browser, the Google Chrome video will be shown by default.
Properties:
title:
Type: string (Optional)
Description: Sets the title of the Help Modal. If this property is not provided, the modal will use the default title "Setup camera"
text:
Type: string (Optional)
Description: Sets the main content text of the Help Modal. This text explains the reason why camera permission is needed. If this property is not provided, the modal will use the default text "To access, you need to grant permission to use the device's camera. If the prompt hasn't appeared, try reloading the page."
instructionTexts:
Type: string (Optional)
Description: Sets the instruction text of the Help Modal. This provides users with clear instructions on how to enable their cameras. If this property is not provided, the modal will use the default text "If the prompt does not appear on browser, follow this path Go to Settings > Privacy and Security > Camera. Then enable camera access and reload the page."
tryAgainText:
Type: string (Optional)
Description: Sets the text of the try again button. This button will appear if the browser allows requesting camera permission without needing to navigate into the device settings. If this property is not provided, the modal will use the default text "Try again."
If the user declines camera permissions in the Request Permission modal, they will be redirected to the Camera Permission modal, with the 3 options available:
Retry Camera Access: Clicking this button will attempt to re-enable camera access and open the camera. In some cases, this button may not appear if the device restricts camera permissions for the browser.
Continue on Mobile Phone: If the user has a web-to-mobile handoff feature enabled, a button with a timer will be displayed. Once the timer expires, the Web-to-Mobile Handoff modal will appear. This option will not be available if the widget is opened on a mobile device.
Get Help: Clicking this option will redirect the user to the Help Modal.
cameraPermissionModalConfig
The cameraPermissionModalConfig object allows customization of the Help Modal in the application. It provides the flexibility to set custom texts for various parts of the modal, enhancing the user experience by providing clear and relevant information.
Properties:
enabled:
Type: boolean (Optional)
Description: A boolean flag to enable or disable the Camera Permission Modal and Help Modal . If this property is not provided, the modal will default to being enabled (true).
title:
Type: string (Optional)
Description: Sets the title of the Camera Permission Modal. If this property is not provided, the modal will use the default title "Camera permission needed"
text:
Type: string (Optional)
Description: Sets the main content text of the Camera Permission Modal. This text explains the reason why camera permission is needed. If this property is not provided, the modal will use the default text "This application needs access to the camera to scan medical insurance card".
retryText:
Type: string (Optional)
Description: Sets the text for retry button. If this property is not provided, the button will use the default text "Retry camera access"
webToMobileText:
Type: string (Optional)
Description: Sets the text for web to mobile button. If this property is not provided, the button will use the default text "Continue on Mobile Phone"
helpText:
Type: string (Optional)
Description: Sets the text for help button. If this property is not provided, the button will use the default text "Get help"
If the modal is enabled, it will appear as an option, providing users with an alternative way to scan using their mobile device in case their desktop lacks a camera.
Scanning QR: If users scan the QR it will redirect them to the widget mobile version to continue the scan from that device.
webToMobileHandOffConfig
The webToMobileHandOffConfig object allows customization of the Web to Mobile Handoff Modal in the application. It provides the flexibility to set custom texts for various parts of the modal, enhancing the user experience by providing clear and relevant information.
For implementing the functionality is on the next page:
Properties:
enabled:
Type: boolean (Optional)
Description: A boolean flag to enable or disable the web to mobile hand off modal. If this property is not provided, the modal default to being enabled (false).
urlBase:
Type: string (Optional)
Description: Define the url that will be redirected when users scan the QR code.
companyName:
Type: string (Optional)
Description: Sets the title of the Web to mobil handoff Modal. If this property is not provided, the modal will use the default title "Use your phone to scan your card"
autoRedirect:
Type: int (Optional)
Description: Sets the time in seconds for redirecting the user for web to mobile handoff on camera permission modal. If this property is not provided, the default seconds will be 15.
title:
Type: string (Optional)
Description: Sets the title of the Web to mobil handoff Modal. If this property is not provided, the modal will use the default title "Use your phone to scan your card"
instructionsText:
Type: string (Optional)
Description: Sets the text for instructions of how to use web to mobile handoff. If this property is not provided, the button will use the default text "Scan the QR code with your phone\nFollow the link to securely scan your card.\nReturn here when you're finished."
retryButtonText:
Type: string (Optional)
Description: Sets the text for retry button. If this property is not provided, the button will use the default text "Try again"
This modal is applicable only for mobile SDKs (React Native, Flutter, iOS, or Android) and indicates that the app does not have camera permission. When you click on go to settings it will redirect to the device configuration to enable the camera access.
noCameraModalConfig
The noCameraModalConfig object allows customization of the No Camera Modal in the application. It provides the flexibility to set custom texts for various parts of the modal, enhancing the user experience by providing clear and relevant information.
Properties:
title:
Type: string (Optional)
Description: Sets the title of the No Camera Modal. If this property is not provided, the modal will use the default title "No camera access"
instructions:
Type: string (Optional)
Description: Sets the main content text of the No Camera Modal. This text explains where you need to navigate to enable the camera. If this property is not provided, the modal will use the default text "To scan your card, allow us to use your camera in Settings > Privacy > Camera"
settingsButton:
Type: string (Optional)
Description: Sets the text for settings button. If this property is not provided, the button will use the default text "Go to settings"
