如何將 Poe Canvas 應用嵌入網站

用簡單的 iframe 將 Poe Canvas 應用嵌入任何網站,支援 WordPress、Wix、Squarespace、Notion。訪客無需 Poe 帳號即可使用。

使用標準的 iframe 程式碼片段,把已發佈的 Poe Canvas 應用嵌入任何網站。

概覽

當你用 AppToPub 把 Poe Canvas 應用轉換成獨立網頁應用後,就能用標準 iframe 直接嵌入自己的網站。訪客無需離開你的網站即可使用你的 AI 應用 — 非常適合作品集、客戶展示、登陸頁與產品展示。

開始前,請確認你已有一個擁有有效公開網址的已部署 AppToPub 應用,以及可存取你網站的 HTML 編輯器或 CMS 頁面編輯器。若你尚未轉換 Canvas 應用,請先完成轉換。

逐步操作說明

  1. 發佈應用 — 在 AppToPub 轉換並發佈你的 Poe Canvas 應用,使它取得公開網址。
  2. 複製公開網址 — 在 Projects 儀表板中,複製應用的公開網址(例如 apptopub.com/app/your-slug)。
  3. 建立 iframe 片段 — 把網址包進 iframe 標籤,例如 <iframe src="https://apptopub.com/app/your-slug" width="100%" height="600" frameborder="0"></iframe>。
  4. 貼入你的主機網站 — 在 WordPress、Wix、Squarespace 或 Notion 中,新增一個自訂 HTML／嵌入區塊,貼上 iframe 片段。
  5. 發佈並驗證 — 儲存並發佈主機頁面,然後載入頁面確認嵌入的應用正確顯示。

疑難排解

嵌入顯示空白白框

請確認應用網址正確且部署仍在運作。免費方案的應用會在 72 小時後失效;升級至付費方案可取得永久託管。

應用可載入,但在行動裝置上顯示異常

請使用以百分比 padding-bottom 設定的響應式嵌入,並確認你的 Canvas 應用 CSS 沒有使用無法適應窄視窗的固定像素寬度。

我的 CMS 過濾了 iframe 程式碼

部分平台會清理 HTML。請使用可繞過清理的「HTML 嵌入」或「程式碼區塊」元件;在 WordPress 上,自訂 HTML 區塊可正常運作。

常見問題

我可以嵌入到 WordPress、Wix、Squarespace 或 Notion 嗎?

可以。在這些平台中新增一個自訂 HTML／嵌入區塊,並貼上 iframe 片段即可。

嵌入會影響我的 API 用量嗎?

嵌入的應用會與託管的應用發出相同的 AI 呼叫,並計入 API 金鑰的配額。請設定分析以監控瀏覽次數與 API 呼叫。

相關指南