> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hypermid.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Widget Playground

> Customize, preview, and copy widget embed code with live controls

The Hypermid widget playground lets you tune every visual knob — colors, fonts, border radius, modes, chains, layout — and watch a live preview update in real time. When you're happy, copy a single-line iframe or script tag and drop it into your site.

<a
  href="https://app.hypermid.io/widget/playground"
  target="_blank"
  rel="noopener"
  style={{
display: "block",
border: "1px solid var(--border, rgba(0,0,0,0.08))",
borderRadius: 12,
overflow: "hidden",
textDecoration: "none",
color: "inherit",
margin: "16px 0 8px",
boxShadow: "0 4px 24px rgba(0,0,0,0.06)",
}}
>
  <img src="https://mintcdn.com/hypermid/1LiAJrB1_oYBcvJM/images/widget-playground.png?fit=max&auto=format&n=1LiAJrB1_oYBcvJM&q=85&s=8ceae73e819b477f9528b4ed590ffe58" alt="Hypermid Widget Playground — three columns: configuration controls on the left, live widget preview in the middle, copyable embed code on the right" style={{ display: "block", width: "100%", height: "auto" }} width="3838" height="1668" data-path="images/widget-playground.png" />

  <div style={{ padding: "14px 18px", background: "var(--background, #fff)" }}>
    <div style={{ fontWeight: 600, fontSize: 16 }}>
      🎨 Open the Widget Playground →
    </div>

    <div style={{ fontSize: 14, opacity: 0.75, marginTop: 4 }}>
      Launch in a new tab. No signup required. Tune accents, success/error colours,
      typography, border radius, chains, and layout — copy the embed code when you're done.
    </div>
  </div>
</a>

<Tip>
  The playground needs the full browser width to be comfortable to use (three columns: controls, live preview, code export). Opening it in its own tab gives the best experience.
</Tip>

## What you can customize

<CardGroup cols={2}>
  <Card title="Modes" icon="toggle-on">
    Enable / disable Swap, Gas Refuel, and Buy Crypto modes individually. Set the default active mode.
  </Card>

  <Card title="Brand colors" icon="palette">
    **Accent / CTA** (primary brand colour), **Secondary / Success** (confirm button, save settings, positive states), **Error** (error states, high price impact), **Button** (overrides the CTA gradient).
  </Card>

  <Card title="Surface colors" icon="layer-group">
    Card background, card inner background, **Input Area Box** (also controls the token picker pills), text primary, text secondary, border.
  </Card>

  <Card title="Typography" icon="font">
    Choose from 25 Google Fonts including Inter, Sora, Poppins, Space Grotesk, DM Sans, Manrope, and more.
  </Card>

  <Card title="Shape" icon="square">
    Adjust card corner radius (0–32 px) and button corner radius (0–24 px) independently.
  </Card>

  <Card title="Layout" icon="ruler">
    Set widget width (320–600 px) and height (580–1000 px). Min 580 px height is required for the on-ramp form.
  </Card>

  <Card title="Chain & token presets" icon="link">
    Search all 90+ chains and 20 000+ tokens. Pre-select default source and destination. Optionally lock chain selectors so users can't change them.
  </Card>

  <Card title="Partner attribution" icon="handshake">
    Set `apiKey` (optional) to attribute swaps to your account for fee tracking and analytics. Optionally hide the "Powered by Hypermid" footer (subject to partnership agreement).
  </Card>
</CardGroup>

## Chain & token preset builder

If you only need to lock down a chain/token combination — not a full theme — the standalone preset builder is faster:

<Card title="Open the preset builder →" href="https://app.hypermid.io/widget/preset-builder" icon="square-up-right" horizontal>
  Browse all supported chains (EVM + Solana + Bitcoin + NEAR Intents). Pick a source and destination pair. Copy a ready-made iframe URL or script-tag config.
</Card>

## Embed code formats

The playground generates two embed code formats. Both use the same theming params — pick the one that fits your site.

### Direct iframe

A single `<iframe>` tag — simplest integration, works anywhere:

```html theme={"system"}
<iframe
  src="https://app.hypermid.io/widget?embed=1&theme=dark&fromChain=1&toChain=42161"
  width="470"
  height="700"
  frameborder="0"
  allow="clipboard-write; payment; web-share"
  style="border: none; border-radius: 16px;"
></iframe>
```

### Script tag

Uses the embed.js script for programmatic control, event callbacks, and dynamic config updates:

```html theme={"system"}
<div id="hypermid-widget"></div>

<script src="https://hypermid.io/widget/v1/embed.js"></script>
<script>
  HypermidWidget.init({
    containerId: "hypermid-widget",
    theme: "dark",
    defaultFromChain: 1,
    defaultToChain: 42161,
    width: "420px",
    height: "700px",
  });
</script>
```

<Tip>
  Use the **script tag** format if you need [event callbacks](/widget/events) or programmatic control of the widget after mount.
</Tip>

## Token address notes

* **Native tokens** (ETH, BNB, MATIC, etc.) use `0x0000000000000000000000000000000000000000`
* **ERC-20 tokens** use the token's contract address on that chain
* **Solana tokens** use the SPL token mint address
* Token addresses are **chain-specific** — USDC on Ethereum has a different address than USDC on Arbitrum