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.
Both 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: @pods-sdk/components, @reduxjs/toolkit, react-redux, and redux.
SDK widget styles are loaded by pods-sdk automatically. Keep host styles scoped and avoid global CSS resets leaking into .pods-widget.
Current verified widget stack: [email protected], @pods-sdk/[email protected], @privy-io/[email protected], plus Redux peer packages in the host app.
Canonical client env names for widget hosts: NEXT_PUBLIC_PODS_URL, NEXT_PUBLIC_PODS_API_KEY, NEXT_PUBLIC_PODS_WEBSOCKET_URL, and NEXT_PUBLIC_PRIVY_APP_ID.

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

PathBest forWhat you buildReact required?
API-onlyMaximum control over UXEndpoints, tx orchestration, all screensNo
SDK widgetsFastest time-to-market for React appsHost shell + wallet adapter + processBytecodeYes
IframeNon-React stacks or embedded webviewsHost page + postMessage handler + wallet signingNo

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

​
Legacy iFrame Option (Deprecated)

​
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.
Install peer dependencies explicitly: @pods-sdk/components, @reduxjs/toolkit, react-redux, and redux.
SDK widget styles are loaded by pods-sdk automatically. Keep host styles scoped and avoid global CSS resets leaking into .pods-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