Exemplos de Código

Última Integração HTML

Implementação moderna de HTML5 com marcação semântica. Adicione o script ao seu <head> section e use atributos de dados para configuração.

<!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="Formulário de contato com assistência de IA">
  <title>para o Contact Form 7)</title>
  
  <!-- Incorporando o Script do Assistente -->
  <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">Sua Mensagem:</label>
      <textarea id="message" 
                name="message" 
                rows="5" 
                placeholder="Digite sua mensagem aqui..."
                required></textarea>
      <span data-helper-anchor 
            data-helper-token="your-helper-token"></span>
      <button type="submit">Enviar</button>
    </form>
  </main>
</body>
</html>

Exemplo de Formulário de Contato

Um formulário de contato completo com assistência do Assistente para o campo de mensagem.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Entre em Contato Conosco:</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">Nome</label>
      <input type="text" id="name" name="name" required>
    </div>
    
    <div>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" required>
    </div>
    
    <div>
      <label for="message">Sua Mensagem:</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">Mensagem de Contato:</button>
  </form>
</body>
</html>

Múltiplas Áreas de Texto com Diferentes Assistentes

Inicialize múltiplos Assistentes com diferentes configurações para diferentes campos de formulário.

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

<form>
  <label>Texto de descrição do produto</label>
  <textarea id="description"></textarea>
  <span data-helper-anchor data-helper-token="product-helper-token"></span>
  
  <label>Notas Internas:</label>
  <textarea id="notes"></textarea>
  <span data-helper-anchor data-helper-token="notes-helper-token"></span>
</form>

Integração com WordPress

Adicione AI Anywhere ao seu tema WordPress incluindo o trecho no seu tema\

<?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');
?>

Armazene sua configuração de Assistente nas opções do WordPress para fácil gerenciamento.

Integração com React

Integre AI Anywhere na sua aplicação React usando hooks e suporte a TypeScript. Funciona com React 16.8+ e padrões modernos de React.

import { useEffect, useRef } from 'react';

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

function ContactForm({ siteId, helperToken }: ContactFormProps) {
  const scriptLoaded = useRef(false);
  
  useEffect(() => {
    // Carregue o script AI Anywhere apenas uma vez
    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 () => {
        // Limpeza ao desmontar
        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();
    // Sua lógica de envio de formulário
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="message">Sua Mensagem:</label>
      <textarea 
        id="message" 
        name="message"
        placeholder="Digite sua mensagem aqui..."
        required
      />
      <span 
        data-helper-anchor 
        data-helper-token={helperToken}
      ></span>
      <button type="submit">Enviar</button>
    </form>
  );
}

export default ContactForm;

Uso: Importe e use o componente: <ContactForm siteId="your-site-id" helperToken="your-helper-token" />

Integração com Angular CLI

Adicione AI Anywhere à sua aplicação Angular usando serviços Angular e hooks de ciclo de vida. Compatível com 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">Sua Mensagem:</label>
      <textarea 
        id="message" 
        name="message"
        [(ngModel)]="message"
        placeholder="Digite sua mensagem aqui..."
        required></textarea>
      <span 
        data-helper-anchor 
        [attr.data-helper-token]="helperToken"></span>
      <button type="submit">Enviar</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 {
    // Carregar script 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 {
    // Limpar script ao destruir componente
    if (this.scriptElement && this.document.head.contains(this.scriptElement)) {
      this.document.head.removeChild(this.scriptElement);
    }
  }

  onSubmit(): void {
    // Sua lógica de envio de formulário
    console.log('Message:', this.message);
  }
}

Nota: Certifique-se de importar FormsModule no seu app.module.ts para ngModel funcionar.

Integração com Vue.js

Integre o AI Anywhere na sua aplicação Vue.js usando a API de composição ou a API de opções. Funciona com Vue 3.

<template>
  <form @submit.prevent="handleSubmit">
    <label for="message">Sua Mensagem:</label>
    <textarea 
      id="message" 
      v-model="message"
      placeholder="Digite sua mensagem aqui..."
      required></textarea>
    <span 
      data-helper-anchor 
      :data-helper-token="helperToken"></span>
    <button type="submit">Enviar</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(() => {
  // Carregar script 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(() => {
  // Limpar script ao desmontar componente
  if (scriptElement && document.head.contains(scriptElement)) {
    document.head.removeChild(scriptElement);
  }
});

const handleSubmit = () => {
  // Sua lógica de envio de formulário
  console.log('Message:', message.value);
};
</script>

Alternativa (API de Opções): Use mounted() e beforeUnmount() hooks se preferir a API de Opções.

Integração com SPA Vanilla

Adicione o AI Anywhere a uma Aplicação de Página Única em JavaScript Vanilla. Funciona com qualquer biblioteca de roteamento ou arquitetura SPA sem framework.

// 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) => {
      // Verifique se o script já existe
      const existingScript = document.querySelector(
        'script[src="https://ai-anywhere.ai/sdk/v1/loader.js"]'
      );
      
      if (existingScript) {
        this.scriptLoaded = true;
        resolve();
        return;
      }

      // Criar e carregar script
      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('Falha ao carregar script 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;
    }
  }
}

// Inicializar ao carregar o aplicativo
const aiLoader = new AIAnywhereLoader('your-site-id');

// Carregar quando o DOM estiver pronto
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', () => aiLoader.load());
} else {
  aiLoader.load();
}

// Uso nas suas rotas SPA
function renderContactForm() {
  return `
    <form id="contact-form">
      <label for="message">Sua Mensagem:</label>
      <textarea id="message" placeholder="Digite sua mensagem aqui..." required></textarea>
      <span data-helper-anchor data-helper-token="your-helper-token"></span>
      <button type="submit">Enviar</button>
    </form>
  `;
}

Uso: Importe o carregador no arquivo principal do seu aplicativo e use-o nas suas rotas SPA.

Exemplo de Estilo Personalizado

Substitua os estilos padrão do botão do Assistente para combinar com seu site\

<style>
  /* Personalizar a aparência do botão de Ajuda */
  .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="Sua Mensagem:"></textarea>
  <span data-helper-anchor data-helper-token="your-helper-token"></span>
</form>