Widget Integration

​

Overview

​

Key Features

• Zero configuration: Works out-of-the-box with minimal setup
• Fully responsive: Adapts to different screen sizes
• Customizable themes: Light, dark, and custom color schemes
• Partner fees: Earn revenue on trades through your integration
• Multi-network support: All CoW Protocol-enabled networks
• Wallet integration: Connect to existing wallet providers or standalone mode

​

Quick Start Example

import { createCowSwapWidget, CowSwapWidgetParams } from '@cowprotocol/widget-lib'// HTML element where the widget will be renderedconst widgetContainer = document.getElementById('cowswap-widget')const params: CowSwapWidgetParams = {  appCode: 'YOUR-APP-NAME', // Required: identifies your app  width: 600,  height: 640,  sell: { asset: 'USDC' },  buy: { asset: 'WETH', amount: '0.1' },  theme: 'light', // 'light' | 'dark' | custom theme object  partnerFee: {    bps: 50, // 0.5% fee    recipient: '0xYourFeeRecipientAddress',  },}createCowSwapWidget(widgetContainer, { params })

​

Installation

# Install the widget librarynpm install @cowprotocol/widget-lib

​

Configuration Options

• Trading pairs: Pre-select sell/buy tokens and amounts
• Partner fees: Earn revenue on trades (up to 1%)
• Custom themes: Match your app’s branding
• Token lists: Use custom token lists
• Wallet integration: Connect to your app’s wallet or standalone mode
• Event handling: Listen to trading events and notifications

​

Example with Custom Theme

import { createCowSwapWidget, CowSwapWidgetPalette } from '@cowprotocol/widget-lib'const customTheme: CowSwapWidgetPalette = {  baseTheme: 'light',  primary: '#00ff85',  background: '#f7f7f7',  paper: '#1a4435',  text: '#ffffff',}const params = {  appCode: 'YOUR-APP-NAME',  theme: customTheme,  // ... other params}createCowSwapWidget(widgetContainer, { params })

​

When to Use the Widget

• Rapid integration: Get trading functionality live in minutes
• Standard UI/UX: When CoW Swap’s interface meets your needs
• Minimal development: Perfect for MVPs and quick prototypes
• Partner fees: Easy way to monetize trading volume

​

Widget Configurator

• Preview different configurations
• Generate code snippets
• Test custom themes
• Configure partner fees

​

Next Steps

​

Resources

• Widget Configurator - Interactive configuration tool
• Complete Widget Guide - Detailed documentation
• GitHub Repository - Source code
• Partner Fee Program - Revenue sharing details