Quick Start (5 min)
This guide gets you up and running with the iExchange Quick-Trade Widget using the standalone browser script—no npm install required.
Need a live playground? Jump to the Live Demo
Script URL
https://developers.iexchange.global/widget.js
1. Include the script (React)
// App.tsx (React 19+)
import { useEffect, useRef } from "react";
const SCRIPT_URL = "https://developers.iexchange.global/widget.js";
export default function App() {
const widgetRef = useRef<any>(null);
useEffect(() => {
// Dynamically load the widget bundle once on mount
const script = document.createElement("script");
script.src = SCRIPT_URL;
script.async = true;
script.onload = () => {
// The bundle attaches itself to window.QuickTradeWidget
const { QuickTradeWidget } = window as any;
widgetRef.current = QuickTradeWidget.createWidget({
clientOptions: {
env: "dev",
defaultChainId: 84532,
defaultCurrency: "GHS",
defaultToken: "USDC",
},
themeMode: "light",
// Choose how to render the widget
// variant: "modal", // default
variant: "embedded",
containerNodeOrSelector: "#iexchange-widget-container" // required only for embedded variant,
});
};
document.body.appendChild(script);
return () => widgetRef.current?.destroy?.();
}, []);
return (
<>
<button onClick={() => widgetRef.current?.open?.()}>Open Widget</button>
{/* Container for embedded widget */}
<div id="iexchange-widget-container" style={{ marginTop: 16 }} />
</>
);
}
## 1.1 Switch chains programmatically (optional)
```tsx
// Later in your flow
await widgetRef.current?.switchChain?.(8453);
// Reset to default
await widgetRef.current?.switchChain?.(null);
## 2. Vanilla JS
```html
<!DOCTYPE html>
<html>
<head>
<script src="https://developers.iexchange.global/widget.js"></script>
</head>
<body>
<button id="open">Open Widget</button>
<!-- Container for embedded widget -->
<div id="iexchange-widget-container" style="margin-top: 16px"></div>
<script>
const widget = QuickTradeWidget.createWidget({
clientOptions: {
env: "dev",
defaultChainId: 84532,
defaultCurrency: "GHS",
defaultToken: "USDC",
},
themeMode: "light",
variant: "embedded",
containerNodeOrSelector: "#iexchange-widget-container",
});
document.getElementById("open").onclick = () => widget.open();
</script>
</body>
</html>