> ## Documentation Index
> Fetch the complete documentation index at: https://docs.houdiniswap.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Widget Overview
> Drop-in swap widget for easy integration into any website or application
## What is the Houdini Widget?
The Houdini Widget is a pre-built, customizable swap interface that you can embed into any website or web application with just a few lines of code.
## Key Features
Add a full-featured swap interface in minutes with minimal code
Match your brand with custom colors, fonts, and styling
Supports private, semi-private, and DEX swaps out of the box
Works perfectly on desktop, tablet, and mobile devices
Maintained and updated by Houdini - always current
Widget handles all API calls - just provide your API key
## Quick Start
### Basic Embed
Add the widget to your page in 3 steps:
```html theme={null}
```
```html theme={null}
```
```javascript theme={null}
HoudiniWidget.init({
apiKey: 'your_api_key_here',
container: '#houdini-swap-widget'
});
```
### Complete Example
```html theme={null}
My App with Houdini
```
## Widget vs API Integration
| Feature | Widget | Direct API |
| ----------------------- | --------------------------------- | -------------------------------- |
| **Implementation Time** | Minutes | Days/Weeks |
| **Maintenance** | Auto-updated by Houdini | You maintain |
| **Customization** | Theme customization | Full control |
| **UI/UX** | Pre-built, tested | Build from scratch |
| **Backend Required** | No | Yes (for security) |
| **Best For** | Quick integration, standard flows | Custom experiences, full control |