安装指南

在您的网站上安装AI Anywhere非常简单。您可以通过两种方式使用您的助手：助手页面（无需代码：可共享链接，适用于任何浏览器）或在您的网站上嵌入助手按钮。本指南涵盖嵌入路径。

使用助手的两种方式

• 助手页面（无需代码）： 从您的仪表板获取可共享链接。无需代码，无需集成，无需代码片段。可以在任何浏览器中打开或与他人分享；无需部署，可在任何设备上使用。
• 助手按钮（嵌入）： 将脚本添加到您的 <head> 和助手锚点放在您的文本区域旁边。助手按钮将出现在您网站的字段旁边。

You can also set a Helper to "Both": it will be available as a shareable Helper Page link and embeddable on your site. For embed (or Both), you must create or select a Site (and its group) in the dashboard; the snippet uses that site's ID. The default Helper Page site cannot be used for embedding.

网站和嵌入

To embed a Helper on your website, you need a Site in your dashboard (Sites → Add site, or select an existing one). Each new site gets a default group. Use that site's ID in the script tag. If you only use the Helper Page (shareable link), you do not need to create a separate site.

先决条件

在开始之前，请确保您拥有：

• 一个有效的AI Anywhere账户： 注册于 ai-anywhere.ai 如果您还没有注册。
• 已创建的助手： 在您的仪表板中，创建一个新的助手。配置选择器和助手答案。

助手的工作原理

助手小部件遵循简单的三步流程：

1. 读取： 当用户点击助手按钮时，它会读取关联文本区域或输入字段中的当前文本。
2. 比较： 文本将与您配置的助手答案和关键词进行比较，以识别需要改进的地方。
3. 建议： 助手提供上下文建议，帮助用户撰写更好、更完整的内容，以匹配您的助手答案。

嵌入助手脚本

要将 AI Anywhere 添加到您的网页，您需要：

1. 在您的 <head> 部分加载助手脚本
2. 在您的文本区域或表单字段旁边添加助手锚点跨度

步骤 1：加载脚本

将脚本标签添加到您的 HTML 的 <head> 粘贴到您的网站

<script src="https://ai-anywhere.ai/sdk/v1/loader.js" data-site="your-site-id"></script>

步骤 2：初始化助手

在您希望助手出现的文本区域或表单字段旁边添加助手锚点跨度：

<span data-helper-anchor data-helper-token="your-helper-token"></span>

完整示例

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用于 Contact Form 7）</title>
  
  <!-- AI Anywhere 助手脚本 -->
  <script src="https://ai-anywhere.ai/sdk/v1/loader.js" data-site="your-site-id"></script>
</head>
<body>
  <form>
    <textarea id="message" placeholder="您的消息："></textarea>
    <span data-helper-anchor data-helper-token="your-helper-token"></span>
  </form>
</body>
</html>

了解配置

让我们分解每个配置选项：

• data-site: 标识您的账户的查询参数，并在您网站的所有页面上共享
• data-helper-anchor: 助手应出现的CSS选择器
• data-helper-token: 标识此特定助手配置的唯一键。每个助手实例都需要其自己的唯一键。在您创建助手时可以在仪表板中找到。

视觉示例

当助手激活时，用户将看到以下内容：

测试和验证

将代码片段添加到您的网站后，请按照以下步骤验证一切是否正常工作：

1. 刷新您的页面： 保存您的 HTML 文件并刷新浏览器（使用 Ctrl+Shift+R 或 Cmd+Shift+R 进行强制刷新以清除缓存）。
2. 查找助手按钮： 您应该看到助手按钮出现在任何 <textarea> 或 <input type="text"> 页面元素旁边。
3. 测试助手： 在您的表单字段中输入一些文本，然后点击助手按钮。助手将分析您的文本并提供建议。
4. 检查控制台： 打开浏览器的开发者控制台（F12），确保没有 JavaScript 错误。

常见问题与故障排除

常见问题

它是否在所有地方都有效？

AI Anywhere 适用于标准 HTML 表单元素，包括：

• <textarea> 元素
• <input type="text"> 字段
• <input type="email"> 字段
• 可编辑的 div（带有额外配置）

只要您可以将脚本标签添加到您的网站，它就可以在任何网站上运行，无论是使用 React、Vue、Angular、纯 HTML、WordPress 等框架。 <head> 部分。

我可以隐藏按钮吗？

是的，如果需要，您可以使用 CSS 隐藏助手按钮：

However, hiding the button means users won't be able to access the Helper. Consider making it visible only on specific pages or for specific user roles instead.

我可以在一个页面上使用多个助手吗？

是的！您可以在单个页面上拥有多个助手实例，每个实例具有不同的配置。只需添加多个具有不同助手令牌的锚点跨度：

<!-- 消息字段的第一个助手 -->
<textarea id="message"></textarea>
<span data-helper-anchor data-helper-token="message-helper-token"></span>

<!-- 备注字段的第二个助手 -->
<textarea id="notes"></textarea>
<span data-helper-anchor data-helper-token="notes-helper-token"></span>

每个助手将独立附加到其指定位置。