Skip to main content
Deframe supports three production integration paths — all non-custodial. Your app controls wallet connection, signing, and transaction submission.
  1. API-only: Use Deframe endpoints and build your own UI.
  2. SDK widgets: Embed EarnWidget and SwapWidget with deframe-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: @deframe-sdk/components, @reduxjs/toolkit, react-redux, and redux.
SDK widget styles are loaded by deframe-sdk automatically. Keep host styles scoped and avoid global CSS resets leaking into .deframe-widget.
Current verified widget stack: deframe-sdk@0.2.0, @deframe-sdk/components@0.1.23, @privy-io/react-auth@2.25.0, plus Redux peer packages in the host app.
Canonical client env names for widget hosts: NEXT_PUBLIC_DEFRAME_URL, NEXT_PUBLIC_DEFRAME_API_KEY, NEXT_PUBLIC_DEFRAME_WEBSOCKET_URL, and NEXT_PUBLIC_PRIVY_APP_ID.

EarnWidget Guide

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

API-only

Use Deframe 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 Deframe 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 Deframe 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 Deframe API.
3

Generate bytecode

Request Deframe 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 deframe-sdk. The SDK handles UI rendering, quote fetching, and bytecode generation — you provide the wallet adapter and transaction signing.
Install peer dependencies explicitly: @deframe-sdk/components, @reduxjs/toolkit, react-redux, and redux.
SDK widget styles are loaded by deframe-sdk automatically. 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 Deframe webview (https://iframe.deframe.io) 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