Vanilla JS Guide

This guide shows how to embed the iExchange widget in a plain HTML page.

1. Load the script

<script src="${SCRIPT_URL}"></script>

2. Minimal example

<!DOCTYPE html>
<html>
  <head>
    <script src="${SCRIPT_URL}"></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>

3. Authentication

The widget stays read-only until the user signs. You can use a WalletClient or a raw provider.

<script type="module">
  import { createWalletClient, custom } from "https://esm.sh/viem@latest";

  const walletClient = createWalletClient({ transport: custom(window.ethereum) });

  // Option A – inject client now, widget will prompt later on demand
  widget.setWalletClient(walletClient);

  // Option B – prompt immediately
  await widget.authenticate(walletClient);
</script>

Or pass a provider directly:

<script>
  // Inject provider for later
  await widget.setProvider(window.ethereum);

  // Or authenticate immediately with provider
  await widget.authenticate({ provider: window.ethereum });
</script>

Need more details? Check the viem Wallet Client guide.

See the Wallet Integration guide for wagmi / ethers examples.

4. Subscribing to events

You can listen to widget lifecycle events and all SDK events:

<script>
  // Log when a quick trade completes
  const disposer = widget.subscribe("QUICK_TRADE", evt => {
    console.log("Trade completed", evt.data);
  });

  // Stop listening later (optional)
  setTimeout(disposer, 10_000);
</script>

5. Switching chains

<script>
  // Switch to Base mainnet (8453)
  await widget.switchChain(8453);

  // Or reset to default
  await widget.switchChain(null);
</script>