方式一：Popup Modal方式二：嵌入 iframe

方式二：嵌入 iframe

將功能頁面直接嵌入平台頁面，無需彈窗。兌換視窗（Swap）是最常見的嵌入方案， 像 Uniswap 的 Swap Widget 一樣，放在平台首頁讓用戶直接操作。

即時示範

嵌入示範 — 兌換

接入說明

適合場景

  • 平台有固定版面，希望功能直接嵌入頁面
  • 不想用彈窗遮蓋平台內容
  • 需要側欄或分頁式設計

注意事項

  • iframe 尺寸需足夠顯示內容
  • Token 有效期 1 小時，到期需刷新
  • 監聽 postMessage 得知操作完成

範例代碼

html
<!-- 1. 後端取 Token（同方式一）-->
<!--    POST /api/widget/token  -->

<!-- 2. 直接嵌入 iframe -->
<iframe
  src="https://stellabit.cc/widget/swap?token=<TOKEN>"
  width="480"
  height="600"
  style="border:none; border-radius:16px;"
  allow="clipboard-write"
></iframe>

監聽完成事件

javascript
window.addEventListener('message', (e) => {
  if (e.data?.type === 'stellabit:done') {
    // 用戶完成操作，刷新餘額
    refreshBalance()
  }

  if (e.data?.type === 'stellabit:openUrl') {
    // 幣商提供支付連結，由外層開啟（iframe-safe）
    window.open(e.data.url, '_blank', 'noopener,noreferrer')
  }
})

各功能建議尺寸

功能寬高
swap480px600px
deposit440px560px
withdraw440px580px
balance-hub440px580px