Skip to main content
Use the interactive playground below to customize the widget’s appearance — colors, fonts, border radius, modes, chains, and layout. Once you’re happy with the result, copy the embed code.
The playground above is a live instance of the Hypermid widget configurator. All changes are reflected in real-time in the preview, and the generated embed code updates automatically.

​
What You Can Customize

Modes

Enable/disable Swap, Gas Refuel, and Buy Crypto modes individually. Set the default active mode.

Colors

Accent/CTA color, button color, card backgrounds (card, card inner, input area), text colors, and border color.

Typography

Choose from 25 Google Fonts including Inter, Poppins, Space Grotesk, DM Sans, Manrope, and more.

Shape

Adjust card corner radius (0–32px) and button corner radius (0–24px) independently.

Layout

Set widget width (320–600px) and height (580–1000px). The widget requires minimum 580px height for the on-ramp form.

Chain & Token Presets

Search all 90+ chains and 20,000+ tokens. Pre-select default source and destination. Optionally lock chain selectors.

​
Chain & Token Preset Builder

Browse all supported chains and tokens, select your desired from/to preset, then copy the generated embed code.

​
Embed Code Formats

The playground generates two embed code formats:

​
Direct Iframe

A single <iframe> tag — simplest integration, works anywhere: 
<iframe
  src="https://www.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 updates: 
<div id="hypermid-widget"></div>

<script src="https://widget.hypermid.io/v1/embed.js"></script>
<script>
  HypermidWidget.init({
    containerId: "hypermid-widget",
    theme: "dark",
    defaultFromChain: 1,
    defaultToChain: 42161,
    width: "420px",
    height: "700px",
  });
</script>
Use the Script Tag format if you need event callbacks or programmatic control.

​
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