AstroAPI

Appearance

将小组件添加到您的网站 ​

本指南向您展示如何将 AstroAPI 小组件或聊天机器人添加到您的网站——无需任何编程知识。您只需从仪表板复制一段代码，然后粘贴到您的建站工具中即可。

内容涵盖 WordPress、Wix、Squarespace、Shopify 和 Webflow 的分步说明，以及适用于任何网站的通用方法。

在寻找技术性的小组件 API？

本指南介绍的是如何将现成的嵌入代码粘贴到您的网站中。如需通过 API 创建和配置小组件，请参阅可嵌入小组件。如需了解聊天机器人 API，请参阅 AI 聊天机器人。

第 1 步：获取嵌入代码 ​

  1. 登录 AstroAPI 仪表板。
  2. 进入 Widgets（AI 聊天机器人则进入 Chatbots），打开您要嵌入的小组件。
  3. 使用 Preview 标签页检查它的外观是否符合预期。颜色、字体和布局都在仪表板中配置——而不是在代码里——因此以后您可以在不修改网站的情况下重新调整小组件的样式。
  4. 打开 Embed 标签页并复制嵌入代码。它看起来类似这样：
html
<script
  src="https://api.astroapi.cloud/widgets/sdk.js"
  data-widget-id="wgt_abc123"
  data-api-key="your-api-key"
  data-api-url="https://api.astroapi.cloud"
></script>
<div id="astro-widget-wgt_abc123"></div>

聊天机器人的嵌入代码是不带 <div> 的单个 script 标签：

html
<script
  src="https://api.astroapi.cloud/widget.js"
  data-chatbot-id="your-chatbot-id"
  data-api-key="your-api-key"
></script>

这就是您需要的全部代码。以下各节按平台说明将代码粘贴到哪里。

保护好您的 API 密钥

嵌入代码中包含一个 API 密钥。请使用仅具有小组件或聊天机器人权限的密钥——切勿使用您的主 API 密钥。您可以在仪表板的 API Keys 下创建受限密钥，并在 Chatbots → Security 下将聊天机器人限制为仅在您自己的域名上使用。

WordPress ​

方案 A：Custom HTML 区块（推荐） ​

  1. 编辑要显示小组件的页面或文章。
  2. 点击 + 按钮添加区块，然后搜索 Custom HTML。
  3. 将嵌入代码粘贴到该区块中。
  4. 点击 Preview 检查效果，然后点击 Update 或 Publish。

方案 B：全站显示（适用于聊天机器人） ​

要在每个页面上显示聊天机器人：

  1. 安装一个轻量的 header/footer 插件（例如 WPCode），或使用主题自带的"custom scripts"选项——无需编辑主题文件。
  2. 将聊天机器人嵌入代码粘贴到 Footer 部分（</body> 之前）。
  3. 保存。聊天机器人气泡现在会出现在每个页面上。

Elementor

在使用 Elementor？向页面添加一个 HTML 小组件，并将嵌入代码粘贴到其中。

Wix ​

  1. 在 Wix 编辑器中，点击左侧边栏中的 Add Elements（+ 按钮）。
  2. 选择 Embed Code → Embed HTML。
  3. 点击 Enter Code 并粘贴嵌入代码。
  4. 点击 Apply，然后拖动/调整外框大小以适配小组件。
  5. 点击 Publish。

Wix 上的聊天机器人

Wix 会在一个框架（frame）内渲染嵌入的 HTML，这会将聊天机器人气泡限制在该框架内。若需全站显示聊天机器人，请改用 Settings → Custom Code（需要付费的 Wix 套餐）：粘贴聊天机器人嵌入代码，将其设置为在 All pages 上加载，并放置在 Body - end 位置。

Squarespace ​

  1. 编辑要显示小组件的页面。
  2. 点击一个插入点，选择 Code 区块。
  3. 粘贴嵌入代码（保持默认的 HTML 模式）。
  4. 保存页面。

若需全站显示聊天机器人，请前往 Settings → Advanced → Code Injection，并将聊天机器人嵌入代码粘贴到 Footer 字段中。

WARNING

代码区块和代码注入功能需要 Squarespace Business 或更高级别的套餐。

Shopify ​

  1. 在 Shopify 后台，前往 Online Store → Themes。
  2. 在当前主题上点击 Customize。
  3. 在要显示小组件的页面上添加一个 Custom Liquid 部分（或 HTML 区块，取决于您的主题）。
  4. 粘贴嵌入代码并点击 Save。

若需全站显示聊天机器人：

  1. 前往 Online Store → Themes → ⋯ → Edit code。
  2. 打开 layout/theme.liquid。
  3. 将聊天机器人嵌入代码粘贴到闭合的 </body> 标签之前。
  4. 点击 Save。

Webflow ​

  1. 在 Webflow 设计器中，将 Embed 元素（位于 Add Elements → Components）拖到您的页面上。
  2. 将嵌入代码粘贴到代码编辑器中，然后点击 Save & Close。
  3. 发布您的网站。自定义代码只在已发布的网站上运行，在设计器预览中不会运行。

若需全站显示聊天机器人，请前往 Site Settings → Custom Code，并将聊天机器人嵌入代码粘贴到 Footer Code 字段中。

WARNING

在 Webflow 中使用自定义代码需要付费的网站套餐。

任何其他网站 ​

如果您（或您的网站开发人员）直接管理 HTML：

  1. 打开页面的 HTML 文件或模板。
  2. 将小组件嵌入代码粘贴到页面中小组件应显示的位置。
  3. 对于聊天机器人，将其嵌入代码粘贴到闭合的 </body> 标签之前——它会渲染为一个悬浮气泡，因此它在 HTML 中的位置无关紧要。

故障排除 ​

小组件区域一直是空白的。 检查嵌入代码的两个部分是否都已粘贴：<script> 标签以及其下方的 <div>。有些页面构建器会删除其中之一。

显示 "Invalid API key" 或什么都没有加载。 嵌入代码中的 API 密钥可能已被吊销或缺少相应权限。请从仪表板的 Embed 标签页重新复制一份新的嵌入代码。

聊天机器人没有出现在我发布的网站上。 如果您将聊天机器人限制为特定域名（Chatbots → Security → Allowed domains），请确保您网站的域名在列表中——如果您的网站使用 www. 变体，也要包含在内。

小组件的外观与预览不一致。 样式来自仪表板中的配置，并随小组件一起加载。如果您最近更改了设计，请强制刷新页面（Ctrl+Shift+R / Cmd+Shift+R）以绕过浏览器缓存。

在桌面端正常，但在我的应用的 webview 中不工作。 嵌入代码需要运行来自 astroapi.cloud 的 JavaScript。请确保您的应用或网站的安全策略（CSP）允许来自该域名的脚本。

后续步骤 ​

AstroAPI Documentation

Copyright © 2026 AstroAPI