> ## 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.

# Consent

> The Consent screen is a crucial component that handles user privacy acknowledgment and data collection permissions. It displays your organization's privacy policy and captures user consent before proceeding with onboarding.

## Quick Implementation

<Steps>
  <Step title="Create HTML Container">
    ```html title="index.html" theme={null}
    <div id="form"></div>
    ```
  </Step>

  <Step title="Initialize Component">
    ```javascript title="consent.js" theme={null}
    const consent = oneSdk.component('form', {
      name: "CONSENT",
      type: "manual"
    });
    ```
  </Step>

  <Step title="Mount Component">
    ```javascript theme={null}
    consent.mount("#form");
    ```
  </Step>
</Steps>

## Event Handling

<CardGroup cols={1}>
  <Card title="Loading Event (form:consent:loaded`)" icon="spinner">
    Screen mounted successfully

    ```javascript theme={null}
    consent.on('form:consent:loaded', () => {
      console.log('Consent screen mounted successfully');
    });
    ```
  </Card>

  <Card title="Interaction Event (form:consent:ready)" icon="check-circle">
    User provided consent

    ```javascript theme={null}
    consent.on('form:consent:ready', () => {
      // User has provided consent - proceed to next step
      personal.mount("#form");
    });
    ```
  </Card>

  <Card title="Error Handling (form:consent:failed)" icon="triangle-exclamation">
    Screen failed to load

    ```javascript theme={null}
    consent.on('form:consent:failed', (error) => {
      console.error('Consent screen failed:', error);
      // Implement your error handling logic
    });
    ```
  </Card>
</CardGroup>

## Customization Options

<Tabs>
  <Tab title="Basic Configuration">
    ```javascript theme={null}
    const consent = oneSdk.component('form', {
      name: "CONSENT",
      type: "manual",
      title: {
        label: "Your consent matters to us",
        style: { 'ff-title': { color: '#2C3E50' } }
      },
      cta: {
        label: 'I Agree',
        style: { 'ff-button': { backgroundColor: '#27AE60' } }
      }
    });
    ```
  </Tab>

  <Tab title="Advanced Configuration">
    ```javascript theme={null}
    const consent = oneSdk.component('form', {
      name: "CONSENT",
      type: "manual",
      title: {
        label: "Your consent matters to us",
        style: { 'ff-title': { /* custom styles */ } }
      },
      descriptions: [
        { 
          label: 'We collect your data to verify your identity',
          style: { 'ff-description': { fontSize: '16px' } }
        },
        { 
          label: 'Your information is protected by our privacy policy',
          style: { 'ff-description': { fontSize: '16px' } }
        }
      ],
      checkbox: {
        label: "Consent Acknowledgment",
        content: [
          { label: "I have read and agree to the privacy policy" },
          { label: "I consent to the collection of my personal information" }
        ]
      },
      cta: {
        label: 'Continue',
        style: { 'ff-button': { /* custom styles */ } }
      },
      logo: {
        src: './assets/logo.png' // path to your logo
      },
      style: {
        'ff-logo': {
          'width': '50px'
        }
      }
    });
    ```
  </Tab>
</Tabs>

## Customizable Elements

<AccordionGroup>
  <Accordion title="Title Customization">
    ```javascript theme={null}
    title: {
      label: "Your consent matters to us",
      style: {
        'ff-title': {
          fontSize: '24px',
          fontWeight: 'bold',
          color: '#2C3E50'
        }
      }
    }
    ```
  </Accordion>

  <Accordion title="Description Configuration">
    ```javascript theme={null}
    descriptions: [
      {
        label: 'We need to collect your data for verification',
        style: {
          'ff-description': {
            marginBottom: '1rem',
            lineHeight: '1.5'
          }
        }
      }
    ]
    ```
  </Accordion>

  <Accordion title="Checkbox Options">
    ```javascript theme={null}
    checkbox: {
    style: { 'ff-checkbox': { /* style for container of checkbox*/ } },
    content: [
    { label: "I agree to the terms and conditions", style: {
      'ff-checkbox-item': { /* style for this particular content checkbox row */ },
      'ff-checkbox-input': { /* style for this particular input element of the checkbox */}
    } },
    { label: "I consent to data collection" }
    ]
    }
    ```
  </Accordion>

  <Accordion title="Button Styling">
    ```javascript theme={null}
    cta: {
      label: 'Continue',
      style: {
        'ff-button': {
          backgroundColor: '#27AE60',
          color: 'white',
          padding: '12px 24px',
          borderRadius: '4px'
        }
      }
    }
    ```
  </Accordion>

  <Accordion title="Logo">
    ```javascript theme={null}
    logo: {
      src: './assets/logo.png'
    },
    style: {
      'ff-logo': {
        'width': '50px'
      }
    }
    ```
  </Accordion>
</AccordionGroup>

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

  * Always maintain clear and concise consent language
  * Ensure checkbox labels accurately reflect what users are agreeing to
  * Consider implementing multiple language support for international users
  * Test the consent flow thoroughly in your development environment
</Callout>

<Callout icon="bell" color="#FFCA16" iconType="regular">
  Remember to comply with relevant privacy regulations (GDPR, CCPA, etc.) when
  customizing consent text and checkboxes.
</Callout>