> ## Documentation Index
> Fetch the complete documentation index at: https://docs.frankieone.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Document

> The Manual Document screen enables secure ID capture from your users. You can configure it to collect one or multiple forms of identification, with full customization options.

# Manual Document Screen

<Info>
  The Manual Document screen enables secure ID capture from your users. You can
  configure it to collect one or multiple forms of identification, with full
  customization options.
</Info>

## Quick Implementation

<CodeGroup>
  ```html title="index.html" theme={null}
  <div id="form"></div>
  ```

  ```javascript title="initialize.js" theme={null}
  const document = oneSdk.component("form", {
    name: "DOCUMENT",
    type: "manual",
  });

  document.mount("#form");
  ```
</CodeGroup>

## Configuration Options

<Tabs>
  <Tab title="Basic Setup">
    ```javascript theme={null}
    const document = oneSdk.component('form', {
      // Set component name to identify this as document collection screen
      name: "DOCUMENT",
      // Use manual input mode rather than OCR scanning
      type: "manual", 
      // Require user to submit two forms of identification
      numberOfIDs: 2,
      // Configure the main heading
      title: {
        label: "Choose Your Identification"
      },
      // Add explanatory text below the heading
      descriptions: [
        {label: 'We need two forms of ID to verify your identity'}
      ]
      // Add logo to top of the page
      logo: {
        src: './assets/logo.png' // path to your logo
      },
      style: {
        'ff-logo': {
          'width': '50px'
        }
      }
    });
    ```
  </Tab>

  <Tab title="Advanced Options">
    ```javascript theme={null}
    const document = oneSdk.component('form', {
      // Set component name to identify this as document collection screen  
      name: "DOCUMENT",
      // Use manual input mode rather than OCR scanning
      type: "manual",
      // Require user to submit two forms of identification
      numberOfIDs: 2,
      // Configure the main heading with custom styling
      title: {
        label: "Identity Verification",
        style: "custom-title-class" // Apply custom CSS class to title
      },
      // Add explanatory text with custom styling
      descriptions: [
        {
          label: 'Please provide two government-issued IDs',
          style: 'ff-description' // Apply OneSDK's built-in description styling
        }
      ],
      // Add logo to top of the page
      logo: {
        src: './assets/logo.png' // path to your logo
      },
      style: {
        'ff-logo': {
          'width': '50px'
        }
      }
    });
    ```
  </Tab>
</Tabs>

## Customization Guide

<AccordionGroup>
  <Accordion title="General Settings">
    <CardGroup cols={2}>
      <Card title="Number of IDs" icon="id-card">
        Configure how many ID documents users must submit:

        ```javascript theme={null}
        numberOfIDs: 2  // Requires two forms of ID
        ```

        Users will be guided through submitting each required document sequentially.
      </Card>

      <Card title="Page Title" icon="heading">
        Customize the page header:

        ```javascript theme={null}
        title: {
          label: "Identity Verification",
          style: "custom-title-class"  // Optional
        }
        ```
      </Card>
    </CardGroup>
  </Accordion>

  <Accordion title="Description Customization">
    Add descriptive text to guide users:

    ```javascript theme={null}
    descriptions: [
      {
        label: 'Please provide a valid government-issued ID',
        style: 'ff-description'  // Optional styling
      },
      {
        label: 'Accepted formats: passport, driver's license, or national ID',
        style: 'ff-description'
      }
    ]
    ```
  </Accordion>

  <Accordion title="Multiple ID Text Customization">
    Use `labels` instead of `label` if you need to provide different text for each document when collecting multiple IDs.

    ```javascript theme={null}
    const documents = oneSdk.component('form', {
      name: 'DOCUMENT',
      type: 'manual',
      numberOfIDs: 2,
      title: {
        labels: ['Title for first ID', 'Title for second ID'],
      },
      descriptions: [
        {
          labels: [
            'Label for first ID.',
            'Label for second ID.',
          ],
        },
      ],
      subtitle: {
        labels: [
          'Subtitle for first ID',
          'Subtitle for second ID',
        ],
      },
    });
    ```
  </Accordion>
</AccordionGroup>

## Event Handling

<CardGroup cols={2}>
  <Card title="Lifecycle Events" icon="circle-play">
    * `form:document:loaded` (Screen mounted successfully)
    * `form:document:ready` (User completed document submission)
    * `form:document:failed` (Screen encountered an error)
  </Card>

  <Card title="Navigation Events" icon="arrow-right">
    * `form:document:back` - User clicked back button
    * `form:document:navigate` - Navigation occurred
  </Card>
</CardGroup>

### Event Listening Example

```javascript title="Event Handlers" theme={null}
document.on('form:document:loaded', () => {
  console.log('Document screen loaded successfully');
});

document.on('form:document:ready', (data) => {
// Handle successful document submission
console.log('Documents submitted:', data);
});

document.on('form:document:failed', (error) => {
console.error('Document submission failed:', error);
});

```

<Callout icon="star" color="#3DD892" iconType="regular">
  ##### Best Practice

  Always implement error handling for the `form:document:failed` event to provide a smooth user experience when issues occur.
</Callout>

## Implementation Steps

<Steps>
  <Step title="Add Container Element">
    Add a container div to your HTML:

    ```html theme={null}
    <div id="form"></div>
    ```
  </Step>

  <Step title="Initialize Component">
    Create and configure the document component:

    ```javascript theme={null}
    const document = oneSdk.component("form", {
      name: "DOCUMENT",
      numberOfIDs: 1,
      title: { label: "Choose Your ID" },
      type: "manual",
      documents: [
        {
          type: 'DRIVERS_LICENCE',
          countries: {
            default: {
              default: {
                fields: [
                  {
                    name: 'country',
                    options: [
                      {
                        label: 'Australia',
                        value: 'AUS',
                      },
                      {
                        label: 'Singapore',
                        value: 'SGP',
                      },
                    ],
                  },
                ],
              },
            },
            AUS: {
              default: {
                fields: [
                  {
                    name: 'country',
                    options: [
                      {
                        label: 'Australia',
                        value: 'AUS',
                      },
                    ],
                  },
                ],
              },
            },
          },
        },
        {type: "PASSPORT"}
      ]
    });
    ```
  </Step>

  <Step title="Mount Component">
    Mount the component to your container:

    ```javascript theme={null}
    document.mount("#form");
    ```
  </Step>

  <Step title="Set Up Event Listeners">
    Add necessary event listeners for your use case:

    ```javascript theme={null}
    document.on("form:document:ready", handleSubmission);
    ```
  </Step>
</Steps>

<Callout icon="bell" color="#FFCA16" iconType="regular">
  Ensure your HTML element has the correct viewport meta tags for proper mobile
  rendering:

  ```html theme={null}
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
    charset="UTF-8"
  />
  ```
</Callout>