跳到主内容

小工具 · 站长

卡片嵌入代码生成器

自己有博客或网站？选一张卡、挑个样式，复制几行代码贴进去，就能嵌入一张实时更新的产品卡片 ── 开卡奖励、倍率、年费随我们的数据库自动同步，你不用再手动改数字。

卡片样式
配色主题
显示内容

嵌入代码 · 粘贴到任意网页

<div class="uscard-card" data-slug="chase-freedom-flex" data-variant="spotlight" data-theme="light">
  <a href="https://uscard.io/cards/products/chase-freedom-flex">大通 Freedom Flex 返现卡 Chase Freedom Flex 评测 — USCard.io</a>
</div>
<script async src="https://uscard.io/embed/v1.js"></script>

实时预览（第三方页面上看到的效果）

怎么用（以 WordPress 为例）

  1. 在上面选好产品、样式和主题，点「复制代码」；
  2. WordPress 编辑器里添加一个「自定义 HTML」区块（其他建站工具找 「嵌入 HTML / Embed Code」功能），把代码粘贴进去；
  3. 发布即可。卡片动态加载，数据每次都取 USCard.io 当前最新版本。

使用条款

嵌入卡片免费开放给任何网站使用。唯一要求 ： 请保留卡片下方「数据来自 USCard.io」的署名链接，不要隐藏或删除。 卡片样式与宿主页面完全隔离，不会影响你网站的原有样式； 同一页面可以嵌入多张卡片，脚本只需引入一次。

技术说明

代码里的占位链接是无 JavaScript 环境下的兜底显示；脚本加载后会替换成完整卡片， 渲染在 Shadow DOM 里。数据接口为公开只读 JSON（/api/embed/v1/{slug}），带 CDN 缓存。接口与脚本按 v1 版本化，字段只增不删，嵌入代码长期有效。