导航
入门
欢迎 完整教程 快速开始 / 概览
指南
安装 配置 查找选择器 代码示例 故障排除
高级 & 安全
嵌入 & 代码片段参数 主题 & 自定义 安全 & 隐私

完整教程

端到端演练：从注册到在您的网站上运行的助手

阅读时间14分钟

本教程将指导您完成将 AI Anywhere 集成到您的网站的整个过程。到最后，您将拥有一个功能齐全的助手，为您的用户提供智能文本帮助。

您将构建： 一个带有 AI 助手的联系表单，通过将用户的输入与您的理想示例进行比较，帮助用户撰写更好的消息。

使用助手的两种方式

每个助手有两种使用方式：

  • 助手页面（无需代码）： You get a shareable Helper Page link instantly. Open it from the dashboard by going to your Helper and clicking the "Helper Page" button (on the Helper's edit or detail page). Share the link with anyone; no snippet or integration required.
  • 嵌入到您的网站： 在您的网站上添加一个小脚本和锚点，以便助手按钮出现在您的文本区域旁边。用户无需离开您的页面即可获得帮助。

本教程重点介绍嵌入选项。要使用助手页面，请在仪表板中创建一个助手并点击“助手页面”以打开或分享链接。

1

创建您的账户

首先，您需要注册一个 AI Anywhere 账户。

  1. 转到 AI Anywhere主页
  2. 点击 "开始" 标题中的按钮
  3. 使用您喜欢的社交账户（Google、GitHub等）注册
  4. You'll be automatically logged into your dashboard
2

创建您的第一个助手

现在让我们创建一个助手，帮助用户撰写联系表单消息。

  1. 前往仪表板 "新助手"
  2. 给您的助手起一个描述性的名称，例如 "联系表单示例"
  3. 选择此助手所属的组
  4. 点击 "保存助手"
嵌入或两者： 如果您计划嵌入此助手（或同时使用两者），您必须选择一个非默认站点，或先创建一个（站点 → 添加站点）。默认的助手页面站点不能用于嵌入。

配置您的助手

在创建或编辑助手时，您可以配置：

  • 助手答案： Enter a well-written example of what you want users to write. For a contact form, this might be a complete, professional message that includes all necessary information. The example should be complete with mock names, specific details, and realistic content (e.g., "Hello, I'm John Smith writing to inquire about your web development services. I'm particularly interested in building an e-commerce platform for my business. Could you please provide more information about your pricing and timeline? Thank you for your time.").
  • 关键词和/或规则： 添加对您的使用场景重要的关键词或规则（例如，“联系”、“询问”、“问题”、“支持”）。
  • 按钮主题设置 自定义助手按钮的外观（颜色、文本）以匹配您网站的设计。
3

获取您的集成代码

了解如何查找文本区域、表单和输入字段的 CSS 选择器，以将 AI Anywhere 助手集成到您的网站中。

  1. 在您的助手设置中，点击 "生成代码片段" 按钮
  2. 您将看到两个代码片段：
    • 脚本标签： 粘贴到您的网站
    • 锚点 span： 包含您的助手令牌
  3. 复制这两个代码片段——您将在下一步中需要它们

您的代码片段由两部分组成：

<!-- 脚本标签（放在<head>中） -->
<script src="https://ai-anywhere.ai/sdk/v1/loader.js" data-site="your-site-id"></script>

<!-- 示例：助手按钮出现在您的文本区域旁 -->
<span data-helper-anchor data-helper-token="your-helper-token"></span>
请记住： 带有您站点 ID 的脚本标签放在 <head> 部分，并且对所有页面都是相同的。带有您的助手令牌的锚点跨度放在您希望助手出现的每个文本区域旁边。
重要： 请确保这些代码片段的安全。您的站点 ID 在所有页面中共享，但每个助手都有其独特的令牌。
4

将脚本添加到您的HTML

在您的

  1. 打开您网站的 HTML 文件（或模板）并找到
  2. 找到 <head> 部分加载助手脚本
  3. 部分。在关闭 </head> 标签之前粘贴您的代码片段。

它应该是这样的：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>联系我们：</title>
  
  <!-- AI Anywhere 助手脚本 -->
  <script src="https://ai-anywhere.ai/sdk/v1/loader.js" data-site="your-site-id"></script>
</head>
最佳实践： 将脚本标签添加到您的 HTML 的 <head> 部分，在 meta 标签之后但在其他脚本之前。这确保助手能尽早加载。
5

将助手锚点添加到您的表单

现在在您希望助手按钮出现的文本区域旁边添加锚点跨度。

  1. 找到您的联系表单（或您希望助手出现的表单）
  2. 找到用户将输入消息的文本区域
  3. 在文本区域之后（或附近位置）添加锚点跨度

这是一个显示两个部分的完整示例：

<form id="contact-form">
  <div>
    <label for="name">姓名</label>
    <input type="text" id="name" name="name" required>
  </div>
  
  <div>
    <label for="email">电子邮件：</label>
    <input type="email" id="email" name="email" required>
  </div>
  
  <div>
    <label for="message">您的消息：</label>
    <textarea id="message" name="message" rows="6" required></textarea>
    <!-- 助手按钮将自动出现 -->
    <span data-helper-anchor data-helper-token="your-helper-token"></span>
  </div>
  
  <button type="submit">联系信息：</button>
</form>
元素 锚点跨度可以放置在文本区域附近的任何位置。页面加载时，助手按钮将出现在此位置。
6

测试您的助手

现在让我们验证一切是否正常工作。

  1. 保存您的助手
  2. 在网络浏览器中打开您的网站
  3. 导航到包含您的联系表单的页面
  4. 在页面的文本区域旁查找助手按钮

我们存储的内容

  • 示例：助手按钮出现在您的文本区域旁
  • 按钮具有您配置的正确样式（颜色、文本、大小）
  • 当您点击按钮时，助手界面会打开
  • 当您输入文本并点击助手按钮时，它会提供建议

故障排除

如果您的助手按钮未出现，请检查以下内容：

  • Check your browser's developer console (F12) for any JavaScript errors
  • 确保脚本标签位于 <head> 部分加载助手脚本
  • 确保锚点跨度存在并包含正确的助手令牌
  • 强制刷新您的页面（Ctrl+Shift+R 或 Cmd+Shift+R）以清除缓存文件。
  • 检查您的站点 ID 和助手令牌是否正确
成功 如果您看到助手按钮并且点击时它能正常工作，恭喜！您的集成已完成。
7

自定义您的助手（可选）

将标签设置为“帮助”或自定义以匹配您的品牌。

您可以自定义的内容

  • 自定义外观 更改助手按钮的颜色和文本。
  • 助手答案： 粘贴一个高质量的示例文本，展示您希望用户实现的目标。
  • 关键词： 添加或删除关键词以提高建议的准确性
  • 总助手： 为不同的表单或文本区域创建额外的助手

自定义

  1. 前往仪表板
  2. 选择 "助手", 然后选择您想要编辑的特定助手
  3. 点击 "编辑" 按钮
  4. 查看您的更改
  5. 保存更改
注意： 对助手配置的更改会立即生效——无需更新您的 HTML 代码。
8

部署到生产环境

一旦您在本地测试完所有内容，就可以部署到您的生产网站。

部署前检查清单

  • 在本地/暂存环境中测试助手
  • 您应该看到助手按钮出现在任何
  • 使用不同的浏览器测试：
  • 在移动设备上测试
  • 验证助手建议是有用且准确的

部署延迟

  1. 将更新的 HTML 文件上传到您的网络服务器
  2. 确保脚本标签位于 <head> 步骤2：您希望助手出现的位置
  3. 验证锚点跨度是否正确放置在文本区域旁边
  4. 在您的在线网站上测试助手
  5. 监控任何问题或错误
生产线报告
  • 相同的脚本标签（带有您的站点 ID）可以用于所有页面
  • 每个文本区域可以有自己的助手，并使用不同的令牌
  • 为不同的表单字段初始化多个具有不同配置的助手。

配置

您已成功将 AI Anywhere 集成到您的网站！您的助手现已上线，准备好为您的用户提供帮助。

接下来是什么？