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

# Integration Options

> Choose how to integrate Pods: API, SDK widgets, or iframe

Pods supports three production integration paths — all non-custodial. Your app controls wallet connection, signing, and transaction submission.

1. **API-only**: Use Pods endpoints and build your own UI.
2. **SDK widgets**: Embed `EarnWidget` and `SwapWidget` with `pods-sdk`.
3. **Iframe**: Embed the hosted Pods webview with a `postMessage` wallet bridge.

All three paths are customer-safe and non-custodial: your app controls wallet connection, signing, and transaction submission.

<Info>
  For SDK widget mode, install peer dependencies explicitly when needed: `@deframe-sdk/components`, `@reduxjs/toolkit`, `react-redux`, and `redux`.
</Info>

<Info>
  Import `@deframe-sdk/components/styles.css` once in the host entrypoint before your app CSS. Keep host styles scoped and avoid global CSS resets leaking into `.deframe-widget`.
</Info>

<Info>
  Current verified widget stack: `pods-sdk@0.2.87`, `@deframe-sdk/components@0.1.91`, plus Redux peer packages in the host app. Add wallet-provider packages such as Privy only when your host uses that wallet stack.
</Info>

<Info>
  Canonical client env names for widget hosts: `NEXT_PUBLIC_PODS_API_URL`, `NEXT_PUBLIC_PODS_API_KEY`, and `NEXT_PUBLIC_PODS_WEBSOCKET_URL`. Add `NEXT_PUBLIC_PRIVY_APP_ID` only for Privy hosts.
</Info>

<CardGroup cols={2}>
  <Card title="EarnWidget Guide" icon="vault" href="/widgets/earn-widget">
    Full integration for yield flows (customer onboarding, UI, and tx execution).
  </Card>

  <Card title="API-only" icon="code">
    Use Pods endpoints directly and build your own UI. Maximum control over UX.
  </Card>

  <Card title="SDK Widgets" icon="puzzle-piece">
    Embed ready-made `EarnWidget` and `SwapWidget` React components. Fastest time-to-market.
  </Card>

  <Card title="Iframe" icon="window-maximize">
    Embed a hosted Pods webview in any stack via `postMessage`. No React dependency required.
  </Card>
</CardGroup>

## Integration Decision Matrix

| Path            | Best for                              | What you build                                     | React required? |
| --------------- | ------------------------------------- | -------------------------------------------------- | --------------- |
| **API-only**    | Maximum control over UX               | Endpoints, tx orchestration, all screens           | No              |
| **SDK widgets** | Fastest time-to-market for React apps | Host shell + wallet adapter + `processBytecode`    | Yes             |
| **Iframe**      | Non-React stacks or embedded webviews | Host page + `postMessage` handler + wallet signing | No              |

***

## API-only Integration

Call Pods endpoints directly and build your own UI. See the [Quickstart](/getting-started/quickstart) for a 5-minute walkthrough, or follow the step-by-step flow below.

<Steps>
  <Step title="Provision customer access">
    Create an API key and map your internal user ID to wallet address(es).
  </Step>

  <Step title="Load market data">
    Fetch strategies/swaps, balances, and quotes from Pods API.
  </Step>

  <Step title="Generate bytecode">
    Request Pods transaction bytecode for deposit/withdraw/swap actions.
  </Step>

  <Step title="Sign and submit">
    Use your wallet stack to sign and broadcast transactions.
  </Step>

  <Step title="Track and reconcile">
    Poll positions/history/status endpoints and show final state in your UI.
  </Step>
</Steps>

For the canonical one-shot host prompt and the current Privy + websocket + theme contract, use:

* [LLM Privy Integration Guide](/llms-privy-integration.txt)
* [EarnWidget Integration](/widgets/earn-widget)

## SDK Widget Integration

Embed `EarnWidget` and `SwapWidget` React components with `pods-sdk`. The SDK handles UI rendering, quote fetching, and bytecode generation; you provide the wallet adapter and transaction signing.

For the Pods Wallet-style swap form, register `components.SwapFormView = PodsSwapFormView` in the shared `DeframeProvider` config.

<Info>
  Install peer dependencies explicitly: `@deframe-sdk/components`, `@reduxjs/toolkit`, `react-redux`, and `redux`.
</Info>

<Info>
  Import `@deframe-sdk/components/styles.css` once in the host entrypoint before your app CSS. Keep host styles scoped and avoid global CSS resets leaking into `.deframe-widget`.
</Info>

<CardGroup cols={3}>
  <Card title="EarnWidget Guide" icon="vault" href="/widgets/earn-widget">
    Full integration for yield flows (customer onboarding, UI, and tx execution).
  </Card>

  <Card title="SwapWidget Guide" icon="arrows-rotate" href="/widgets/swap-widget">
    Same-chain and cross-chain swap UI with quote and bytecode execution.
  </Card>

  <Card title="processBytecode Contract" icon="code" href="/widgets/process-bytecode">
    Required host callback contract and transaction lifecycle events.
  </Card>
</CardGroup>

***

## Iframe Integration

Embed a hosted Pods webview (`https://iframe.pods.finance`) in any stack using `postMessage` communication. This approach works with any frontend framework — no React dependency required. The iframe renders DeFi widgets (Earn, Swap), and your host page handles wallet connection, transaction signing, and status reporting.

<CardGroup cols={3}>
  <Card title="Iframe Overview" icon="window-maximize" href="/iframe/overview">
    URL parameters, postMessage protocol, and full integration guide
  </Card>

  <Card title="Iframe + Privy" icon="shield-check" href="/iframe/privy">
    Iframe integration with Privy authentication
  </Card>

  <Card title="Iframe + wagmi/viem" icon="code" href="/iframe/wagmi-viem">
    Iframe integration with wagmi and viem
  </Card>
</CardGroup>