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

# Smart UI FAQ and Troubleshooting

> This guide addresses common questions and issues developers encounter when implementing the Smart UI.

## Critical Implementation Notes

<Callout icon="bell" color="#FFCA16" iconType="regular">
  Before implementing Smart UI, ensure you handle the completion events properly to avoid users getting stuck on the "sit tight" page.
</Callout>

### Handling Completion Events

The Smart UI emits specific events when the flow completes:

* `FF_CHECK_RESULT`
* `FF_EXTERNAL_IDV_CHECK_COMPLETED`

```javascript title="Event Handler Example" theme={null}
window.addEventListener('FF_CHECK_RESULT', (event) => {
  // Handle successful KYC check
  const result = event.detail;
  // Navigate user to next step
});

window.addEventListener('FF_EXTERNAL_IDV_CHECK_COMPLETED', (event) => {
  // Handle external IDV check completion
  const result = event.detail;
  // Process result and redirect user
});
```

<Info>
  If you don't handle these events, users will see either:

  * A "sit tight" page (for passed checks)
  * An "Oh No" page (for failed checks)
</Info>

## Common Issues and Solutions

<AccordionGroup>
  <Accordion title="Character Encoding Issues">
    <Frame caption="Example of incorrect character rendering">
      <img src="https://mintcdn.com/frankieone-f5583b1b/DeCFYTh7H_iJ49UP/images/docs/3e058b7-smart_ui_rendering.jpg?fit=max&auto=format&n=DeCFYTh7H_iJ49UP&q=85&s=4742e8bd328311fbbe905f1a06b5f333" width="1080" height="2400" data-path="images/docs/3e058b7-smart_ui_rendering.jpg" />
    </Frame>

    Smart UI requires UTF-8 encoding. Add this meta tag to your HTML header:

    ```html title="Required Meta Tag" theme={null}
    <meta charset="utf-8" />
    ```
  </Accordion>

  <Accordion title="Browser Compatibility">
    Smart UI is compatible with all ES5-compliant browsers.

    <Card title="Browser Compatibility List" icon="browser" href="https://compat-table.github.io/compat-table/es6/">
      View full browser compatibility table
    </Card>
  </Accordion>

  <Accordion title="Google API Key Security">
    <Steps>
      <Step>
        ### Secure your API key

        Restrict your Google API key to Frankie's IP addresses
      </Step>

      <Step>
        ### Find Frankie's IPs

        Access the [Outbound IP Address List](/docs/reference/outbound-ip-addresses)
      </Step>

      <Step>
        ### Configure Restrictions

        Follow [Google's API key security guide <Icon icon="arrow-up-right-from-square" size={12} />](https://developers.google.com/maps/api-security-best-practices#restricting-api-keys)
      </Step>
    </Steps>
  </Accordion>
</AccordionGroup>

## Device Support and Limitations

<Info>
  Current minimum viewport width: 320-330 pixels
</Info>

<Callout icon="thumbtack" color="#1A6CFF" iconType="regular">
  Future updates will improve responsiveness for smaller devices.
</Callout>

## Address Collection Logic

<Callout icon="star" color="#3DD892" iconType="regular">
  Users are only prompted for past addresses when their initial address doesn't return results.
</Callout>

The address collection flow works as follows:

<Steps>
  <Step>
    ### Initial Address Collection

    User provides their current address
  </Step>

  <Step>
    ### Address Validation

    System attempts to verify the provided address
  </Step>

  <Step>
    ### Additional Information (if needed)

    If verification fails, user is asked:

    * To review their details
    * If they've lived at the address for less than 6 months
  </Step>
</Steps>