如何將 Poe Canvas 應用嵌入網站

Name: AppToPub
Author: Keith Li

當你把 Poe Canvas 應用轉換成獨立網頁應用後，就可以直接把它嵌入自己的網站。訪客無需離開你的網站就能與 AI 應用互動 — 非常適合作品集、客戶示範、登陸頁面和產品展示。

前置條件

開始前，請確認你已具備：

一個已部署且有有效公開網址的 AppToPub 應用（例如） https://apptopub.com/app/your-app-id)
能存取你網站的 HTML 編輯器或 CMS 頁面建構器

如果你還沒有轉換 Canvas 應用，請先參閱轉換指南。

基本嵌入程式碼

嵌入應用最簡單的方式是使用 HTML <iframe> 元素。複製以下程式碼，並將 src 網址替換為你的應用網址：

<iframe
  src="https://apptopub.com/app/your-app-id"
  width="100%"
  height="600"
  style="border: none; border-radius: 8px;"
  loading="lazy"
  title="My Poe Canvas App"
></iframe>

各屬性說明：

width="100%" — 讓應用填滿容器寬度，自動適應不同螢幕尺寸
height="600" — 設定固定高度（像素）。請依應用內容調整。聊天類應用通常需要 500–700px；工具類應用可能需要更多。
style="border: none;" — 移除預設的 iframe 邊框，使外觀更簡潔
loading="lazy" — 延遲載入直到 iframe 接近可視區域，提升頁面效能
title — 為螢幕閱讀器提供無障礙標籤。請務必加入此屬性以符合無障礙標準。

響應式嵌入

若你的應用需要在行動裝置上等比例縮放，請將 iframe 包裹在響應式容器中：

<div style="position: relative; width: 100%; padding-bottom: 75%; overflow: hidden;">
  <iframe
    src="https://apptopub.com/app/your-app-id"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;"
    loading="lazy"
    title="My Poe Canvas App"
  ></iframe>
</div>

padding-bottom: 75% 可建立 4:3 的寬高比。改為 56.25% 則為 16:9，改為 100% 則為正方形。

各平台操作說明

WordPress

開啟要嵌入的頁面或文章
新增一個Custom HTML 區塊（點擊 + 並搜尋「HTML」）
貼上上方的 iframe 程式碼
點擊 Preview 確認載入正常
發布或更新頁面

若你的 WordPress 主題會過濾 iframe，請安裝如「iframe」的外掛，或改用 Elementor/Divi 的 HTML 元件。

Wix

開啟你頁面的 Wix 編輯器
點擊 Add → Embed Code → Embed HTML
將 iframe 程式碼貼入 HTML 欄位
調整嵌入元素的大小以符合頁面版面
儲存並發布

Squarespace

編輯頁面並新增一個區塊
在區塊選項中選擇 Code
貼上 iframe 程式碼
關閉 Display Source 以查看渲染後的預覽
儲存頁面

Notion

Notion 原生支援嵌入。在任意頁面輸入 /embed，貼上你的 AppToPub 應用網址，Notion 即會在頁面內顯示。你可以拖曳角落的調整把手來改變嵌入大小。

不建議使用 iframe 的情境

iframe 適用於大多數嵌入場景，但有一些限制需要注意：

SEO 敏感頁面 — 搜尋引擎通常不會將 iframe 內容視為父頁面的一部分進行索引。若你需要 AI 應用的內容貢獻於頁面 SEO，建議改用連結而非嵌入。
效能關鍵頁面 — 每個 iframe 都會載入一個獨立頁面，增加總體頁面重量。在載入速度至關重要的頁面（例如有轉換目標的登陸頁面）上，請在上線前測試其影響。
以行動裝置為主的體驗 — 固定高度的 iframe 在小螢幕上可能造成尷尬的捲動體驗。若你的受眾主要使用行動裝置，建議提供直接連結，或使用上方的響應式嵌入方式。

樣式建議

配合你網站的主題 — 若你的 Canvas 應用有淺色/深色模式，請確保它與你網站的配色方案一致
加入說明文字 — 在嵌入上方放置標題和簡短說明，讓訪客在互動前了解應用的功能
設定適當的高度 — 在行動裝置上測試嵌入效果，確保高度適合較小的螢幕。高度過小會強迫使用者在 iframe 內過度捲動。
使用自訂網址 — 若你擁有 Basic 或 Premium 方案，可以設定自訂網址 slug，讓嵌入來源網址更簡潔

疑難排解

嵌入顯示空白白框: 請確認應用網址正確，且部署仍在運行。免費方案的應用會在 72 小時後過期。升級至付費方案以獲得永久託管。
應用可載入，但在行動裝置上顯示異常: 請使用上方的響應式嵌入程式碼，採用百分比的 padding-bottom。同時檢查你的 Canvas 應用 CSS 是否具有響應式設計 — 若使用固定像素寬度，可能無法適應較窄的視口。
我的 CMS 過濾了 iframe 程式碼: 部分 CMS 平台會基於安全考量過濾 HTML。請尋找可繞過過濾的「HTML 嵌入」或「程式碼區塊」元件。在 WordPress 上，Custom HTML 區塊應可正常使用。

你的應用已嵌入，訪客正在使用它 — 現在來看看用量如何。設定使用分析以監控瀏覽次數和 AI API 呼叫，從而評估參與度並持續優化你的應用。