Tutorial Completo

Primero, necesitas registrarte para obtener una cuenta de AI Anywhere.

1. Ir a la Página principal de AI Anywhere
2. Haz clic en el "Comenzar" botón en el encabezado
3. Regístrate usando tu cuenta social preferida (Google, GitHub, etc.)
4. You'll be automatically logged into your dashboard

Ahora vamos a crear un Ayudante que ayudará a los usuarios a escribir mensajes en el formulario de contacto.

1. Ir al panel de control "Asistentes"
2. Dale a tu Ayudante un nombre descriptivo, como "Ejemplo de formulario de contacto"
3. Seleccione el grupo al que pertenece este asistente
4. Haz clic en el "Gestionar asistentes"

Configura tu asistente

Al crear o editar un Asistente, configuras:

• Respuesta del Asistente: Enter a well-written example of what you want users to write. For a contact form, this might be a complete, professional message that includes all necessary information. The example should be complete with mock names, specific details, and realistic content (e.g., "Hello, I'm John Smith writing to inquire about your web development services. I'm particularly interested in building an e-commerce platform for my business. Could you please provide more information about your pricing and timeline? Thank you for your time.").
• Palabras clave y/o Reglas: Agrega palabras clave o reglas que sean importantes para tu caso de uso (por ejemplo, "contacto", "consulta", "pregunta", "soporte").
• Configuración del Tema del Botón Personaliza la apariencia del botón de Ayuda (color, texto) para que coincida con el diseño de tu sitio.

Aprende cómo encontrar selectores CSS para áreas de texto, formularios y campos de entrada para integrar los asistentes de AI Anywhere en tu sitio web.

1. En la configuración de Ayuda, haz clic en el "Generar Fragmento" botón
2. Verás dos fragmentos de código:
   • Etiqueta de script: Pega en tu sitio
   • Span de anclaje: Contiene tu token del Asistente
3. Copia ambos fragmentos - los necesitarás en el siguiente paso

Tu fragmento consta de dos partes:

<!-- Etiqueta de script (va en <head>) -->
<script src="https://ai-anywhere.ai/sdk/v1/loader.js" data-site="your-site-id"></script>

<!-- Ejemplo: El botón de Ayuda aparece junto a tu área de texto -->
<span data-helper-anchor data-helper-token="your-helper-token"></span>

Cargar el script del Asistente en tu

1. Abre el archivo HTML de tu sitio web (o plantilla) y localiza el
2. Encuentra el <head> sección
3. sección. Pega tu fragmento justo antes del cierre </head> etiqueta.

Así es como debería verse:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contactas con Nosotros:</title>
  
  <!-- Incrustar el Script del Asistente -->
  <script src="https://ai-anywhere.ai/sdk/v1/loader.js" data-site="your-site-id"></script>
</head>

Busca el botón de Ayuda junto a las áreas de texto en tu página

1. Encuentra tu formulario de contacto (o el formulario donde deseas el Helper)
2. Ubica el área de texto donde los usuarios escribirán su mensaje
3. Agrega el span de anclaje justo después del área de texto (o en una ubicación cercana)

Aquí tienes un ejemplo completo que muestra ambas partes:

<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>
    <!-- El botón del Asistente aparecerá junto a este elemento. -->
    <span data-helper-anchor data-helper-token="your-helper-token"></span>
  </div>
  
  <button type="submit">Mensaje de contacto:</button>
</form>

Ahora verifiquemos que todo esté funcionando correctamente.

1. Guardar asistente
2. Abre tu sitio web\
3. Navega a la página con tu formulario de contacto
4. Busca el botón de Ayuda junto a las áreas de texto en tu página

Lo que almacenamos

• Ejemplo: El botón de Ayuda aparece junto a tu área de texto
• El botón tiene el estilo correcto (color, texto, tamaño) que configuraste
• Cuando haces clic en el botón, se abre la interfaz del Helper
• Cuando escribes texto y haces clic en el botón del Helper, proporciona sugerencias

Solución de problemas

El botón de ayuda no\

• Check your browser's developer console (F12) for any JavaScript errors
• Asegúrate de que la etiqueta del script esté en la <head> sección
• Asegúrate de que el span de anclaje esté presente y contenga el token correcto del Asistente
• Actualiza tu página forzadamente (Ctrl+Shift+R o Cmd+Shift+R) para borrar archivos en caché.
• Verifica que tu ID de sitio y el token del Asistente sean correctos

Establece la etiqueta en "Asistente" o personalízala para que coincida con tu marca.

Lo que puedes personalizar

• Personalizar apariencias Cambia el color y el texto del botón de Ayuda.
• Respuesta del Asistente: Pega un texto de ejemplo de alta calidad que muestre lo que deseas que los usuarios logren.
• Palabras clave: Agrega o elimina palabras clave para mejorar la precisión de las sugerencias
• Total de asistentes: Crea Helpers adicionales para diferentes formularios o áreas de texto

Personalizar

1. Ir al panel de control
2. Selecciona "Asistentes", luego selecciona el Ayudante específico que deseas editar
3. Haz clic en el "Editar" botón
4. Guardar Cambios
5. Guardar cambios

Una vez que hayas probado todo localmente, es hora de desplegar en tu sitio web de producción.

Lista de verificación previa al despliegue

• Probado el Helper en tu entorno local/de pruebas
• Deberías ver el botón de Asistente aparecer junto a cualquier
• Prueba con un navegador diferente:
• Probado en dispositivos móviles
• Verificado que las sugerencias del Helper son útiles y precisas

Despliegues retrasados

1. Sube tus archivos HTML actualizados a tu servidor web
2. Asegúrate de que la etiqueta del script esté en la <head> Añadir ancla donde desees el botón de ayuda
3. Verifica que los spans de anclaje estén colocados correctamente junto a tus áreas de texto
4. Prueba el Helper en tu sitio web en vivo
5. Monitorea cualquier problema o error