腾讯云 ADP 的 Widget 是对话中的交互卡片，不是完整网页。若你要在自己的产品中展示它，可以使用 ADP-Widget SDK：前端读取结构化 JSON，渲染卡片，并把按钮等操作通过事件交给业务代码。
先准备部署文件
从官方渠道取得 SDK 后，把 SDK 包中的脚本放到站点静态目录或同一 CDN 路径。主包与 vendor 包是必需文件；Markdown、Chart 包按组件需要加载。确认脚本 URL 使用你实际可访问的 HTTPS 域名，例如 https://static.example.com/adp-widget/adp-widget.js。
在页面渲染最小卡片
<script type="module" src="/widget/adp-widget.js"></script>
<adp-widget id="demo"></adp-widget>
<script type="module">
const el = document.querySelector('#demo');
el.setAttribute('widget-json', JSON.stringify({
type: 'Card',
children: [
{ type: 'Title', value: '订单确认' },
{ type: 'Text', value: '商品：演示套餐' },
{ type: 'Button', label: '确认', onClickAction: { type: 'confirm' } }
]
}));
el.addEventListener('widget-action', e => console.log(e.detail));
</script>域名与访问验证
打开浏览器开发者工具，确认脚本返回 200、卡片出现、widget-rendered 被触发。点击按钮后应看到 widget-action 事件。若静态文件部署在另一域名，还要检查浏览器控制台是否出现跨域或模块 MIME 类型错误。
若页面空白，先查脚本地址、浏览器版本和 JSON 是否能解析；如果卡片可见但按钮无响应，检查事件监听名称和 Action 数据。官方列出的最低浏览器版本包括 Chrome 67、Firefox 63、Safari 12.1 和 Edge 79，不支持 IE。
安全与边界
不要把 AppKey、临时密钥或用户敏感数据硬编码进 Widget JSON。本文没有替你取得 SDK 文件或部署域名，示例域名和路径必须换成自己的资源地址。
Widget 的定位与交互机制见什么是 Widget，SDK 文件、浏览器要求与事件用法见ADP-Widget SDK 官方文档。
Ai菜鸟网。发布者：AI小管家，转载请注明出处：https://www.alyyhw.com/32215.html
