Skip to content
LayerHop
LayerHop Telegram bot (opens in a new tab)Launch app

Make the swap widget yours.

Pick a preset or your own colors, choose which tokens people can swap, then copy the code. The preview on the right is the real widget, so quotes and wallets work exactly as they will on your site.

Full parameter reference (opens in a new tab)

PresetLayerHop

A preset sets every color for dark and light. Colors you pick below override it.

Colorsdefault theme
Theme
#
#
#
#
#
#
#
#
#
#
#

AaButton contrast 15.1:1, passes WCAG AA. Focus rings adapt to stay visible.

TypographyDefault
1

Scales the whole card, 87.5% to 112.5%.

Layout480px wide
480px
28px
20px
Density
Shadow
Card outline
ContentSwap
0/32

An https image, shown next to the title at 24 × 24 px.

0/24

Shown once the swap is ready to review.

Hide the headerRemoves the title, wallet button, history and settings. People connect from the main button.
Show USD values
Tokens and chainsUSDC to USDC
Pay
Lock what people pay with
Receive
Lock what people receive

In whole tokens, for example 100 or 0.5.

Lock the amount

For deposits: funds land at this address on the receive chain.

Lock the recipientAdd a recipient first.

Allow-lists

Limit what each side offers. Empty means everything.

Pay from chains
All chains
Pay with tokens
All tokens
Receive on chains
All chains
Receive tokens
All tokens
Never offer these chains
None excluded
BehaviourEverything shown
Show only the best route
Hide slippage settings
Hide swap history
50 bps

Empty uses Auto, which picks a tolerance per pair.

Language

English for now; more languages will use this same setting.

Lets that page change the amount, tokens and colors with postMessage.

PartnerNot set
0/32

Registered partners earn their own fee on every swap.

Hide “Routed by LayerHop”Available to registered partners. Add your partner id first.

Events from the preview

Waiting for the widget…

<iframe
  id="layerhop-widget"
  src="https://layerhop.com/embed?srcChain=base&amp;srcToken=USDC&amp;dstChain=arbitrum&amp;dstToken=USDC&amp;amount=100"
  title="LayerHop swap"
  allow="clipboard-write"
  style="display:block;width:100%;max-width:480px;height:640px;border:0;background:transparent;color-scheme:normal"
></iframe>
<script>
  // Fit the iframe to its content. Only trust messages from LayerHop.
  window.addEventListener("message", (event) => {
    if (event.origin !== "https://layerhop.com" || event.data?.source !== "layerhop") return;
    if (event.data.type === "resize") {
      document.getElementById("layerhop-widget").style.height = event.data.payload.height + "px";
    }
  });
</script>

The widget runs on LayerHop, so wallets connect there and your page never handles keys.