代码示例

最新HTML集成

现代HTML5实现，带有语义标记。将脚本添加到您的 <head> 部分，并使用数据属性进行配置。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="带有AI辅助的联系表单">
  <title>用于 Contact Form 7）</title>
  
  <!-- AI Anywhere 助手脚本 -->
  <script src="https://ai-anywhere.ai/sdk/v1/loader.js" 
          data-site="your-site-id"
          defer></script>
</head>
<body>
  <main>
    <form id="contact-form">
      <label for="message">您的消息：</label>
      <textarea id="message" 
                name="message" 
                rows="5" 
                placeholder="在此输入您的消息..."
                required></textarea>
      <span data-helper-anchor 
            data-helper-token="your-helper-token"></span>
      <button type="submit">发送</button>
    </form>
  </main>
</body>
</html>

联系表单示例

一个完整的联系表单，带有消息字段的助手支持。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>联系我们：</title>
  
  <script src="https://ai-anywhere.ai/sdk/v1/loader.js" data-site="your-site-id"></script>
</head>
<body>
  <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>
</body>
</html>

具有不同助手的多个文本区域

为不同的表单字段初始化多个具有不同配置的助手。

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

<form>
  <label>产品描述文字</label>
  <textarea id="description"></textarea>
  <span data-helper-anchor data-helper-token="product-helper-token"></span>
  
  <label>内部备注：</label>
  <textarea id="notes"></textarea>
  <span data-helper-anchor data-helper-token="notes-helper-token"></span>
</form>

WordPress 集成

通过在主题的 header.php 中包含代码片段或使用插件，将 AI Anywhere 添加到您的 WordPress 主题中。

<?php
// Add to your theme's functions.php or a custom plugin

function add_ai_anywhere_helper() {
  ?>
  <script src="https://ai-anywhere.ai/sdk/v1/loader.js" data-site="<?php echo get_option('aia_site_id', 'your-site-id'); ?>"></script>
  <span data-helper-anchor data-helper-token="<?php echo get_option('aia_helper_token', 'your-helper-token'); ?>"></span>
  <?php
}
add_action('wp_footer', 'add_ai_anywhere_helper');
?>

将您的助手配置存储在 WordPress 选项中以便于管理。

React 集成

使用钩子和TypeScript支持将AI Anywhere集成到您的React应用中。适用于React 16.8+和现代React模式。

import { useEffect, useRef } from 'react';

interface ContactFormProps {
  siteId: string;
  helperToken: string;
}

function ContactForm({ siteId, helperToken }: ContactFormProps) {
  const scriptLoaded = useRef(false);
  
  useEffect(() => {
    // 仅加载一次AI Anywhere脚本
    if (!scriptLoaded.current) {
      const script = document.createElement('script');
      script.src = 'https://ai-anywhere.ai/sdk/v1/loader.js';
      script.setAttribute('data-site', siteId);
      script.defer = true;
      document.head.appendChild(script);
      scriptLoaded.current = true;
      
      return () => {
        // 卸载时清理
        const existingScript = document.querySelector(
          'script[src="https://ai-anywhere.ai/sdk/v1/loader.js"]'
        );
        if (existingScript) {
          document.head.removeChild(existingScript);
        }
        scriptLoaded.current = false;
      };
    }
  }, [siteId]);
  
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    // 您的表单提交逻辑
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="message">您的消息：</label>
      <textarea 
        id="message" 
        name="message"
        placeholder="在此输入您的消息..."
        required
      />
      <span 
        data-helper-anchor 
        data-helper-token={helperToken}
      ></span>
      <button type="submit">发送</button>
    </form>
  );
}

export default ContactForm;

用法： 导入并使用组件： <ContactForm siteId="your-site-id" helperToken="your-helper-token" />

Angular CLI 集成

使用 Angular 服务和生命周期钩子将 AI Anywhere 添加到您的 Angular 应用程序中。兼容 Angular 12+。

// contact-form.component.ts
import { Component, OnInit, OnDestroy, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Component({
  selector: 'app-contact-form',
  template: `
    <form (ngSubmit)="onSubmit()">
      <label for="message">您的消息：</label>
      <textarea 
        id="message" 
        name="message"
        [(ngModel)]="message"
        placeholder="在此输入您的消息..."
        required></textarea>
      <span 
        data-helper-anchor 
        [attr.data-helper-token]="helperToken"></span>
      <button type="submit">发送</button>
    </form>
  `,
  styleUrls: ['./contact-form.component.css']
})
export class ContactFormComponent implements OnInit, OnDestroy {
  message = '';
  siteId = 'your-site-id';
  helperToken = 'your-helper-token';
  private scriptElement?: HTMLScriptElement;

  constructor(@Inject(DOCUMENT) private document: Document) {}

  ngOnInit(): void {
    // 加载 AI Anywhere 脚本
    this.scriptElement = this.document.createElement('script');
    this.scriptElement.src = 'https://ai-anywhere.ai/sdk/v1/loader.js';
    this.scriptElement.setAttribute('data-site', this.siteId);
    this.scriptElement.defer = true;
    this.document.head.appendChild(this.scriptElement);
  }

  ngOnDestroy(): void {
    // 在组件销毁时清理脚本
    if (this.scriptElement && this.document.head.contains(this.scriptElement)) {
      this.document.head.removeChild(this.scriptElement);
    }
  }

  onSubmit(): void {
    // 您的表单提交逻辑
    console.log('Message:', this.message);
  }
}

注意： 确保导入 FormsModule 在您的 app.module.ts 以便 ngModel 正常工作。

Vue.js 集成

将 AI Anywhere 集成到您的 Vue.js 应用程序中，可以使用组合 API 或选项 API。适用于 Vue 3。

<template>
  <form @submit.prevent="handleSubmit">
    <label for="message">您的消息：</label>
    <textarea 
      id="message" 
      v-model="message"
      placeholder="在此输入您的消息..."
      required></textarea>
    <span 
      data-helper-anchor 
      :data-helper-token="helperToken"></span>
    <button type="submit">发送</button>
  </form>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';

const message = ref('');
const siteId = 'your-site-id';
const helperToken = 'your-helper-token';
let scriptElement: HTMLScriptElement | null = null;

onMounted(() => {
  // 加载 AI Anywhere 脚本
  scriptElement = document.createElement('script');
  scriptElement.src = 'https://ai-anywhere.ai/sdk/v1/loader.js';
  scriptElement.setAttribute('data-site', siteId);
  scriptElement.defer = true;
  document.head.appendChild(scriptElement);
});

onUnmounted(() => {
  // 在组件卸载时清理脚本
  if (scriptElement && document.head.contains(scriptElement)) {
    document.head.removeChild(scriptElement);
  }
});

const handleSubmit = () => {
  // 您的表单提交逻辑
  console.log('Message:', message.value);
};
</script>

替代方案（选项 API）： 使用 mounted() 和 beforeUnmount() 钩子，如果您更喜欢选项 API。

原生 SPA 集成

将 AI Anywhere 添加到原生 JavaScript 单页应用程序中。适用于任何路由库或无框架的 SPA 架构。

// ai-anywhere-loader.js
class AIAnywhereLoader {
  constructor(siteId) {
    this.siteId = siteId;
    this.scriptLoaded = false;
  }

  load() {
    if (this.scriptLoaded) {
      return Promise.resolve();
    }

    return new Promise((resolve, reject) => {
      // 检查脚本是否已存在
      const existingScript = document.querySelector(
        'script[src="https://ai-anywhere.ai/sdk/v1/loader.js"]'
      );
      
      if (existingScript) {
        this.scriptLoaded = true;
        resolve();
        return;
      }

      // 创建并加载脚本
      const script = document.createElement('script');
      script.src = 'https://ai-anywhere.ai/sdk/v1/loader.js';
      script.setAttribute('data-site', this.siteId);
      script.defer = true;
      
      script.onload = () => {
        this.scriptLoaded = true;
        resolve();
      };
      
      script.onerror = () => {
        reject(new Error('加载 AI Anywhere 脚本失败'));
      };
      
      document.head.appendChild(script);
    });
  }

  unload() {
    const script = document.querySelector(
      'script[src="https://ai-anywhere.ai/sdk/v1/loader.js"]'
    );
    
    if (script) {
      document.head.removeChild(script);
      this.scriptLoaded = false;
    }
  }
}

// 在应用加载时初始化
const aiLoader = new AIAnywhereLoader('your-site-id');

// 在 DOM 准备好时加载
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', () => aiLoader.load());
} else {
  aiLoader.load();
}

// 在您的 SPA 路由中使用
function renderContactForm() {
  return `
    <form id="contact-form">
      <label for="message">您的消息：</label>
      <textarea id="message" placeholder="在此输入您的消息..." required></textarea>
      <span data-helper-anchor data-helper-token="your-helper-token"></span>
      <button type="submit">发送</button>
    </form>
  `;
}

用法： 在您的主应用文件中导入加载器，并在您的 SPA 路由中使用它。

自定义样式示例

覆盖默认的助手按钮样式以匹配您网站的设计。

<style>
  /* 自定义助手按钮外观 */
  .ai-helper-button {
    background-color: #007bff !important;
    border-radius: 8px !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
  }
  
  .ai-helper-button:hover {
    background-color: #0056b3 !important;
  }
</style>

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

<form>
  <textarea id="message" placeholder="您的消息："></textarea>
  <span data-helper-anchor data-helper-token="your-helper-token"></span>
</form>