Guía de Instalación

Instalar AI Anywhere en tu sitio web es sencillo. Puedes usar tu Helper de dos maneras: la Página del Helper (sin código: enlace compartible, úsalo desde cualquier navegador) o incrustar el Botón del Helper en tu sitio. Esta guía cubre la opción de incrustar.

Dos maneras de usar su Ayudante

• Página de Ayuda (sin código): Obtén un enlace compartible desde tu panel de control. Sin código, sin integración, sin fragmento de código. Ábrelo en cualquier navegador o compártelo con otros; úsalo desde cualquier dispositivo sin implementación.
• Botón de Ayuda (incrustar): Agrega el script a tu <head> y el ancla del Ayudante junto a tu área de texto. El botón de Ayuda aparece en tu sitio junto al campo.

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.

Sitios e incrustación

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.

Requisitos Previos

Antes de comenzar, asegúrate de tener:

• Una cuenta activa de AI Anywhere: Regístrate en ai-anywhere.ai si no lo has hecho\
• Un Asistente creado: En tu panel de control, crea un nuevo Helper. Configura el selector y la Respuesta del Helper.

Cómo funciona el Asistente

El widget Asistente sigue un proceso simple de tres pasos:

1. Lee: Cuando un usuario hace clic en el botón de Asistente, lee el texto actual en el área de texto o campo de entrada asociado.
2. Compara: El texto se compara con tu Respuesta del Helper configurada y las palabras clave para identificar áreas de mejora.
3. Sugiere: El Helper ofrece sugerencias contextuales para ayudar a los usuarios a escribir contenido mejor y más completo que coincida con tu Respuesta del Helper.

Incrustar el Script del Asistente

Para añadir AI Anywhere a tu página web, necesitas:

1. Cargar el script del Asistente en tu <head> sección
2. Agrega el span de anclaje del Helper junto a tu área de texto o campo de formulario

Paso 1: Cargar el Script

Añade la etiqueta del script a tu HTML\ <head> Pega en tu sitio

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

Paso 2: Inicializar el Asistente

Agrega el span de anclaje del Helper junto a tu área de texto o campo de formulario donde deseas que aparezca el Helper:

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

Ejemplo Completo

Aquí tienes un ejemplo completo que muestra ambas partes:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <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"></script>
</head>
<body>
  <form>
    <textarea id="message" placeholder="Tu Mensaje:"></textarea>
    <span data-helper-anchor data-helper-token="your-helper-token"></span>
  </form>
</body>
</html>

Entendiendo la Configuración

Desglosamos cada opción de configuración:

• data-site: Un parámetro de consulta que identifica tu cuenta y se comparte en todas las páginas de tu sitio
• data-helper-anchor: Selector CSS donde debería aparecer el asistente
• data-helper-token: Clave única que identifica esta configuración específica del Asistente. Cada instancia del Asistente requiere su propia clave única. Se encuentra en tu panel de control cuando creas un Asistente.

Ejemplo visual

Esto es lo que verán los usuarios cuando el Asistente esté activo:

Pruebas y verificación

Después de agregar tu fragmento a tu sitio, sigue estos pasos para verificar que todo funcione:

1. Actualiza tu página: Guarda tu archivo HTML y actualiza tu navegador (actualización forzada con Ctrl+Shift+R o Cmd+Shift+R para limpiar la caché).
2. Busca el botón de Asistente: Deberías ver el botón de Asistente aparecer junto a cualquier <textarea> o <input type="text"> elemento en tu página.
3. Probar el selector: Introduce algún texto en el campo de tu formulario, luego haz clic en el botón del Asistente. El Asistente debería analizar tu texto y proporcionar sugerencias.
4. Revisa la consola: Revisa la consola del navegador (F12) para asegurarte de que no haya errores

Problemas Comunes y Solución de Problemas

Preguntas frecuentes

¿Funciona en todas partes?

AI Anywhere funciona con elementos de formulario HTML estándar, incluyendo:

• <textarea> elementos
• <input type="text"> campos
• <input type="email"> campos
• Divs editables (con configuración adicional)

Funciona en cualquier sitio web independientemente del framework (React, Vue, Angular, HTML simple, WordPress, etc.) siempre que puedas añadir la etiqueta de script a tu <head> sección.

¿Puedo ocultar el botón?

Sí, puedes ocultar el botón de Asistente usando CSS si es necesario:

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.

¿Puedo usar múltiples Asistentes en una sola página?

¡Sí! Puedes tener múltiples instancias de Helper en una sola página, cada una con diferentes configuraciones. Simplemente agrega múltiples spans de anclaje con diferentes tokens de Helper:

<!-- Primer asistente para el campo de mensaje -->
<textarea id="message"></textarea>
<span data-helper-anchor data-helper-token="message-helper-token"></span>

<!-- Segundo asistente para el campo de notas -->
<textarea id="notes"></textarea>
<span data-helper-anchor data-helper-token="notes-helper-token"></span>

Cada Asistente se adjuntará de forma independiente a su ubicación especificada.