在 Wix、Webflow、Squarespace 或 Shopify 上嵌入实时交易业绩

实时交易小组件就是一段 HTML 代码。哪个建站工具都能放，只是每个工具都把对应的元素藏在不同的名字下面，而且各有各的小毛病。

本页是一张带操作说明的速查表：找到您用的建站工具，照着四步做，再看一眼那条提醒。WordPress 另有单独的指南。

📋 您要粘贴的代码

代码在 ShowMyTrades 获取：连接您的账户（MetaTrader、cTrader 或 TradeLocker）并发布，然后在控制台打开小组件，复制代码。全部免费。

<iframe
  id="smt-equity-a1b2c3d4e"
  src="https://showmytrades.com/widget/YOUR-ACCOUNT-SLUG?type=equity&theme=light"
  width="100%"
  height="400"
  loading="lazy"
  frameborder="0"
  style="border-radius: 8px; width: 100%;">
</iframe>
<script>
(function() {
  var iframe = document.getElementById('smt-equity-a1b2c3d4e');
  window.addEventListener('message', function(e) {
    if (e.data?.type === 'widget-resize' && e.source === iframe.contentWindow) {
      iframe.height = e.data.height;
    }
  });
})();
</script>

代码分两部分。<iframe> 就是小组件本身；<script> 让小组件把自己的高度告诉您的页面，框架就能随内容自动伸缩。有的建站工具会运行这段脚本，有的不会，这正是每个工具要留意的小毛病。

有些建站工具要求填网址而不是代码。这时只用 src="…" 里的地址就行，这个地址就是小组件。

🟦 Wix

1. 在编辑器中点击 Add Elements（添加元素，即 + 号）。
2. 选择 Embed Code（嵌入代码），再选 Embed HTML（嵌入 HTML）。
3. 点击 Enter Code（输入代码），粘贴整段代码，然后点击 Update（更新）。
4. 把元素拖到合适的宽度和高度，然后发布。

小毛病。Wix 会把您的代码装进它自己的框架里，大小就是您拖出来的尺寸。小组件改不了这个外层框架的大小，所以脚本在这里不起作用：请手动设置高度，比小组件实际需要的略高一点，并在移动端视图里也检查一遍。固定高度的小组件（统计卡片、单行统计）在 Wix 上最好处理。

🟪 Webflow

1. 打开 Add（添加）面板，找到 Code Embed（代码嵌入）。
2. 把它拖到图表要出现的位置。
3. 粘贴整段代码，然后点击 Save & Close（保存并关闭）。
4. 发布网站。

小毛病。在 Designer（设计器）里脚本不会运行，所以画布上的小组件可能显示不全，或者只是一个占位符。效果以已发布的网站为准，那里会正常调整大小。Code Embed 需要 Webflow 付费方案。

⬛ Squarespace

1. 编辑页面，点击 Add Block（添加区块）。
2. 选择 Code（代码）。
3. 确认类型为 HTML、Display Source（显示源代码）处于关闭状态，然后粘贴整段代码。
4. 保存。

小毛病。在登录编辑状态下，Squarespace 出于安全考虑可能把这个区块显示为已停用。用无痕窗口打开线上页面，才能看到真实效果。含有脚本或 iframe 的代码区块，只有包含自定义代码功能的方案才能用，入门方案不行。

🟩 Shopify

1. 进入 Online Store → Themes（在线商店 → 模板），点击 Customize（自定义）。
2. 打开图表要出现的那个页面模板。
3. 点击 Add section（添加分区），或在某个分区内点击 Add block（添加块），然后选择 Custom Liquid（自定义 Liquid）。
4. 粘贴整段代码并保存。

小毛病。只有当前这一代模板（Online Store 2.0）才有 Custom Liquid，Shopify 现在提供的免费模板都属于这一代。如果用的是旧模板，就到 Pages（页面）里编辑页面，点 <> 按钮把编辑器切换到 HTML，再粘贴进去。

如果是卖 EA（智能交易系统）或信号的产品页面，决定图表放哪儿之前，先读一读销售页面上的实时 EA 业绩。

🧩 其他建站工具

📐 能帮您省事的几项设置

复制代码之前，先在 ShowMyTrades 的生成器里设好这几项。

🖼️ 建站工具不接受代码时：用图片

有些地方完全不能放代码：锁了自定义代码的免费方案、交易市场的商品页、邮件通讯工具。每个账户还提供十一种自动更新的图片，而图片哪里都能放。

在生成器里选自动更新图片，选好类型和主题（浅色、深色或透明），复制图片地址。用建站工具里普通的图片元素把它加进去，再给图片加上指向您账户页面的链接。

交易数据一有变化，图片就会自动重绘。它不能交互，所以只在放不了实时小组件的地方用。

❓ 常见问题

小组件里面出现了滚动条，为什么？ 框架比内容矮，脚本又没能把它调高。在 Wix、Google Sites 和 Framer 上，请手动把高度设大一些。用其他工具的话，检查一下是不是漏贴了 <script> 部分。

小组件在电脑上正常，在手机上却被截断。 复制时宽度用的是像素。回到生成器，把宽度改成百分比、设为 100，再重新复制代码。

一个页面能放多个小组件吗？ 可以。每个都从生成器单独复制：每段代码有自己的 id，互不干扰。

有了新交易，我要更新代码吗？ 不用。每次页面加载，小组件都会向 ShowMyTrades 获取数据。

我的建站工具用的是免费方案，也能用吗？ 小组件本身免费。能不能粘贴代码要看建站工具：Webflow、Squarespace 和 Carrd 只在付费方案里开放自定义代码。用这些工具的话，自动更新图片就是免费的办法。

ShowMyTrades 有针对这些建站工具的应用或插件吗？ 没有，也用不着：这段代码本身就是集成方式。

🔗 相关指南

• 把经验证的交易业绩嵌入任何地方：所有小组件、格式和选项
• 如何在 WordPress 上添加交易业绩：Gutenberg、Elementor、Divi 和经典编辑器
• 如何打造业绩记录页面：小组件周围该放些什么
• 论坛签名、邮件或聊天中的交易业绩：图片格式详解

免费连接您的账户，复制小组件，粘贴到您的建站工具里。想在注册前先看看代码？打开小组件生成器，任选一个公开账户。