Skip to content

Start Screen

The start screen serves as the entry point before document processing, allowing users to choose between capturing an identity document using their device's camera or selecting an existing image from the gallery.

It can be customized to align with specific branding and functional requirements. Customizable elements include:

To customize the appearance, use the part attribute and define the desired CSS properties. For example:

document-reader::part(foo) {
    /* Styles to apply to the `foo` part */
}

Headline

The headline on the start screen is a central element that consists of a title and a description, designed to introduce the app's purpose and guide the user before starting the document processing.

Start Screen with hint elements highlighted

Part element Description
menu-title Title text.
menu-subtitle Subtitle text.

Buttons

The buttons on the start screen provide users with up to three options for initiating document processing:

  1. Camera: Opens the device's camera to capture an identity document in real-time.
  2. Files: Allows users to select an existing image from their device's gallery for document processing.
  3. Mobile device: Switches to another device to capture the document, then seamlessly returns to the current device. To use this option, you need to activate the "Switch to Mobile" feature.

Each button can be customized, including the option to turn them on or off based on user preferences or app configuration.

Start Screen with buttons highlighted

Part element Description
container-close-button Closes the start screen.
menu-from-camera-button Opens the device's camera.
menu-from-gallery-button Allows uploading an image from the gallery.
menu-from-mobile-button Delegates the document capture to another device.

Switch to Mobile

To activate the "Switch to Mobile" feature, go to the "Switch to Mobile" page.

Switch to Mobile Screen for the image capture, with layout elements highlighted

Switch to Mobile Screen for the image capture, with hints and controls highlighted

Part element Description
remote-scanner-container Container that holds all the elements of the switch to mobile screen.
container-close-button Button to close the switch to mobile screen.
remote-scanner-text ???
remote-scanner-title Title text.
remote-scanner-subtitle Subtitle text.
remote-scanner-qr Scan the QR code to switch to another device.

Containers

The start screen is divided into three containers that organize the layout and content:

  1. Header: Positioned at the top of the start screen, the header contains the close button.
  2. Body: The main section of the start screen, where the content is displayed. It contains the headline and the buttons used to start the document processing.
  3. Footer: Located at the bottom, the footer contains copyright information.

Each container can be customized to match the app's design and user needs.

Start Screen with layout sections highlighted

Part element Description
container-header Header.
menu-container Body.
container-footer Footer.

Next Steps