Resumen

Puedes instalar Astra en cualquier sitio web en solo unos pocos pasos copiando un fragmento de código de tu Panel de Astra y pegándolo en el HTML de tu sitio. Una vez instalado, puedes elegir cómo aparece Astra: como un widget de chat, una vista de foco o con la función opcional de resaltado mágico.

Instrucciones

Sigue estos pasos para instalar Astra en tu sitio web:

Paso 1: Obtén tu código de instalación

Inicia sesión en tu cuenta de Astra en https://astra.wati.io.
Ve a Agentes, luego elige un agente para editar o haz clic para crear un nuevo agente.
Ve a Construye mi Agente y haz clic en el botón de configuración para obtener el código.
Selecciona Copiar código para copiar tu código de instalación.

Paso 2: Agrega el código a tu sitio web

Localiza el archivo correcto para tu tipo de sitio web y pega el código antes de la etiqueta de cierre </body>.

Sitios web HTML generales: Agrega el código en tu archivo HTML principal (normalmente index.html dentro de la carpeta public_html).
React.js: Abre el archivo public/index.html y pega el código justo antes de la etiqueta de cierre </body>.
Next.js: Crea un archivo _document.js dentro de la carpeta pages, luego incluye el script antes de la etiqueta de cierre </body>.
Otros sitios web: Encuentra el archivo donde se administra el HTML y pega el código antes de la etiqueta de cierre </body>.

Así es como se ve:

<!-- Tu código HTML existente aquí --> 
<!-- Pega el código Astra aquí --> 
</body>

Paso 3: Guarda y verifica

Guarda tus cambios y despliégalos (si es necesario).
Actualiza tu sitio web; ahora deberías ver aparecer el widget Astra.

Opciones de implementación

Una vez instalado, Astra puede aparecer en tu sitio web de diferentes maneras. También puedes habilitar la función de resaltado mágico para una experiencia interactiva.

1. Widget (burbuja de chat inferior derecha)

Aparece como una burbuja de chat en la esquina inferior derecha de tu página web.
Utiliza tu icono de marca para un aspecto personalizado.
Muestra preguntas sugeridas para iniciar conversaciones, como preguntas frecuentes.
Los visitantes pueden hacer clic en una pregunta y el agente de IA responde directamente.

2. Foco (vista de chat inferior central)

Aparece como una ventana de chat tipo foco en la parte inferior central de tu pantalla.
Los visitantes pueden seleccionar una pregunta y el agente de IA proporcionará una respuesta.

3. Resaltado mágico

Permite a los visitantes hacer preguntas resaltando cualquier texto en tu sitio.
Por ejemplo, si alguien resalta "optimización de motores de búsqueda" y hace clic en Preguntar a Astra (o Preguntar al Agente), el agente de IA generará y responderá la pregunta.
La función escanea toda la base de conocimientos de tu sitio web para proporcionar la respuesta más relevante.

Nota: Si no deseas utilizar el Resaltado mágico, puedes deshabilitarlo navegando a Agentes > Seleccionar un Agente - ve a Construye mi Agente > Marca, luego desactiva el interruptor Resaltado mágico.

Elegir la opción correcta

Elige entre el widget o el foco según el diseño de tu sitio y las preferencias de experiencia del visitante.
Ambos se pueden implementar utilizando el código de instalación que copiaste anteriormente.
El resaltado mágico se puede habilitar con cualquiera de las opciones para una navegación más interactiva.

Instalación del agente de IA en tu sitio web