Ejemplos de código
Ejemplos de implementación listos para usar para casos de uso comunes de AI Anywhere.
Lectura de 13 min
Estos ejemplos de código demuestran implementaciones reales de AI Anywhere. Cópialos y adáptalos para tus propios proyectos.
Última integración HTML
Implementación moderna de HTML5 con marcado semántico. Añade el script a tu <head> sección y utiliza atributos de datos para la configuración.
<!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="Formulario de contacto con asistencia de IA">
<title>para Contact Form 7)</title>
<!-- Incrustar el Script del Asistente -->
<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">Tu Mensaje:</label>
<textarea id="message"
name="message"
rows="5"
placeholder="Escribe tu mensaje aquí..."
required></textarea>
<span data-helper-anchor
data-helper-token="your-helper-token"></span>
<button type="submit">Enviar</button>
</form>
</main>
</body>
</html>Ejemplo de formulario de contacto
Un formulario de contacto completo con asistencia del Asistente para el campo de mensaje.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contactas con Nosotros:</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">Nombre</label>
<input type="text" id="name" name="name" required>
</div>
<div>
<label for="email">Correo electrónico:</label>
<input type="email" id="email" name="email" required>
</div>
<div>
<label for="message">Tu Mensaje:</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">Mensaje de contacto:</button>
</form>
</body>
</html>Múltiples áreas de texto con diferentes Asistentes
Inicializa múltiples Asistentes con diferentes configuraciones para diferentes campos de formulario.
<script src="https://ai-anywhere.ai/sdk/v1/loader.js" data-site="your-site-id"></script>
<form>
<label>Texto de descripción del producto</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>Integración con WordPress
Añade AI Anywhere a tu tema de WordPress incluyendo el fragmento en tu 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');
?>Almacena tu configuración del Asistente en las opciones de WordPress para una gestión sencilla.
Integración con React
Integra AI Anywhere en tu aplicación React usando hooks y soporte de TypeScript. Funciona con React 16.8+ y patrones modernos de React.
import { useEffect, useRef } from 'react';
interface ContactFormProps {
siteId: string;
helperToken: string;
}
function ContactForm({ siteId, helperToken }: ContactFormProps) {
const scriptLoaded = useRef(false);
useEffect(() => {
// Cargar el script de AI Anywhere solo una 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 () => {
// Limpieza al 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();
// Tu lógica de envío de formularios
};
return (
<form onSubmit={handleSubmit}>
<label htmlFor="message">Tu Mensaje:</label>
<textarea
id="message"
name="message"
placeholder="Escribe tu mensaje aquí..."
required
/>
<span
data-helper-anchor
data-helper-token={helperToken}
></span>
<button type="submit">Enviar</button>
</form>
);
}
export default ContactForm;Uso: Importa y utiliza el componente: <ContactForm siteId="your-site-id" helperToken="your-helper-token" />
Integración con Angular CLI
Añade AI Anywhere a tu aplicación Angular usando servicios de Angular y hooks de ciclo de vida. Compatible con 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">Tu Mensaje:</label>
<textarea
id="message"
name="message"
[(ngModel)]="message"
placeholder="Escribe tu mensaje aquí..."
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 {
// Cargar el script de 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 {
// Limpiar el script al destruir el componente
if (this.scriptElement && this.document.head.contains(this.scriptElement)) {
this.document.head.removeChild(this.scriptElement);
}
}
onSubmit(): void {
// Tu lógica de envío de formularios
console.log('Message:', this.message);
}
}Nota: Asegúrate de importar FormsModule en tu app.module.ts para que ngModel funcione.
Integración con Vue.js
Integra AI Anywhere en tu aplicación Vue.js usando la API de composición o la API de opciones. Funciona con Vue 3.
<template>
<form @submit.prevent="handleSubmit">
<label for="message">Tu Mensaje:</label>
<textarea
id="message"
v-model="message"
placeholder="Escribe tu mensaje aquí..."
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(() => {
// Cargar el script de 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(() => {
// Limpiar el script al desmontar el componente
if (scriptElement && document.head.contains(scriptElement)) {
document.head.removeChild(scriptElement);
}
});
const handleSubmit = () => {
// Tu lógica de envío de formularios
console.log('Message:', message.value);
};
</script>Alternativa (API de opciones): Usa mounted() y beforeUnmount() hooks si prefieres la API de opciones.
Integración con SPA Vanilla
Agrega AI Anywhere a una aplicación de página única en JavaScript puro. Funciona con cualquier biblioteca de enrutamiento o arquitectura SPA sin 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) => {
// Verificar si el script ya existe
const existingScript = document.querySelector(
'script[src="https://ai-anywhere.ai/sdk/v1/loader.js"]'
);
if (existingScript) {
this.scriptLoaded = true;
resolve();
return;
}
// Crear y cargar el 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('Error al cargar el script de 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 al cargar la aplicación
const aiLoader = new AIAnywhereLoader('your-site-id');
// Cargar cuando el DOM esté listo
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', () => aiLoader.load());
} else {
aiLoader.load();
}
// Uso en tus rutas SPA
function renderContactForm() {
return `
<form id="contact-form">
<label for="message">Tu Mensaje:</label>
<textarea id="message" placeholder="Escribe tu mensaje aquí..." required></textarea>
<span data-helper-anchor data-helper-token="your-helper-token"></span>
<button type="submit">Enviar</button>
</form>
`;
}Uso: Importa el cargador en el archivo principal de tu aplicación y úsalo en tus rutas SPA.
Ejemplo de estilo personalizado
Sobrescribe los estilos predeterminados del botón del Asistente para que coincidan con tu sitio\
<style>
/* Personalizar la apariencia del botón de Ayuda */
.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="Tu Mensaje:"></textarea>
<span data-helper-anchor data-helper-token="your-helper-token"></span>
</form>