嵌入式 Widget

將郵遞區號查詢功能嵌入到您的網站中，只需一行程式碼。

快速開始

在您的 HTML 頁面中加入以下程式碼：

<div id="ziptw-widget"></div>
<script src="https://ziptw.com/widget.js"></script>

就這麼簡單！一個完整的郵遞區號查詢工具就會出現在您的頁面上。

自訂設定

透過 data-* 屬性自訂 Widget 的外觀和行為：

<div id="ziptw-widget"></div>
<script
  src="https://ziptw.com/widget.js"
  data-width="400"
  data-height="600"
  data-mode="search"
  data-target="ziptw-widget"
></script>

可用參數

參數	預設值	說明
data-width	100%	Widget 寬度（px 或 %）
data-height	500	Widget 高度（px）
data-mode	search	模式：search（地址→區號）或 reverse（區號→地址）
data-target	ziptw-widget	目標容器的 HTML id
data-theme	light	主題（目前支援 light）

範例

基本嵌入

<div id="ziptw-widget"></div>
<script src="https://ziptw.com/widget.js"></script>

反向查詢模式

<div id="ziptw-reverse"></div>
<script
  src="https://ziptw.com/widget.js"
  data-mode="reverse"
  data-target="ziptw-reverse"
></script>

固定寬度

<div id="ziptw-widget"></div>
<script
  src="https://ziptw.com/widget.js"
  data-width="450"
  data-height="550"
></script>

多個 Widget

如果需要在同一頁面中放置多個 Widget，請使用不同的 data-target：

<div id="widget-search"></div>
<div id="widget-reverse"></div>

<script src="https://ziptw.com/widget.js" data-target="widget-search" data-mode="search"></script>
<script src="https://ziptw.com/widget.js" data-target="widget-reverse" data-mode="reverse"></script>

注意事項

• Widget 使用 iframe 嵌入，不會影響您的頁面樣式
• 支援 RWD 響應式設計
• 需要網路連線才能使用
• 嵌入 Widget 等同為 ziptw.com 提供外部連結