BUILT FOR
THE HOOD

SWAP ON
ANY SITE.

Add a SWAP button that opens the public Hoodieswap trading interface as a modal. The host site never receives wallet keys or signing authority. Users review and sign transactions in their own wallet.

<button id="open-hoodieswap" type="button">SWAP</button>

<dialog id="hoodieswap-modal" aria-label="Hoodieswap trading widget">
  <button id="close-hoodieswap" type="button" aria-label="Close Hoodieswap">×</button>
  <iframe
    src="https://hoodieswap.xyz/embed/swap"
    title="Hoodieswap"
    allow="clipboard-write"
  ></iframe>
</dialog>

<style>
  #open-hoodieswap {
    padding: 16px 28px;
    border: 0;
    background: #ccff00;
    color: #050505;
    font: inherit;
    cursor: pointer;
  }
  #hoodieswap-modal {
    width: min(96vw, 720px);
    height: min(96dvh, 1100px);
    padding: 0;
    overflow: hidden;
    border: 0;
    background: #050505;
  }
  #hoodieswap-modal::backdrop { background: rgb(0 0 0 / 78%); }
  #hoodieswap-modal iframe { width: 100%; height: 100%; display: block; border: 0; }
  #close-hoodieswap {
    position: absolute;
    z-index: 2;
    top: 10px;
    right: 10px;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid #ccff00;
    background: #050505;
    color: #ccff00;
    font: inherit;
    cursor: pointer;
  }
</style>

<script>
  const modal = document.querySelector("#hoodieswap-modal");
  document.querySelector("#open-hoodieswap").addEventListener("click", () => modal.showModal());
  document.querySelector("#close-hoodieswap").addEventListener("click", () => modal.close());
  modal.addEventListener("click", (event) => { if (event.target === modal) modal.close(); });
</script>

Some mobile or injected wallets may restrict connections inside third-party iframes. The widget includes an OPEN IN HOODIESWAP fallback that preserves the selected trade parameters.