Skip to main content
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.
For SDK widget mode, install peer dependencies explicitly when needed: @deframe-sdk/components, @reduxjs/toolkit, react-redux, and redux.
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.
Current verified widget stack: [email protected], @deframe-sdk/[email protected], plus Redux peer packages in the host app. Add wallet-provider packages such as Privy only when your host uses that wallet stack.
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.

EarnWidget Guide

Full integration for yield flows (customer onboarding, UI, and tx execution).

API-only

Use Pods endpoints directly and build your own UI. Maximum control over UX.

SDK Widgets

Embed ready-made EarnWidget and SwapWidget React components. Fastest time-to-market.

Iframe

Embed a hosted Pods webview in any stack via postMessage. No React dependency required.

​
Integration Decision Matrix

​
API-only Integration

Call Pods endpoints directly and build your own UI. See the Quickstart for a 5-minute walkthrough, or follow the step-by-step flow below.
1

Provision customer access

Create an API key and map your internal user ID to wallet address(es).
2

Load market data

Fetch strategies/swaps, balances, and quotes from Pods API.
3

Generate bytecode

Request Pods transaction bytecode for deposit/withdraw/swap actions.
4

Sign and submit

Use your wallet stack to sign and broadcast transactions.
5

Track and reconcile

Poll positions/history/status endpoints and show final state in your UI.
For the canonical one-shot host prompt and the current Privy + websocket + theme contract, use:

​
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.
Install peer dependencies explicitly: @deframe-sdk/components, @reduxjs/toolkit, react-redux, and redux.
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.

EarnWidget Guide

Full integration for yield flows (customer onboarding, UI, and tx execution).

SwapWidget Guide

Same-chain and cross-chain swap UI with quote and bytecode execution.

processBytecode Contract

Required host callback contract and transaction lifecycle events.

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

Iframe Overview

URL parameters, postMessage protocol, and full integration guide

Iframe + Privy

Iframe integration with Privy authentication

Iframe + wagmi/viem

Iframe integration with wagmi and viem