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

# Opal

> Method's embedded UI for identity verification, account discovery, and more.

## What Opal Is and Why It Matters

Opal is Method's embedded UI, a set of pre-built, white-labeled screens and flows that you drop into your application to handle the complex, multi-step processes of identity verification, account discovery, and more. Instead of designing, building, testing, and maintaining these flows yourself, you launch Opal and let it guide your users through the process in a polished, tested experience.

Opal represents a significant acceleration of your roadmap. Building identity verification and account linking flows from scratch typically takes weeks of engineering time, plus ongoing maintenance as edge cases, error states, and accessibility requirements emerge. Opal compresses this to days, your engineering team creates a session token, launches the component, and listens for completion events. Everything in between is handled by Method.

Opal is also designed for conversion. The flows are optimized for completion rates, with clear progress indicators, helpful error messaging, and the ability for users to resume interrupted sessions without starting over. When a user's phone dies mid-verification or they need to step away, their progress is saved.

## Opal Modes — What Your Users Experience

Opal operates in distinct modes, each handling a specific part of the user journey. You can launch these independently depending on where the user is in your flow:

<CardGroup cols={2}>
  <Card title="Identity Verification" icon="shield-check" href="/opal/identity/overview">
    Guides the user through Method's two-step verification process. First, the user confirms their phone number (via SMS code, silent network auth, or other methods). Then, they complete identity verification through a KYC process. From the user's perspective, this feels like a simple onboarding step, enter some information, confirm a code, answer a few questions, and they're verified. Behind the scenes, Opal is orchestrating phone verification, identity matching, and KYC compliance.
  </Card>

  <Card title="Connect" icon="link" href="/opal/connect/overview">
    After verification, the user consents to a soft credit pull, and Opal displays the discovered liability accounts, credit cards, loans, mortgages, and more, in a clear, organized interface. The user can see what was found and proceed to the next step in your flow. This is often the "wow moment" in a debt management product: the user sees their complete liability picture for the first time, surfaced automatically without manual entry.
  </Card>

  <Card title="Card Connect" icon="credit-card" href="/opal/card_connect/overview">
    Handles the specific case where a user needs to verify and connect a particular card for payment flows. This is useful when your product needs to work with a specific card rather than discovering all liabilities.
  </Card>

  <Card title="Account Verification" icon="building-columns" href="/opal/account_verification/overview">
    Confirms ownership of a specific account. This is used when you need to verify that a user controls a particular financial account before enabling certain operations.
  </Card>
</CardGroup>

Each mode can be launched independently depending on where the user is in your flow.

## How Opal Integrates Into Your Flow

<Steps>
  <Step title="Request a session token">
    Your backend requests a session token from Method, scoped to a specific user (Entity) and a specific mode
  </Step>

  <Step title="Load the SDK">
    Your frontend application loads Opal using one of Method's client SDKs (available for web, React, and React Native)
  </Step>

  <Step title="User interacts with Opal">
    The user interacts with Opal directly, filling in information, confirming codes, reviewing discovered accounts
  </Step>

  <Step title="Receive webhook events">
    Your backend listens for webhook events that signal progress and completion, triggering whatever comes next in your application flow
  </Step>
</Steps>

Sessions are persistent, meaning users can leave and return without losing progress. This is particularly important for mobile users who may be interrupted by notifications, phone calls, or simply needing to come back later.

## Customization and Branding

Opal is designed to feel like a native part of your application, not a third-party widget. Customization options include:

* Brand colors and accent colors
* Typography and font choices
* Logo placement and branding elements
* Light/dark mode support

The goal is that your users never feel like they've been handed off to a different product. Refer to the [Opal documentation](/opal/overview) for the full range of theming options and accessibility compliance details.

## When to Consider API-Only

Opal covers the vast majority of integration scenarios, but there are cases where building directly against Method's APIs may be a better fit:

* Your product has an existing onboarding flow that users are already familiar with, and you need the verification steps to feel native to that flow's design language
* Your compliance or security requirements demand that PII collection happens entirely within your own infrastructure
* You need fine-grained control over the verification step ordering or conditional logic that Opal's session model doesn't support

If you're unsure, start with Opal. You can always migrate specific steps to API-only later without rebuilding everything.

<Warning>
  Elements was Method's previous embedded UI, deprecated on December 31, 2025. All new integrations should use Opal. If your team is still using Elements, plan your migration using the [Opal migration guide](/opal/migration_guide).
</Warning>

## What's Next

<CardGroup cols={2}>
  <Card title="Opal Quickstart" icon="rocket" href="/opal/quickstart">
    Get Opal running in your application in minutes.
  </Card>

  <Card title="Opal Libraries" icon="book" href="/opal/libraries">
    SDK installation and setup for web, React, and React Native.
  </Card>

  <Card title="Opal Sessions" icon="key" href="/opal/sessions">
    Session management, token creation, and lifecycle.
  </Card>

  <Card title="Opal Events" icon="bell" href="/opal/events">
    Event handling and completion callbacks.
  </Card>

  <Card title="Opal API Reference" icon="code" href="/reference/opal/overview">
    Token creation, session management, and event types.
  </Card>
</CardGroup>
