Skip to main content

​
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.
Houdini Widget Preview

​
Key Features

Drop-in Integration

Add a full-featured swap interface in minutes with minimal code

Fully Customizable

Match your brand with custom colors, fonts, and styling

All Route Types

Supports private, semi-private, and DEX swaps out of the box

Responsive Design

Works perfectly on desktop, tablet, and mobile devices

Auto-Updated

Maintained and updated by Houdini - always current

No Backend Required

Widget handles all API calls - just provide your API key

​
Quick Start

​
Basic Embed

Add the widget to your page in 3 steps:
1

Include the script

<script src="https://app.houdiniswap.com/widget"></script>
2

Add container element

<div id="houdini-swap-widget"></div>
3

Initialize widget

HoudiniWidget.init({
  apiKey: 'your_api_key_here',
  container: '#houdini-swap-widget'
});

​
Complete Example

<!DOCTYPE html>
<html>
<head>
  <title>My App with Houdini</title>
</head>
<body>
  <div id="houdini-swap-widget"></div>

  <script src="https://app.houdiniswap.com/widget"></script>
  <script>
    HoudiniWidget.init({
      apiKey: 'your_api_key_here',
      container: '#houdini-swap-widget',
      theme: {
        primaryColor: '#16A34A',
        borderRadius: '12px'
      }
    });
  </script>
</body>
</html>

​
Widget vs API Integration

FeatureWidgetDirect API
Implementation TimeMinutesDays/Weeks
MaintenanceAuto-updated by HoudiniYou maintain
CustomizationTheme customizationFull control
UI/UXPre-built, testedBuild from scratch
Backend RequiredNoYes (for security)
Best ForQuick integration, standard flowsCustom experiences, full control