如何将 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 调用，从而评估参与度并持续优化你的应用。